/* V1.27Beta-select-polish1: final character select polish loaded after the legacy override stack. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs { padding: 0 !important; gap: clamp(8px, 1.2vw, 12px) !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab] { appearance: none !important; -webkit-appearance: none !important; position: relative !important; overflow: hidden !important; border-radius: 999px !important; outline: 0 !important; background-clip: padding-box !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab]::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab]::after, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab]::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab]::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"] { border-color: rgba(225, 197, 116, 0.58) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 48%), linear-gradient(102deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 246, 213, 0.88) 42%, rgba(225, 242, 255, 0.78) 72%, rgba(144, 205, 255, 0.62) 100%) !important; box-shadow: 0 7px 15px rgba(78, 117, 150, 0.11), 0 0 12px rgba(216, 180, 86, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; color: #4f3a10 !important; -webkit-text-fill-color: #4f3a10 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"] { border-color: rgba(200, 211, 221, 0.72) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 1), transparent 48%), linear-gradient(102deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 248, 251, 0.9) 46%, rgba(222, 230, 238, 0.82) 100%) !important; box-shadow: 0 7px 15px rgba(65, 78, 92, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important; color: #34485c !important; -webkit-text-fill-color: #34485c !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="villain"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="villain"] { border-color: rgba(171, 38, 55, 0.68) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 96, 112, 0.42), transparent 48%), linear-gradient(102deg, rgba(38, 6, 10, 0.96) 0%, rgba(83, 12, 20, 0.9) 46%, rgba(16, 6, 9, 0.94) 100%) !important; box-shadow: 0 7px 16px rgba(34, 3, 7, 0.22), 0 0 13px rgba(190, 36, 56, 0.18), inset 0 1px 0 rgba(255, 126, 140, 0.22) !important; color: #ffe6e9 !important; -webkit-text-fill-color: #ffe6e9 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected { border-color: rgba(213, 170, 62, 0.82) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 1), transparent 46%), linear-gradient(102deg, #fffef8 0%, #ffe9a7 45%, #d6f1ff 72%, #78bfff 100%) !important; box-shadow: 0 8px 18px rgba(91, 128, 160, 0.16), 0 0 17px rgba(217, 178, 72, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important; color: #44300b !important; -webkit-text-fill-color: #44300b !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected { border-color: rgba(184, 197, 209, 0.9) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 1), transparent 46%), linear-gradient(102deg, #ffffff 0%, #f3f6f8 46%, #d9e1e8 100%) !important; box-shadow: 0 8px 18px rgba(65, 78, 92, 0.13), 0 0 14px rgba(221, 228, 236, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important; color: #2e4358 !important; -webkit-text-fill-color: #2e4358 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="villain"].selected, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="villain"].selected { border-color: rgba(246, 64, 82, 0.88) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 146, 155, 0.62), transparent 46%), linear-gradient(102deg, #2b070d 0%, #a5162a 54%, #120407 100%) !important; box-shadow: 0 8px 18px rgba(50, 3, 8, 0.25), 0 0 18px rgba(232, 38, 58, 0.28), inset 0 1px 0 rgba(255, 148, 154, 0.32) !important; color: #fff1f2 !important; -webkit-text-fill-color: #fff1f2 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] { --character-title-color: #f2c15a !important; --card-title-ink: #c69a34 !important; --card-name-line: rgba(218, 176, 78, 0.62) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"] { --character-title-color: #ff7c84 !important; --card-name-bg: rgba(35, 8, 12, 0.9) !important; --card-name-line: rgba(218, 52, 68, 0.7) !important; --card-name-ink: #fff2f2 !important; --card-title-ink: #ff9098 !important; --skill-plaque-text: #fff1f2 !important; --soft-faction-chip-text: #fff1f2 !important; --soft-faction-chip-line: rgba(224, 54, 70, 0.76) !important; --soft-faction-chip-edge: rgba(120, 12, 22, 0.82) !important; --soft-faction-chip-glow: rgba(224, 54, 70, 0.26) !important; --soft-faction-chip-bg: radial-gradient(circle at 18% 0%, rgba(255, 132, 142, 0.38), transparent 45%), linear-gradient(102deg, rgba(48, 8, 12, 0.96) 0%, rgba(120, 18, 28, 0.9) 58%, rgba(22, 5, 8, 0.95) 100%) !important; --soft-faction-icon-bg: radial-gradient(circle at 35% 22%, rgba(255, 116, 128, 0.82), rgba(132, 18, 30, 0.9) 58%, rgba(35, 7, 11, 0.94) 100%) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]:not([data-character="Desire"]) .card-outer-frame.card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]:not([data-character="Desire"]) .card-outer-frame.card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]:not([data-character="Desire"]) > span::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]:not([data-character="Desire"]) > span::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]:not([data-character="Desire"])::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]:not([data-character="Desire"])::before { background: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.27Beta-select-polish1-luminary-rich1") center / 100% 100% no-repeat !important; filter: drop-shadow(0 3px 7px rgba(86, 61, 16, 0.18)) drop-shadow(0 0 11px rgba(84, 177, 255, 0.22)) drop-shadow(0 0 8px rgba(231, 181, 66, 0.16)) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"] .card-outer-frame.card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"] .card-outer-frame.card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"] > span::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"] > span::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"]::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"]::before { background: url("assets/ui/character-card-frame-villain-blackred-v1.png?v=V1.27Beta-select-polish1-villain-blackred1") center / 100% 100% no-repeat !important; filter: drop-shadow(0 3px 8px rgba(36, 4, 8, 0.32)) drop-shadow(0 0 12px rgba(214, 36, 54, 0.28)) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"] .card-outer-frame.card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"] .card-outer-frame.card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"] > span::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"] > span::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"]::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"]::before { background: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.27Beta-select-polish1-desire-hybrid1") center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription { left: 40.2% !important; right: 11.2% !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription { left: 39.8% !important; right: 10.8% !important; } } /* V1.27Beta-select-polish2: mobile skill chips return to the lower-left stack; names shift slightly left. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription { left: 38.4% !important; right: 13% !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription { left: 37.8% !important; right: 12.8% !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em { position: absolute !important; left: 8.8% !important; right: auto !important; bottom: 12.4% !important; z-index: 38 !important; display: grid !important; grid-auto-flow: row !important; grid-auto-rows: max-content !important; align-content: end !important; align-items: end !important; justify-content: start !important; justify-items: start !important; width: min(calc(var(--select-card-outer-w, 150px) * 0.74), 82%) !important; min-width: 0 !important; max-width: 82% !important; height: auto !important; min-height: 0 !important; max-height: none !important; gap: clamp(3px, calc(var(--select-card-outer-h, 260px) * 0.012), 5px) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip { box-sizing: border-box !important; display: inline-grid !important; grid-template-columns: auto minmax(0, max-content) !important; align-items: center !important; justify-content: start !important; justify-items: start !important; width: max-content !important; min-width: 0 !important; max-width: 100% !important; height: clamp(21px, calc(var(--select-card-outer-h, 260px) * 0.078), 28px) !important; min-height: clamp(21px, calc(var(--select-card-outer-h, 260px) * 0.078), 28px) !important; max-height: clamp(21px, calc(var(--select-card-outer-h, 260px) * 0.078), 28px) !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: clamp(7px, calc(var(--select-card-outer-w, 150px) * 0.052), 10px) !important; padding-right: clamp(13px, calc(var(--select-card-outer-w, 150px) * 0.09), 18px) !important; gap: clamp(4px, calc(var(--select-card-outer-w, 150px) * 0.03), 6px) !important; font-size: clamp(9.5px, calc(var(--select-card-outer-w, 150px) * 0.066), 12px) !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip { grid-template-columns: minmax(0, max-content) !important; max-width: 100% !important; } } /* V1.27Beta-select-polish3: mobile skills sit higher; special-mode chips match expanded special buttons. */ @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em { bottom: 18.2% !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip { appearance: none !important; -webkit-appearance: none !important; position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; z-index: 7 !important; display: inline-grid !important; grid-template-columns: minmax(0, max-content) !important; align-items: center !important; justify-content: center !important; justify-items: center !important; width: max-content !important; min-width: clamp(62px, calc(var(--select-card-outer-w, 150px) * 0.46), 86px) !important; max-width: min(calc(var(--select-card-outer-w, 150px) * 0.86), 100%) !important; height: clamp(21px, calc(var(--select-card-outer-h, 260px) * 0.078), 28px) !important; min-height: clamp(21px, calc(var(--select-card-outer-h, 260px) * 0.078), 28px) !important; max-height: clamp(21px, calc(var(--select-card-outer-h, 260px) * 0.078), 28px) !important; margin: 0 !important; padding: 0 clamp(17px, calc(var(--select-card-outer-w, 150px) * 0.12), 22px) 1px clamp(8px, calc(var(--select-card-outer-w, 150px) * 0.058), 11px) !important; border: 1px solid rgba(255, 210, 120, 0.96) !important; border-left: 3px solid rgba(75, 188, 116, 0.98) !important; border-radius: 0 !important; background: radial-gradient(circle at 18% 0%, rgba(255, 248, 210, 0.62), transparent 46%), linear-gradient(90deg, rgba(88, 198, 121, 0.98), rgba(38, 130, 84, 0.96) 48%, rgba(18, 62, 40, 0.98)) !important; box-shadow: 0 9px 24px rgba(22, 100, 62, 0.34), 0 0 24px rgba(123, 231, 148, 0.3), inset 0 1px 0 rgba(255, 238, 194, 0.42) !important; color: #fffbe8 !important; -webkit-text-fill-color: #fffbe8 !important; font-size: clamp(10px, calc(var(--select-card-outer-w, 150px) * 0.071), 12.5px) !important; font-weight: 950 !important; line-height: 1 !important; text-align: center !important; text-shadow: 0 1px 3px rgba(10, 39, 28, 0.84), 0 0 10px rgba(148, 244, 183, 0.34) !important; clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip .skill-inline-icon, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip .skill-inline-icon { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip .skill-inline-text, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip .skill-inline-text { display: block !important; min-width: 0 !important; max-width: 100% !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; font-size: inherit !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Lollipopz"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Lollipopz"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip { border-color: rgba(255, 184, 220, 0.9) !important; border-left-color: rgba(255, 142, 198, 0.96) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 48%), linear-gradient(90deg, rgba(255, 244, 251, 0.96), rgba(255, 202, 229, 0.78) 52%, rgba(219, 237, 255, 0.58)) !important; box-shadow: 0 7px 18px rgba(170, 60, 120, 0.16), 0 0 18px rgba(255, 178, 220, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; color: #f08fc4 !important; -webkit-text-fill-color: #f08fc4 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88), 0 0 10px rgba(255, 188, 224, 0.42) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Xiaoyang"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Xiaoyang"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip { border-color: rgba(255, 118, 106, 0.88) !important; border-left-color: rgba(255, 70, 74, 0.98) !important; background: radial-gradient(circle at 16% 0%, rgba(255, 233, 219, 0.54), transparent 46%), linear-gradient(90deg, rgba(255, 74, 74, 0.94), rgba(142, 18, 24, 0.94) 54%, rgba(38, 5, 9, 0.96)) !important; box-shadow: 0 8px 20px rgba(123, 10, 18, 0.34), 0 0 18px rgba(255, 70, 74, 0.24), inset 0 1px 0 rgba(255, 221, 205, 0.32) !important; color: #fff2e9 !important; -webkit-text-fill-color: #fff2e9 !important; text-shadow: 0 1px 3px rgba(32, 4, 7, 0.82), 0 0 10px rgba(255, 104, 82, 0.36) !important; } } /* V1.27Beta-select-polish6: keep only the real front art frame; remove duplicate backing frames. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span::before { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option .card-outer-frame.card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option .card-outer-frame.card-outer-frame { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: none !important; z-index: 70 !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip { padding: 0 clamp(16px, calc(var(--select-card-outer-w, 150px) * 0.108), 21px) 1px clamp(4px, calc(var(--select-card-outer-w, 150px) * 0.032), 7px) !important; } } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill.preview-mode-skill-tip:not([hidden]) { margin-left: clamp(6px, 0.75vw, 10px) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview:not([hidden]) #previewModeButton#previewModeButton.preview-mode-button:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview:not([hidden]) #previewModeButton#previewModeButton.preview-mode-button:not([hidden]) { left: clamp(6px, 0.75vw, 10px) !important; } /* V1.27Beta-desire-portrait-near1: bring Desire a little closer in select thumbnails and preview. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"] .mini-art.mini-art, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"] .mini-art.mini-art { --art-size: auto 112% !important; --art-position: center 7% !important; background-size: var(--art-size), cover, cover !important; background-position: var(--art-position), center center, center center !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview:not([hidden]) .preview-art.preview-art[data-character="Desire"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview:not([hidden]) .preview-art.preview-art[data-character="Desire"] { --art-size: auto 112% !important; --art-position: center 6% !important; background-size: var(--art-size), cover, cover !important; background-position: var(--art-position), center center, center center !important; } /* V1.27Beta-select-polish7: Desire keeps the normal card-frame wrapper, with the art frame fitted right/down. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"] .card-outer-frame.card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"] .card-outer-frame.card-outer-frame { --desire-frame-extra-x: clamp(3px, calc(var(--select-card-outer-w, 150px) * 0.026), 6px); --desire-frame-extra-y: clamp(4px, calc(var(--select-card-outer-h, 270px) * 0.016), 7px); top: calc(var(--select-frame-fit-outset-y, 10px) * -1) !important; left: calc(var(--select-frame-fit-outset-x, 8px) * -1) !important; right: calc(var(--select-frame-fit-outset-x, 8px) * -1 - var(--desire-frame-extra-x)) !important; bottom: calc(var(--select-frame-fit-outset-y, 10px) * -1 - var(--desire-frame-extra-y)) !important; display: block !important; width: auto !important; height: auto !important; transform: none !important; transform-origin: 50% 50% !important; background: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.27Beta-select-polish7-desire-frame-fit1") center / 100% 100% no-repeat !important; z-index: 96 !important; } /* V1.27Beta-select-polish8: final special-mode chip palettes for 61 and Xiaoyang thumbnails. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Rhasta"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Rhasta"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Rhasta"] #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Rhasta"] #previewModeSkill.preview-mode-skill-tip:not([hidden]) { border-color: rgba(255, 216, 118, 0.94) !important; border-left-color: rgba(74, 190, 119, 0.98) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 252, 219, 0.82), transparent 47%), linear-gradient(96deg, rgba(57, 176, 106, 0.98) 0%, rgba(251, 203, 86, 0.96) 55%, rgba(32, 86, 47, 0.98) 100%) !important; box-shadow: 0 8px 20px rgba(30, 110, 65, 0.28), 0 0 19px rgba(255, 210, 102, 0.28), inset 0 1px 0 rgba(255, 246, 205, 0.58) !important; color: #fff9df !important; -webkit-text-fill-color: #fff9df !important; text-shadow: 0 1px 3px rgba(24, 50, 22, 0.82), 0 0 10px rgba(255, 228, 122, 0.32) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Xiaoyang"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Xiaoyang"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Xiaoyang"] #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Xiaoyang"] #previewModeSkill.preview-mode-skill-tip:not([hidden]) { border-color: rgba(136, 226, 255, 0.92) !important; border-left-color: rgba(72, 148, 255, 0.98) !important; background: radial-gradient(circle at 18% 0%, rgba(244, 254, 255, 0.9), transparent 47%), linear-gradient(96deg, rgba(44, 91, 206, 0.96) 0%, rgba(96, 225, 255, 0.94) 55%, rgba(28, 38, 111, 0.98) 100%) !important; box-shadow: 0 8px 20px rgba(24, 70, 142, 0.26), 0 0 20px rgba(108, 224, 255, 0.3), inset 0 1px 0 rgba(244, 253, 255, 0.56) !important; color: #effdff !important; -webkit-text-fill-color: #effdff !important; text-shadow: 0 1px 3px rgba(7, 28, 82, 0.8), 0 0 11px rgba(130, 229, 255, 0.36) !important; } /* V1.27Beta-select-polish9: preview special chips now share the thumbnail badge logic. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill.preview-mode-skill-tip:not([hidden]) { appearance: none !important; -webkit-appearance: none !important; display: inline-grid !important; grid-template-columns: minmax(0, max-content) !important; align-items: center !important; justify-content: center !important; justify-items: center !important; width: max-content !important; min-width: clamp(62px, calc(var(--select-card-outer-w, 150px) * 0.46), 92px) !important; max-width: min(calc(var(--select-card-outer-w, 150px) * 0.88), 100%) !important; height: clamp(21px, calc(var(--select-card-outer-h, 260px) * 0.078), 28px) !important; min-height: clamp(21px, calc(var(--select-card-outer-h, 260px) * 0.078), 28px) !important; max-height: clamp(21px, calc(var(--select-card-outer-h, 260px) * 0.078), 28px) !important; margin: 0 !important; padding: 0 clamp(17px, calc(var(--select-card-outer-w, 150px) * 0.12), 22px) 1px clamp(8px, calc(var(--select-card-outer-w, 150px) * 0.058), 11px) !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%) !important; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", sans-serif !important; font-size: clamp(10px, calc(var(--select-card-outer-w, 150px) * 0.071), 12.5px) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill.preview-mode-skill-tip:not([hidden]) { justify-self: start !important; min-width: clamp(72px, 7.4vw, 112px) !important; max-width: min(100%, 168px) !important; height: clamp(23px, 2.6vh, 30px) !important; min-height: clamp(23px, 2.6vh, 30px) !important; max-height: clamp(23px, 2.6vh, 30px) !important; padding: 0 clamp(18px, 1.55vw, 24px) 1px clamp(8px, 0.8vw, 12px) !important; font-size: clamp(12px, 1.55vh, 14px) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip .skill-inline-icon, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip .skill-inline-icon, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill.preview-mode-skill-tip:not([hidden]) .skill-inline-icon, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill.preview-mode-skill-tip:not([hidden]) .skill-inline-icon { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip .skill-inline-text, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip .skill-inline-text, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill.preview-mode-skill-tip:not([hidden]) .skill-inline-text, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill.preview-mode-skill-tip:not([hidden]) .skill-inline-text { display: block !important; min-width: 0 !important; max-width: 100% !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; font-size: inherit !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Rhasta"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Rhasta"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Rhasta"] #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Rhasta"] #previewModeSkill.preview-mode-skill-tip:not([hidden]) { border: 1px solid rgba(255, 216, 118, 0.94) !important; border-left: 3px solid rgba(74, 190, 119, 0.98) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 252, 219, 0.9), transparent 47%), linear-gradient(90deg, rgba(85, 194, 119, 0.98), rgba(236, 188, 72, 0.97) 55%, rgba(35, 95, 56, 0.98)) !important; box-shadow: 0 8px 20px rgba(30, 110, 65, 0.28), 0 0 20px rgba(255, 210, 102, 0.3), inset 0 1px 0 rgba(255, 246, 205, 0.6) !important; color: #fff9df !important; -webkit-text-fill-color: #fff9df !important; text-shadow: 0 1px 3px rgba(24, 50, 22, 0.82), 0 0 10px rgba(255, 228, 122, 0.34) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Rhasta"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.enabled, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Rhasta"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.enabled, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Rhasta"] #previewModeSkill.preview-mode-skill-tip.enabled:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Rhasta"] #previewModeSkill.preview-mode-skill-tip.enabled:not([hidden]) { background: radial-gradient(circle at 20% 0%, rgba(255, 255, 235, 0.96), transparent 47%), linear-gradient(90deg, rgba(100, 214, 134, 0.98), rgba(255, 211, 91, 0.98) 55%, rgba(42, 116, 66, 0.98)) !important; box-shadow: 0 9px 24px rgba(30, 110, 65, 0.34), 0 0 26px rgba(255, 216, 108, 0.38), inset 0 1px 0 rgba(255, 250, 224, 0.72) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Xiaoyang"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Xiaoyang"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Xiaoyang"] #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Xiaoyang"] #previewModeSkill.preview-mode-skill-tip:not([hidden]) { border: 1px solid rgba(255, 118, 106, 0.9) !important; border-left: 3px solid rgba(255, 70, 74, 0.98) !important; background: radial-gradient(circle at 16% 0%, rgba(191, 236, 255, 0.3), transparent 32%), radial-gradient(circle at 24% 0%, rgba(255, 233, 219, 0.58), transparent 47%), linear-gradient(90deg, rgba(255, 74, 74, 0.95), rgba(142, 18, 24, 0.94) 54%, rgba(38, 5, 9, 0.96)) !important; box-shadow: 0 8px 20px rgba(123, 10, 18, 0.34), 0 0 18px rgba(255, 70, 74, 0.26), inset 0 1px 0 rgba(255, 221, 205, 0.34) !important; color: #fff2e9 !important; -webkit-text-fill-color: #fff2e9 !important; text-shadow: 0 1px 3px rgba(32, 4, 7, 0.82), 0 0 10px rgba(255, 104, 82, 0.38) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Xiaoyang"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.enabled, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Xiaoyang"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.enabled, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Xiaoyang"] #previewModeSkill.preview-mode-skill-tip.enabled:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Xiaoyang"] #previewModeSkill.preview-mode-skill-tip.enabled:not([hidden]) { border-color: rgba(255, 178, 109, 0.96) !important; border-left-color: rgba(255, 70, 74, 0.98) !important; background: radial-gradient(circle at 18% 0%, rgba(191, 236, 255, 0.32), transparent 32%), radial-gradient(circle at 20% 0%, rgba(255, 244, 210, 0.66), transparent 46%), linear-gradient(90deg, rgba(255, 94, 74, 0.98), rgba(164, 24, 25, 0.96) 48%, rgba(68, 6, 10, 0.98)) !important; box-shadow: 0 9px 24px rgba(132, 12, 20, 0.4), 0 0 24px rgba(255, 78, 62, 0.34), inset 0 1px 0 rgba(255, 238, 194, 0.42) !important; color: #fff8e8 !important; -webkit-text-fill-color: #fff8e8 !important; } /* V1.27Beta-select-polish10: locked thumbnail/preview mode-chip layout and faction preview frames. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em { position: absolute !important; left: clamp(10px, 8.5%, 17px) !important; right: auto !important; bottom: clamp(12px, 10.8%, 24px) !important; z-index: 38 !important; display: grid !important; grid-auto-flow: row !important; grid-template-columns: minmax(0, max-content) !important; grid-auto-rows: max-content !important; align-content: end !important; align-items: end !important; justify-content: start !important; justify-items: start !important; gap: clamp(4px, calc(var(--select-card-outer-h, 260px) * 0.014), 6px) !important; width: auto !important; min-width: 0 !important; max-width: min(calc(var(--select-card-outer-w, 150px) * 0.82), 86%) !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; z-index: 7 !important; box-sizing: border-box !important; display: inline-grid !important; grid-template-columns: auto minmax(0, max-content) !important; align-items: center !important; justify-content: start !important; justify-items: start !important; order: 2 !important; width: max-content !important; min-width: 0 !important; max-width: 100% !important; height: clamp(23px, calc(var(--select-card-outer-h, 260px) * 0.086), 31px) !important; min-height: clamp(23px, calc(var(--select-card-outer-h, 260px) * 0.086), 31px) !important; max-height: clamp(23px, calc(var(--select-card-outer-h, 260px) * 0.086), 31px) !important; margin: 0 !important; padding: 0 clamp(12px, calc(var(--select-card-outer-w, 150px) * 0.075), 18px) 1px clamp(9px, calc(var(--select-card-outer-w, 150px) * 0.058), 13px) !important; gap: clamp(5px, calc(var(--select-card-outer-w, 150px) * 0.034), 8px) !important; font-size: clamp(10.5px, calc(var(--select-card-outer-w, 150px) * 0.076), 14px) !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text { order: 1 !important; grid-template-columns: minmax(0, max-content) !important; justify-content: center !important; justify-items: center !important; min-width: clamp(78px, calc(var(--select-card-outer-w, 150px) * 0.5), 112px) !important; max-width: 100% !important; padding: 0 clamp(12px, calc(var(--select-card-outer-w, 150px) * 0.078), 17px) 1px !important; gap: 0 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text .skill-inline-icon, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text .skill-inline-icon, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip.mode-only-text .skill-inline-icon, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip.mode-only-text .skill-inline-icon { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text .skill-inline-text, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text .skill-inline-text, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip.mode-only-text .skill-inline-text, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip.mode-only-text .skill-inline-text { display: block !important; min-width: 0 !important; max-width: 100% !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; font-size: inherit !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text[data-skill-name-size="long"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text[data-skill-name-size="long"] { min-width: clamp(90px, calc(var(--select-card-outer-w, 150px) * 0.6), 132px) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text[data-skill-name-size="long"] .skill-inline-text, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text[data-skill-name-size="long"] .skill-inline-text { font-size: 0.92em !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-skill, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-skill { display: grid !important; grid-template-columns: minmax(0, max-content) !important; grid-auto-flow: row !important; grid-auto-rows: max-content !important; align-content: start !important; align-items: start !important; justify-content: start !important; justify-items: start !important; gap: clamp(6px, 0.72vh, 9px) !important; width: min(100%, 390px) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip { order: 1 !important; justify-self: start !important; width: max-content !important; min-width: clamp(104px, 10.4vw, 148px) !important; max-width: min(100%, 250px) !important; margin: 0 !important; padding-left: clamp(16px, 1.5vw, 22px) !important; padding-right: clamp(16px, 1.5vw, 22px) !important; gap: 0 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip { order: 2 !important; justify-self: start !important; margin: 0 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewDescription, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewDescription { order: 3 !important; grid-column: 1 !important; justify-self: start !important; width: min(100%, 390px) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-art, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-art { overflow: visible !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-art::after, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-art::after { background: linear-gradient(180deg, transparent 18%, rgba(0, 0, 0, 0.06) 42%, rgba(7, 10, 18, 0.6) 100%) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="luminary"] .preview-art::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="luminary"] .preview-art::before { inset: calc(var(--card-frame-outset-y, 18px) * -1.06) calc(var(--card-frame-outset-x, 14px) * -1.08) !important; border: 0 !important; border-radius: 0 !important; background: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.27Beta-select-polish10-preview-frame1") center / 100% 100% no-repeat !important; opacity: 0.99 !important; filter: drop-shadow(0 0 11px rgba(116, 206, 255, 0.24)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.34)) !important; animation: frameBreath 3.6s ease-in-out infinite !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="neutral"] .preview-art::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="neutral"] .preview-art::before { inset: calc(var(--card-frame-outset-y, 18px) * -1.06) calc(var(--card-frame-outset-x, 14px) * -1.08) !important; border: 0 !important; border-radius: 0 !important; background: url("assets/ui/character-card-frame-neutral-complete-v1.png?v=V1.27Beta-select-polish10-preview-frame1") center / 100% 100% no-repeat !important; opacity: 0.98 !important; filter: drop-shadow(0 0 10px rgba(255, 228, 240, 0.2)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.32)) !important; animation: frameBreath 3.6s ease-in-out infinite !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="villain"] .preview-art::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="villain"] .preview-art::before { inset: calc(var(--card-frame-outset-y, 18px) * -1.06) calc(var(--card-frame-outset-x, 14px) * -1.08) !important; border: 0 !important; border-radius: 0 !important; background: url("assets/ui/character-card-frame-villain-blackred-v1.png?v=V1.27Beta-select-polish10-preview-frame1") center / 100% 100% no-repeat !important; opacity: 0.99 !important; filter: drop-shadow(0 0 12px rgba(255, 70, 74, 0.22)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.38)) !important; animation: frameBreath 3.6s ease-in-out infinite !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Lollipopz"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Lollipopz"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Lollipopz"] #previewModeSkill.preview-mode-skill-tip.mode-only-text:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Lollipopz"] #previewModeSkill.preview-mode-skill-tip.mode-only-text:not([hidden]) { border: 1px solid rgba(255, 183, 224, 0.94) !important; border-left: 3px solid rgba(136, 209, 255, 0.98) !important; background: radial-gradient(circle at 17% 0%, rgba(255, 255, 255, 0.94), transparent 48%), linear-gradient(94deg, rgba(255, 248, 253, 0.98), rgba(255, 179, 222, 0.9) 46%, rgba(174, 226, 255, 0.82) 100%) !important; box-shadow: 0 8px 20px rgba(176, 66, 128, 0.18), 0 0 22px rgba(255, 164, 219, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.74) !important; color: #7f3a71 !important; -webkit-text-fill-color: #7f3a71 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86), 0 0 10px rgba(255, 198, 232, 0.42) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Lollipopz"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text.enabled, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Lollipopz"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.mode-only-text.enabled, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Lollipopz"] #previewModeSkill.preview-mode-skill-tip.mode-only-text.enabled:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Lollipopz"] #previewModeSkill.preview-mode-skill-tip.mode-only-text.enabled:not([hidden]) { border-color: rgba(255, 204, 236, 0.98) !important; border-left-color: rgba(112, 206, 255, 1) !important; background: radial-gradient(circle at 19% 0%, rgba(255, 255, 255, 0.98), transparent 48%), linear-gradient(94deg, rgba(255, 253, 255, 0.99), rgba(255, 158, 216, 0.94) 45%, rgba(145, 218, 255, 0.9) 100%) !important; box-shadow: 0 9px 24px rgba(176, 66, 128, 0.23), 0 0 28px rgba(255, 164, 219, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip.mode-only-text:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip.mode-only-text:not([hidden]) { box-sizing: border-box !important; order: 1 !important; display: inline-grid !important; grid-template-columns: minmax(0, max-content) !important; align-items: center !important; justify-content: center !important; justify-items: center !important; width: max-content !important; min-width: clamp(128px, 10.4vw, 154px) !important; max-width: min(100%, 260px) !important; margin: 0 !important; padding: 0 clamp(16px, 1.45vw, 22px) 1px !important; gap: 0 !important; } /* V1.28Beta-select-thumb-no-rect1: remove the faint rectangular backing from select thumbnails. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span { background: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span::after, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; filter: none !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option .mini-art.mini-art, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option .mini-art.mini-art { background-color: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; filter: none !important; } /* V1.28Beta-preview-frame-fit1: large preview cards use thumbnail-style frame fitting. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview { --preview-frame-fit-outset-x: clamp(18px, 5.2%, 32px) !important; --preview-frame-fit-outset-y: clamp(24px, 4.8%, 42px) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-art.preview-art::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-art.preview-art::before { top: calc(var(--preview-frame-fit-outset-y) * -1) !important; right: calc(var(--preview-frame-fit-outset-x) * -1) !important; bottom: calc(var(--preview-frame-fit-outset-y) * -1) !important; left: calc(var(--preview-frame-fit-outset-x) * -1) !important; inset: calc(var(--preview-frame-fit-outset-y) * -1) calc(var(--preview-frame-fit-outset-x) * -1) !important; width: auto !important; height: auto !important; box-sizing: border-box !important; border: 0 !important; border-radius: 0 !important; clip-path: none !important; overflow: visible !important; transform: none !important; transform-origin: 50% 50% !important; background-position: center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; z-index: 5 !important; opacity: 1 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="luminary"] .preview-art.preview-art::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="luminary"] .preview-art.preview-art::before { background-image: url("assets/ui/character-card-frame-luminary-soft-blue-v1.png?v=V1.28Beta-preview-frame-fit1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="neutral"] .preview-art.preview-art::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="neutral"] .preview-art.preview-art::before { background-image: url("assets/ui/character-card-frame-neutral-soft-pink-silver-v1.png?v=V1.28Beta-preview-frame-fit1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="villain"] .preview-art.preview-art::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="villain"] .preview-art.preview-art::before { background-image: url("assets/ui/character-card-frame-villain-blackred-v1.png?v=V1.28Beta-preview-frame-fit1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Desire"] .preview-art.preview-art::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Desire"] .preview-art.preview-art::before { background-image: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.28Beta-preview-frame-fit1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-inscription.preview-inscription.card-inscription, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-inscription.preview-inscription.card-inscription, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-inscription.preview-inscription.card-inscription small, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-inscription.preview-inscription.card-inscription small, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-inscription.preview-inscription.card-inscription strong, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-inscription.preview-inscription.card-inscription strong { clip-path: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-inscription.preview-inscription.card-inscription small, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-inscription.preview-inscription.card-inscription small { box-sizing: border-box !important; min-height: clamp(19px, 2.55vh, 24px) !important; padding-top: clamp(3px, 0.42vh, 5px) !important; padding-bottom: clamp(3px, 0.42vh, 5px) !important; } /* V1.28Beta-faction-tab-color-swap1: final tab palette pass for Luminary and Freeborn factions. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"]:not(.selected), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"]:not(.selected) { border-color: rgba(177, 224, 246, 0.78) !important; background: radial-gradient(circle at 17% 0%, rgba(255, 255, 255, 0.98), transparent 48%), linear-gradient(102deg, rgba(255, 255, 255, 0.97) 0%, rgba(239, 251, 255, 0.94) 46%, rgba(212, 241, 255, 0.82) 74%, rgba(175, 224, 248, 0.7) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 6px 14px rgba(54, 132, 180, 0.1), 0 0 12px rgba(154, 225, 255, 0.13) !important; color: #2f6f8b !important; -webkit-text-fill-color: #2f6f8b !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected { border-color: rgba(124, 207, 246, 0.96) !important; background: radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 1), transparent 46%), linear-gradient(102deg, rgba(255, 255, 255, 1) 0%, rgba(229, 249, 255, 0.98) 38%, rgba(185, 232, 255, 0.94) 70%, rgba(123, 206, 246, 0.9) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 0 0 1px rgba(219, 247, 255, 0.64), 0 9px 18px rgba(57, 143, 198, 0.17), 0 0 20px rgba(139, 222, 255, 0.27) !important; color: #125473 !important; -webkit-text-fill-color: #125473 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"]:not(.selected), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"]:not(.selected) { border-color: rgba(214, 196, 210, 0.74) !important; background: radial-gradient(circle at 17% 0%, rgba(255, 255, 255, 1), transparent 48%), linear-gradient(102deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 244, 250, 0.9) 42%, rgba(238, 229, 237, 0.82) 72%, rgba(219, 224, 233, 0.76) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 6px 14px rgba(110, 72, 95, 0.09), 0 0 10px rgba(228, 184, 211, 0.12) !important; color: #835c72 !important; -webkit-text-fill-color: #835c72 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected { border-color: rgba(239, 185, 220, 0.96) !important; background: radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 1), transparent 46%), linear-gradient(102deg, rgba(255, 255, 255, 1) 0%, rgba(255, 232, 246, 0.98) 42%, rgba(239, 218, 234, 0.94) 70%, rgba(214, 221, 232, 0.9) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 0 0 1px rgba(255, 243, 250, 0.62), 0 9px 18px rgba(137, 82, 115, 0.15), 0 0 19px rgba(235, 180, 214, 0.27) !important; color: #763e61 !important; -webkit-text-fill-color: #763e61 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="luminary"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="luminary"] { --character-title-color: #9adfff !important; --card-title-ink: #2f86ad !important; --card-name-line: rgba(142, 216, 250, 0.72) !important; --card-name-ink: #12405e !important; --skill-plaque-text: #155171 !important; --soft-faction-chip-text: #155171 !important; --soft-faction-chip-line: rgba(174, 229, 252, 0.9) !important; --soft-faction-chip-edge: rgba(91, 183, 232, 0.82) !important; --soft-faction-chip-glow: rgba(125, 211, 248, 0.24) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="neutral"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="neutral"] { --character-title-color: #f2abd3 !important; --card-title-ink: #9c5578 !important; --card-name-line: rgba(225, 176, 209, 0.72) !important; --card-name-ink: #63324d !important; --skill-plaque-text: #683952 !important; --soft-faction-chip-text: #683952 !important; --soft-faction-chip-line: rgba(229, 197, 218, 0.9) !important; --soft-faction-chip-edge: rgba(190, 145, 176, 0.8) !important; --soft-faction-chip-glow: rgba(222, 160, 198, 0.22) !important; } /* V1.28Beta-preview-card-frame-full1: enlarged preview uses the same whole-card frame logic as thumbnails. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview { --preview-frame-fit-outset-x: clamp(22px, 6.2%, 42px) !important; --preview-frame-fit-outset-y: clamp(32px, 6%, 56px) !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview:not([hidden]) { position: fixed !important; left: 50vw !important; top: 50dvh !important; z-index: 280 !important; transform: translate3d(-50%, -50%, 0) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-art.preview-art::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-art.preview-art::before { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview > .preview-card-outer-frame.preview-card-outer-frame { position: absolute !important; top: calc(var(--preview-frame-fit-outset-y) * -1) !important; right: calc(var(--preview-frame-fit-outset-x) * -1) !important; bottom: calc(var(--preview-frame-fit-outset-y) * -1) !important; left: calc(var(--preview-frame-fit-outset-x) * -1) !important; z-index: 96 !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; clip-path: none !important; overflow: visible !important; pointer-events: none !important; background: url("assets/ui/character-card-frame-luminary-soft-blue-v1.png?v=V1.28Beta-preview-card-frame-full1") center / 100% 100% no-repeat !important; opacity: 1 !important; mix-blend-mode: normal !important; filter: drop-shadow(0 6px 14px rgba(8, 24, 42, 0.22)) drop-shadow(0 0 12px rgba(96, 184, 255, 0.18)) !important; transform: none !important; transform-origin: 50% 50% !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="luminary"] > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="luminary"] > .preview-card-outer-frame.preview-card-outer-frame { background-image: url("assets/ui/character-card-frame-luminary-soft-blue-v1.png?v=V1.28Beta-preview-card-frame-full1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="neutral"] > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="neutral"] > .preview-card-outer-frame.preview-card-outer-frame { background-image: url("assets/ui/character-card-frame-neutral-soft-pink-silver-v1.png?v=V1.28Beta-preview-card-frame-full1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="villain"] > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="villain"] > .preview-card-outer-frame.preview-card-outer-frame { background-image: url("assets/ui/character-card-frame-villain-blackred-v1.png?v=V1.28Beta-preview-card-frame-full1") !important; filter: drop-shadow(0 6px 14px rgba(12, 2, 2, 0.24)) drop-shadow(0 0 12px rgba(232, 65, 45, 0.16)) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Desire"] > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Desire"] > .preview-card-outer-frame.preview-card-outer-frame { background-image: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.28Beta-preview-card-frame-full1") !important; filter: drop-shadow(0 7px 15px rgba(16, 8, 26, 0.24)) drop-shadow(0 0 13px rgba(174, 217, 255, 0.17)) drop-shadow(0 0 10px rgba(234, 80, 106, 0.12)) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview { --preview-frame-fit-outset-x: clamp(20px, 7%, 38px) !important; --preview-frame-fit-outset-y: clamp(30px, 6.4%, 54px) !important; } } /* V1.28Beta-mobile-preview-frame-sync1: phone enlarged portraits use the same frame/art ratio as thumbnails. */ @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview { --preview-card-scale: 1.48 !important; --preview-card-w: min( calc(100vw - 44px), calc(var(--select-card-outer-w, 180px) * var(--preview-card-scale)), 312px ) !important; --preview-card-h: calc(var(--preview-card-w) / var(--select-card-ratio, 0.64)) !important; --preview-frame-fit-outset-x: 0px !important; --preview-frame-fit-outset-y: 0px !important; width: var(--preview-card-w) !important; min-width: var(--preview-card-w) !important; max-width: var(--preview-card-w) !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview:not([hidden]) { left: 50vw !important; top: 50dvh !important; transform: translate3d(-50%, -50%, 0) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview::after, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewArt.preview-art, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewArt.preview-art { position: relative !important; z-index: 3 !important; width: var(--preview-card-w) !important; min-width: var(--preview-card-w) !important; max-width: var(--preview-card-w) !important; height: var(--preview-card-h) !important; min-height: var(--preview-card-h) !important; max-height: var(--preview-card-h) !important; aspect-ratio: var(--select-card-ratio, 0.64) / 1 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background-size: var(--art-size, cover), cover, cover !important; background-position: var(--art-position, center top), center, center !important; clip-path: none !important; overflow: visible !important; box-shadow: 0 18px 38px rgba(8, 18, 30, 0.34), 0 0 22px rgba(112, 188, 255, 0.14) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewArt.preview-art::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewArt.preview-art::after, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewArt.preview-art::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewArt.preview-art::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame { position: absolute !important; inset: 0 !important; z-index: 96 !important; display: block !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: url("assets/ui/character-card-frame-luminary-soft-blue-v1.png?v=V1.28Beta-mobile-preview-frame-sync1") center / 100% 100% no-repeat !important; opacity: 1 !important; filter: drop-shadow(0 5px 12px rgba(8, 24, 42, 0.22)) drop-shadow(0 0 10px rgba(96, 184, 255, 0.18)) !important; pointer-events: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="neutral"] #previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="neutral"] #previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame { background-image: url("assets/ui/character-card-frame-neutral-soft-pink-silver-v1.png?v=V1.28Beta-mobile-preview-frame-sync1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="villain"] #previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="villain"] #previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame { background-image: url("assets/ui/character-card-frame-villain-blackred-v1.png?v=V1.28Beta-mobile-preview-frame-sync1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Desire"] #previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Desire"] #previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame { background-image: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.28Beta-mobile-preview-frame-sync1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewArt.preview-art > .preview-inscription.preview-inscription.card-inscription, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewArt.preview-art > .preview-inscription.preview-inscription.card-inscription { z-index: 110 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-copy, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-copy { width: 100% !important; margin-top: 10px !important; } } /* V1.28Beta-mobile-select-skill-stack1: special-mode thumbnails keep the normal skill chip in the same place as every other card. */ @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em { position: absolute !important; left: 8.8% !important; right: auto !important; bottom: 12.4% !important; z-index: 110 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; gap: clamp(3px, calc(var(--select-card-outer-h, 280px) * 0.012), 5px) !important; width: min(calc(var(--select-card-outer-w, 180px) * 0.78), 84%) !important; min-width: 0 !important; max-width: 84% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip { flex: 0 0 auto !important; box-sizing: border-box !important; display: inline-grid !important; grid-template-columns: auto minmax(0, max-content) !important; align-items: center !important; justify-content: start !important; justify-items: start !important; width: max-content !important; min-width: 0 !important; max-width: 100% !important; height: clamp(21px, calc(var(--select-card-outer-h, 280px) * 0.078), 28px) !important; min-height: clamp(21px, calc(var(--select-card-outer-h, 280px) * 0.078), 28px) !important; max-height: clamp(21px, calc(var(--select-card-outer-h, 280px) * 0.078), 28px) !important; margin: 0 !important; padding: 0 clamp(10px, calc(var(--select-card-outer-w, 180px) * 0.064), 15px) 0 clamp(7px, calc(var(--select-card-outer-w, 180px) * 0.046), 10px) !important; gap: clamp(3px, calc(var(--select-card-outer-w, 180px) * 0.026), 5px) !important; font-size: clamp(9px, calc(var(--select-card-outer-w, 180px) * 0.062), 11.5px) !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) { order: 2 !important; align-self: flex-start !important; justify-self: start !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.mode-tip.mode-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.mode-tip.mode-tip.mode-tip { order: 1 !important; align-self: flex-start !important; justify-self: start !important; width: max-content !important; min-width: 0 !important; max-width: 100% !important; transform: none !important; } } /* V1.28Beta-mobile-preview-frame-sync2: preview shell is only a locator; the visible frame belongs to previewArt. */ @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview { position: fixed !important; left: 50vw !important; top: 50dvh !important; z-index: 28000 !important; width: var(--preview-card-w) !important; min-width: var(--preview-card-w) !important; max-width: var(--preview-card-w) !important; height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 34px) !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important; transform: translate3d(-50%, -50%, 0) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview::after, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview #previewArt.preview-art.preview-art, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview #previewArt.preview-art.preview-art { box-sizing: border-box !important; flex: 0 0 auto !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview #previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview #previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame { inset: 0 !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect.character-select.preview-open .character-preview-backdrop, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open .character-preview-backdrop { position: fixed !important; inset: 0 !important; z-index: 27000 !important; background: radial-gradient(ellipse at 50% 44%, rgba(108, 184, 255, 0.18), transparent 38%), rgba(5, 12, 22, 0.68) !important; backdrop-filter: blur(3px) saturate(0.92) !important; -webkit-backdrop-filter: blur(3px) saturate(0.92) !important; } } /* V1.28Beta-mobile-select-skill-stack3: final mobile anchor for Rhasta, Lollipopz, and Xiaoyang special-mode cards. */ @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Rhasta"] > span > em, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Lollipopz"] > span > em, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Xiaoyang"] > span > em, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Rhasta"] > span > em, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Lollipopz"] > span > em, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Xiaoyang"] > span > em { position: absolute !important; left: 8.8% !important; right: auto !important; top: auto !important; bottom: 12.4% !important; z-index: 112 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; gap: clamp(3px, calc(var(--select-card-outer-h, 280px) * 0.012), 5px) !important; width: min(calc(var(--select-card-outer-w, 180px) * 0.78), 84%) !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Rhasta"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Lollipopz"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Xiaoyang"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Rhasta"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Lollipopz"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Xiaoyang"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; align-self: flex-start !important; justify-self: start !important; margin: 0 !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Rhasta"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Lollipopz"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Xiaoyang"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Rhasta"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Lollipopz"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Xiaoyang"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) { order: 2 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Rhasta"] > span > em > b.mode-tip.mode-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Lollipopz"] > span > em > b.mode-tip.mode-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Xiaoyang"] > span > em > b.mode-tip.mode-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Rhasta"] > span > em > b.mode-tip.mode-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Lollipopz"] > span > em > b.mode-tip.mode-tip.mode-tip, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Xiaoyang"] > span > em > b.mode-tip.mode-tip.mode-tip { order: 1 !important; } } /* V1.28Beta-preview-card-wrap1: opened mobile preview uses the same outer-card frame logic as thumbnails. */ @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview { --preview-card-scale: 1.5 !important; --preview-card-outer-w: min(calc(100vw - 44px), calc(var(--select-card-outer-w, 184px) * var(--preview-card-scale)), 326px) !important; --preview-card-outer-h: calc(var(--preview-card-outer-w) / var(--select-card-ratio, 0.64)) !important; position: fixed !important; left: 50vw !important; top: 50dvh !important; z-index: 28000 !important; display: block !important; box-sizing: border-box !important; width: var(--preview-card-outer-w) !important; min-width: var(--preview-card-outer-w) !important; max-width: var(--preview-card-outer-w) !important; height: var(--preview-card-outer-h) !important; min-height: var(--preview-card-outer-h) !important; max-height: min(var(--preview-card-outer-h), calc(100dvh - 34px)) !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; filter: none !important; overflow: visible !important; transform: translate3d(-50%, -50%, 0) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview #previewArt.preview-art.preview-art, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview #previewArt.preview-art.preview-art { box-sizing: border-box !important; position: relative !important; z-index: 3 !important; display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; background-size: var(--art-size, cover), cover, cover !important; background-position: var(--art-position, center top), center, center !important; overflow: visible !important; transform: none !important; box-shadow: 0 18px 38px rgba(3, 14, 28, 0.44) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview #previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview #previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame { display: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview > .preview-card-outer-frame.preview-card-outer-frame { position: absolute !important; inset: 0 !important; z-index: 96 !important; display: block !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: url("assets/ui/character-card-frame-luminary-soft-blue-v1.png?v=V1.28Beta-preview-card-wrap1") center / 100% 100% no-repeat !important; opacity: 1 !important; filter: drop-shadow(0 6px 14px rgba(6, 18, 34, 0.28)) drop-shadow(0 0 11px rgba(96, 184, 255, 0.2)) !important; pointer-events: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-select-faction="neutral"] > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-select-faction="neutral"] > .preview-card-outer-frame.preview-card-outer-frame { background-image: url("assets/ui/character-card-frame-neutral-soft-pink-silver-v1.png?v=V1.28Beta-preview-card-wrap1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-select-faction="villain"] > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-select-faction="villain"] > .preview-card-outer-frame.preview-card-outer-frame { background-image: url("assets/ui/character-card-frame-villain-blackred-v1.png?v=V1.28Beta-preview-card-wrap1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-character="Desire"] > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-character="Desire"] > .preview-card-outer-frame.preview-card-outer-frame { background-image: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.28Beta-preview-card-wrap1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-copy, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-copy { position: absolute !important; left: 8.8% !important; right: auto !important; bottom: 12.4% !important; z-index: 112 !important; width: min(calc(var(--preview-card-outer-w, 280px) * 0.78), 84%) !important; margin: 0 !important; } } /* V1.28Beta-select-faction-topfix1: restore faction tabs and turn the old hint bar into a left-corner return control. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) { position: relative !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line { position: absolute !important; left: max(12px, env(safe-area-inset-left)) !important; top: max(12px, env(safe-area-inset-top)) !important; right: auto !important; bottom: auto !important; z-index: 28010 !important; display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; opacity: 1 !important; pointer-events: none !important; isolation: isolate !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line::after, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line > #selectRoomText, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line > #selectStatusText, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line > #selectRoomText, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line > #selectStatusText { display: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line > #leaveCharacterSelect.return-lobby, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line > #leaveCharacterSelect.return-lobby { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; z-index: 1 !important; display: inline-grid !important; place-items: center !important; min-width: clamp(102px, 9.8vw, 132px) !important; width: auto !important; height: clamp(34px, 3.5vw, 42px) !important; min-height: 0 !important; margin: 0 !important; padding: 0 clamp(16px, 1.8vw, 22px) !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout > .character-faction-tabs.character-faction-tabs, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout > .character-faction-tabs.character-faction-tabs { position: fixed !important; left: 50% !important; top: max(14px, env(safe-area-inset-top)) !important; right: auto !important; bottom: auto !important; z-index: 28000 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: center !important; width: min(560px, calc(100vw - 300px)) !important; min-width: min(560px, calc(100vw - 300px)) !important; height: clamp(34px, 3.4vw, 40px) !important; margin: 0 !important; padding: 0 !important; gap: clamp(8px, 1vw, 12px) !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) !important; pointer-events: auto !important; clip-path: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout > .character-faction-tabs.character-faction-tabs > button[data-select-faction-tab], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout > .character-faction-tabs.character-faction-tabs > button[data-select-faction-tab] { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 clamp(10px, 1.2vw, 16px) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; white-space: nowrap !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout > .character-faction-tabs.character-faction-tabs, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout > .character-faction-tabs.character-faction-tabs { top: calc(max(12px, env(safe-area-inset-top)) + 48px) !important; width: min(330px, calc(100vw - 24px)) !important; min-width: min(330px, calc(100vw - 24px)) !important; height: 32px !important; gap: 6px !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line > #leaveCharacterSelect.return-lobby, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line > #leaveCharacterSelect.return-lobby { min-width: 92px !important; height: 32px !important; padding: 0 14px !important; font-size: 12px !important; } } @media (min-width: 900px) and (max-width: 1180px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout > .character-faction-tabs.character-faction-tabs, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout > .character-faction-tabs.character-faction-tabs { width: min(520px, calc(100vw - 180px)) !important; min-width: min(520px, calc(100vw - 180px)) !important; top: calc(max(12px, env(safe-area-inset-top)) + 2px) !important; } } /* V1.28Beta-select-namegap1: smaller character names with breathing room from titles on select cards. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; row-gap: clamp(2px, calc(var(--select-card-outer-h, 280px) * 0.012), 4px) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription small, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription small { display: block !important; margin: 0 !important; line-height: 1.02 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong { display: block !important; margin: 0 !important; font-size: clamp(14px, calc(var(--select-card-outer-h, 280px) * 0.064), 21px) !important; line-height: 1.02 !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription { row-gap: clamp(1px, calc(var(--select-card-outer-h, 260px) * 0.01), 3px) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong { font-size: clamp(13px, calc(var(--select-card-outer-h, 260px) * 0.056), 17px) !important; } } /* V1.28Beta-select-namegap2: names step down again; title/name gap becomes visibly separate. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription { row-gap: clamp(4px, calc(var(--select-card-outer-h, 280px) * 0.018), 7px) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong { font-size: clamp(13px, calc(var(--select-card-outer-h, 280px) * 0.056), 18px) !important; line-height: 1.02 !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription { row-gap: clamp(3px, calc(var(--select-card-outer-h, 260px) * 0.014), 5px) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong { font-size: clamp(12px, calc(var(--select-card-outer-h, 260px) * 0.05), 15.5px) !important; } } /* V1.28Beta-select-stagefix1: character select owns the viewport; hidden arena panels cannot reserve rows. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app .arena > [hidden], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app .arena > section[hidden], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app .arena > div[hidden] { display: none !important; visibility: hidden !important; pointer-events: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) { grid-row: 1 / -1 !important; align-self: stretch !important; justify-self: stretch !important; width: 100% !important; max-width: 100% !important; height: 100dvh !important; min-height: 100dvh !important; margin: 0 !important; inset: auto !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app .status-line.character-select-status-portal.character-select-status-portal { position: fixed !important; left: max(12px, env(safe-area-inset-left)) !important; top: max(12px, env(safe-area-inset-top)) !important; right: auto !important; bottom: auto !important; z-index: 2400 !important; display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; overflow: visible !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app .status-line.character-select-status-portal.character-select-status-portal > *:not(#leaveCharacterSelect) { display: none !important; visibility: hidden !important; opacity: 0 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app .status-line.character-select-status-portal.character-select-status-portal > #leaveCharacterSelect.return-lobby.return-lobby { position: relative !important; display: inline-grid !important; place-items: center !important; min-width: 102px !important; width: auto !important; height: 36px !important; padding: 0 18px !important; margin: 0 !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout > .character-faction-tabs.character-faction-tabs { top: max(12px, env(safe-area-inset-top)) !important; transform: translateX(-50%) !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app .status-line.character-select-status-portal.character-select-status-portal > #leaveCharacterSelect.return-lobby.return-lobby { min-width: 90px !important; height: 32px !important; padding: 0 14px !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout > .character-faction-tabs.character-faction-tabs { top: calc(max(12px, env(safe-area-inset-top)) + 42px) !important; } } /* V1.28Beta-preview-card-ratio-lock1: opened cards reuse the thumbnail card/frame proportion. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview.character-preview[hidden], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview.character-preview[hidden] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) { --preview-card-scale: 1.56; --preview-open-card-w: calc(var(--select-card-w) * var(--preview-card-scale)); --preview-open-card-h: calc(var(--select-card-h) * var(--preview-card-scale)); --preview-open-frame-outset-x: clamp(16px, calc(var(--preview-open-card-w) * 0.105), 38px); --preview-open-frame-outset-y: clamp(28px, calc(var(--preview-open-card-h) * 0.105), 68px); position: absolute !important; left: 50% !important; top: 50% !important; z-index: 28000 !important; display: block !important; box-sizing: border-box !important; width: calc(var(--preview-open-card-w) + var(--preview-open-frame-outset-x) * 2) !important; height: calc(var(--preview-open-card-h) + var(--preview-open-frame-outset-y) * 2) !important; min-width: 0 !important; min-height: 0 !important; max-width: calc(100vw - 28px) !important; max-height: calc(100dvh - 28px) !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; transform: translate3d(-50%, -50%, 0) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt.preview-art.preview-art, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt.preview-art.preview-art { position: absolute !important; left: var(--preview-open-frame-outset-x) !important; top: var(--preview-open-frame-outset-y) !important; z-index: 3 !important; display: block !important; box-sizing: border-box !important; width: var(--preview-open-card-w) !important; height: var(--preview-open-card-h) !important; min-width: var(--preview-open-card-w) !important; min-height: var(--preview-open-card-h) !important; max-width: var(--preview-open-card-w) !important; max-height: var(--preview-open-card-h) !important; aspect-ratio: 2.5 / 3.5 !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(246, 200, 95, 0.38) !important; border-radius: 8px !important; background-size: var(--art-size, cover), cover, cover !important; background-position: var(--art-position, center top), center, center !important; overflow: visible !important; box-shadow: inset 0 0 0 1px rgba(255, 246, 208, 0.05), 0 18px 38px rgba(3, 14, 28, 0.44) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) > .preview-card-outer-frame.preview-card-outer-frame { display: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame { position: absolute !important; top: calc(var(--preview-open-frame-outset-y) * -1) !important; right: calc(var(--preview-open-frame-outset-x) * -1) !important; bottom: calc(var(--preview-open-frame-outset-y) * -1) !important; left: calc(var(--preview-open-frame-outset-x) * -1) !important; z-index: 96 !important; display: block !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-preview-card-ratio-lock1") center / 100% 100% no-repeat !important; opacity: 1 !important; filter: drop-shadow(0 5px 12px rgba(8, 24, 42, 0.22)) drop-shadow(0 0 10px rgba(96, 184, 255, 0.18)) !important; pointer-events: none !important; transform: none !important; clip-path: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-select-faction="neutral"] #previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-select-faction="neutral"] #previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame { background-image: url("assets/ui/character-card-frame-neutral-complete-v1.png?v=V1.28Beta-preview-card-ratio-lock1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-select-faction="villain"] #previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-select-faction="villain"] #previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame { background-image: url("assets/ui/character-card-frame-villain-blackred-v1.png?v=V1.28Beta-preview-card-ratio-lock1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"] #previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"] #previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame { background-image: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.28Beta-preview-card-ratio-lock1") !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription { z-index: 110 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-copy.preview-copy, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-copy.preview-copy { position: absolute !important; left: calc(var(--preview-open-frame-outset-x) + var(--preview-open-card-w) * 0.082) !important; right: auto !important; bottom: calc(var(--preview-open-frame-outset-y) + var(--preview-open-card-h) * 0.075) !important; z-index: 112 !important; width: min(calc(var(--preview-open-card-w) * 0.82), calc(var(--preview-open-card-w) - 24px)) !important; margin: 0 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Rhasta"] { --art-size: auto 132% !important; --art-position: center 48% !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Jisoo"] { --art-position: center 20% !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Letmetalk"] { --art-size: auto 112% !important; --art-position: center 18% !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) { --preview-card-scale: 1.5; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Jisoo"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Jisoo"] { --art-position: center 22% !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Letmetalk"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Letmetalk"] { --art-position: center 20% !important; } } /* V1.28Beta-preview-card-ratio-lock2: beat older mobile preview selectors without changing thumbnails. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) { width: calc(var(--preview-open-card-w) + var(--preview-open-frame-outset-x) * 2) !important; height: calc(var(--preview-open-card-h) + var(--preview-open-frame-outset-y) * 2) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art { position: absolute !important; left: var(--preview-open-frame-outset-x) !important; top: var(--preview-open-frame-outset-y) !important; width: var(--preview-open-card-w) !important; height: var(--preview-open-card-h) !important; min-width: var(--preview-open-card-w) !important; min-height: var(--preview-open-card-h) !important; max-width: var(--preview-open-card-w) !important; max-height: var(--preview-open-card-h) !important; aspect-ratio: 2.5 / 3.5 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame { display: block !important; top: calc(var(--preview-open-frame-outset-y) * -1) !important; right: calc(var(--preview-open-frame-outset-x) * -1) !important; bottom: calc(var(--preview-open-frame-outset-y) * -1) !important; left: calc(var(--preview-open-frame-outset-x) * -1) !important; width: auto !important; height: auto !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-copy.preview-copy, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-copy.preview-copy { left: calc(var(--preview-open-frame-outset-x) + var(--preview-open-card-w) * 0.082) !important; bottom: calc(var(--preview-open-frame-outset-y) + var(--preview-open-card-h) * 0.075) !important; width: min(calc(var(--preview-open-card-w) * 0.82), calc(var(--preview-open-card-w) - 24px)) !important; } /* V1.28Beta-preview-card-ratio-lock4: final card/frame ratio lock and thumbnail crop nudge. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) { --preview-card-scale: 1.56; --preview-open-card-w: calc(var(--select-card-w) * var(--preview-card-scale)); --preview-open-card-h: calc(var(--select-card-h) * var(--preview-card-scale)); --preview-open-frame-outset-x: clamp(16px, calc(var(--preview-open-card-w) * 0.105), 38px); --preview-open-frame-outset-y: clamp(28px, calc(var(--preview-open-card-h) * 0.105), 68px); width: calc(var(--preview-open-card-w) + var(--preview-open-frame-outset-x) * 2) !important; height: calc(var(--preview-open-card-h) + var(--preview-open-frame-outset-y) * 2) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art { left: var(--preview-open-frame-outset-x) !important; top: var(--preview-open-frame-outset-y) !important; width: var(--preview-open-card-w) !important; height: var(--preview-open-card-h) !important; min-width: var(--preview-open-card-w) !important; min-height: var(--preview-open-card-h) !important; max-width: var(--preview-open-card-w) !important; max-height: var(--preview-open-card-h) !important; aspect-ratio: 2.5 / 3.5 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame { top: calc(var(--preview-open-frame-outset-y) * -1) !important; right: calc(var(--preview-open-frame-outset-x) * -1) !important; bottom: calc(var(--preview-open-frame-outset-y) * -1) !important; left: calc(var(--preview-open-frame-outset-x) * -1) !important; display: block !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Jisoo"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Jisoo"] { --art-position: center 16% !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Letmetalk"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Letmetalk"] { --art-size: auto 112% !important; --art-position: center 14% !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) { --preview-card-scale: 1.5; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Jisoo"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Jisoo"] { --art-position: center 18% !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Letmetalk"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Letmetalk"] { --art-position: center 16% !important; } }