/* V1.28Beta-job-change3 Job change uses an obsidian / pearl control language, deliberately separate from every profession color. Profession color is reserved for each card's title. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) { --job-obsidian: #10151d; --job-pearl: #fff4d2; --job-steel: #93a2b7; --job-prism-a: #7ce8dc; --job-prism-b: #d7a8ff; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) #previewArt.preview-art { pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewArt#previewArt#previewArt#previewArt#previewArt#previewArt#previewArt#previewArt#previewArt#previewArt#previewArt#previewArt#previewArt#previewArt#previewArt.preview-art > .preview-inscription.preview-inscription.card-inscription { position: absolute !important; left: auto !important; right: 6.8% !important; top: 49.5% !important; bottom: auto !important; z-index: 2147481100 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; width: min(58%, 260px) !important; height: auto !important; gap: 4px !important; padding: 0 !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: translateY(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) .preview-inscription small, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) .preview-inscription strong { display: block !important; width: auto !important; max-width: 100% !important; overflow: hidden !important; text-align: right !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) .preview-inscription small { padding: 6px 12px 6px 14px !important; color: var(--character-title-color, #f2c15a) !important; -webkit-text-fill-color: var(--character-title-color, #f2c15a) !important; font-size: clamp(11px, 1.05vw, 15px) !important; font-weight: 900 !important; line-height: 1 !important; background: linear-gradient(90deg, rgba(6, 8, 13, 0.82), rgba(6, 8, 13, 0.97)) !important; border-right: 3px solid var(--character-title-color, #f2c15a) !important; border-radius: 6px 0 0 6px !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.44) !important; text-shadow: 0 1px 3px #000 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) .preview-inscription strong { color: #fff7dc !important; -webkit-text-fill-color: #fff7dc !important; font-size: clamp(28px, 2.45vw, 42px) !important; font-weight: 950 !important; line-height: .96 !important; text-shadow: 0 3px 6px rgba(0, 0, 0, .96), 0 0 16px rgba(0, 0, 0, .55) !important; } /* The art inscription is the canonical big-card name block, matching thumbnails. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) .preview-copy > #previewTitle, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) .preview-copy > #previewName { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) #previewJobButton.preview-job-button { position: absolute !important; right: 1.5% !important; top: clamp(-50px, -5.8dvh, -34px) !important; z-index: 2147481250 !important; display: grid !important; grid-template-columns: auto !important; gap: 1px !important; min-width: clamp(96px, 8.5vw, 126px) !important; min-height: 42px !important; padding: 7px 15px 6px !important; overflow: visible !important; color: var(--job-pearl) !important; background: linear-gradient(112deg, rgba(124, 232, 220, .11), transparent 36%, rgba(215, 168, 255, .12)), linear-gradient(180deg, #1a222d, var(--job-obsidian)) !important; border: 1px solid rgba(222, 230, 239, .58) !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1px rgba(10, 13, 18, .88) !important; isolation: isolate !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) #previewJobButton.preview-job-button::before { content: "" !important; position: absolute !important; inset: -2px !important; z-index: -1 !important; border-radius: 12px !important; background: linear-gradient(120deg, var(--job-prism-a), rgba(255, 244, 210, .78) 45%, var(--job-prism-b)) !important; opacity: .52 !important; filter: blur(.2px) !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button > span { font-size: 15px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: .18em !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button > small { max-width: 112px !important; overflow: hidden !important; color: var(--job-steel) !important; font-size: 10px !important; font-weight: 760 !important; line-height: 1.1 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button:hover:not(:disabled), html body:not(.maintenance-mode) #previewJobButton.preview-job-button.open { translate: 0 -2px !important; background: linear-gradient(112deg, rgba(124, 232, 220, .18), transparent 36%, rgba(215, 168, 255, .2)), linear-gradient(180deg, #253141, #121821) !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button:disabled { cursor: default !important; filter: saturate(.55) !important; opacity: .72 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) #previewJobShelf.preview-job-shelf:not([hidden]) { position: absolute !important; left: 50% !important; bottom: calc(100% + clamp(54px, 7.1dvh, 78px)) !important; z-index: 2147481240 !important; display: flex !important; justify-content: center !important; width: min(78vw, 780px) !important; max-width: calc(100vw - 40px) !important; gap: 10px !important; padding: 12px !important; overflow-x: auto !important; overflow-y: hidden !important; background: linear-gradient(100deg, rgba(124, 232, 220, .075), transparent 40%, rgba(215, 168, 255, .08)), rgba(10, 14, 20, .91) !important; border: 1px solid rgba(201, 212, 225, .34) !important; border-radius: 16px !important; box-shadow: 0 18px 48px rgba(0, 0, 0, .56), inset 0 0 26px rgba(255, 255, 255, .025) !important; backdrop-filter: blur(14px) !important; transform: translateX(-50%) !important; scrollbar-width: thin !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #previewJobShelf.preview-job-shelf[hidden] { display: none !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card { position: relative !important; flex: 0 0 clamp(164px, 14vw, 206px) !important; display: grid !important; grid-template-columns: 43% 1fr !important; align-items: stretch !important; min-height: 102px !important; padding: 0 !important; overflow: hidden !important; color: #f6f1e7 !important; background: linear-gradient(145deg, rgba(34, 43, 56, .97), rgba(12, 17, 24, .98)) !important; border: 1px solid rgba(170, 183, 198, .38) !important; border-radius: 12px !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .35) !important; text-align: left !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card.selected { border-color: var(--job-pearl) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--job-prism-a) 40%, transparent), 0 9px 24px rgba(0, 0, 0, .48), inset 0 0 18px color-mix(in srgb, var(--character-title-color, #f2c15a) 10%, transparent) !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card-art { display: block !important; min-width: 0 !important; min-height: 100% !important; background-color: #10151d !important; background-image: var(--character-art), linear-gradient(180deg, #202b39, #0e141c) !important; background-size: cover, cover, cover !important; background-position: center 24%, center, center !important; border-right: 1px solid rgba(255, 255, 255, .1) !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card > span { display: flex !important; flex-direction: column !important; justify-content: center !important; min-width: 0 !important; gap: 4px !important; padding: 10px 9px !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card small { overflow: hidden !important; color: var(--character-title-color, #f2c15a) !important; font-size: 10px !important; font-weight: 850 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card strong { overflow: hidden !important; color: #fff7dc !important; font-size: 14px !important; font-weight: 950 !important; line-height: 1.08 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card em { display: -webkit-box !important; overflow: hidden !important; color: #aab6c6 !important; font-size: 10px !important; font-style: normal !important; font-weight: 700 !important; line-height: 1.25 !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card:hover:not(:disabled) { translate: 0 -3px !important; border-color: rgba(255, 244, 210, .75) !important; } html body:not(.maintenance-mode) .character-option.job-changed > span { box-shadow: inset 0 0 22px color-mix(in srgb, var(--character-title-color, #f2c15a) 12%, transparent) !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) .preview-inscription { right: 7.4% !important; top: 45.5% !important; width: min(62%, 220px) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) .preview-inscription small { padding: 4px 8px 4px 10px !important; font-size: clamp(9px, 2.7dvw, 12px) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) .preview-inscription strong { font-size: clamp(23px, 7vw, 32px) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) #previewJobButton.preview-job-button { right: 2% !important; top: clamp(-43px, -10.5vw, -32px) !important; min-width: 86px !important; min-height: 37px !important; padding: 6px 10px 5px !important; border-radius: 9px !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button > span { font-size: 13px !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button > small { max-width: 84px !important; font-size: 8px !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) #previewJobShelf.preview-job-shelf:not([hidden]) { bottom: calc(100% + clamp(43px, 12vw, 60px)) !important; width: min(92vw, 540px) !important; max-width: calc(100vw - 18px) !important; justify-content: flex-start !important; gap: 7px !important; padding: 8px !important; border-radius: 13px !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card { flex-basis: 144px !important; min-height: 84px !important; grid-template-columns: 42% 1fr !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card > span { gap: 3px !important; padding: 7px 6px !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card strong { font-size: 12px !important; } } /* V1.28Beta-job-change-ritual1 The job selector is a body-level modal so transformed character cards can never trap it underneath the preview. Selection is staged, then confirmed. */ html body:not(.maintenance-mode).preview-job-dialog-open { overflow: hidden !important; } html body:not(.maintenance-mode) > #previewJobDialog.preview-job-dialog[hidden] { display: none !important; } html body:not(.maintenance-mode) > #previewJobDialog.preview-job-dialog:not([hidden]) { box-sizing: border-box !important; position: fixed !important; inset: 0 !important; z-index: 2147483640 !important; display: grid !important; place-items: center !important; width: 100vw !important; height: 100dvh !important; padding: clamp(12px, 2.4vw, 30px) !important; overflow: hidden !important; isolation: isolate !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-backdrop { position: absolute !important; inset: 0 !important; z-index: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: linear-gradient(180deg, rgba(8, 21, 35, .66), rgba(4, 13, 24, .86)), rgba(5, 15, 27, .72) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: blur(10px) saturate(.82) !important; cursor: default !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual { --ritual-ink: #153752; --ritual-muted: #647f92; --ritual-ice: #dff3fb; --ritual-ice-deep: #91cde5; --ritual-ivory: #fffdf8; --ritual-gold: #d8bd78; --ritual-gold-deep: #98722d; box-sizing: border-box !important; position: relative !important; z-index: 2 !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; width: min(940px, calc(100vw - 36px)) !important; max-width: calc(100vw - 36px) !important; max-height: min(820px, calc(100dvh - 36px)) !important; overflow: hidden !important; color: var(--ritual-ink) !important; background: linear-gradient(135deg, rgba(223, 243, 251, .46), transparent 24%, rgba(216, 189, 120, .16) 76%, transparent), linear-gradient(180deg, #fffefb, #edf8fb 56%, #f9f6eb) !important; border: 1px solid rgba(215, 187, 116, .95) !important; border-radius: 8px !important; box-shadow: 0 30px 80px rgba(0, 9, 19, .62), 0 0 0 2px rgba(255, 255, 255, .92), 0 0 0 4px rgba(116, 183, 211, .38), inset 0 0 0 1px rgba(255, 255, 255, .94) !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual::before { content: "" !important; position: absolute !important; inset: 74px 0 70px !important; z-index: 0 !important; background: linear-gradient(90deg, transparent, rgba(111, 191, 224, .16) 50%, transparent), repeating-linear-gradient(90deg, transparent 0 11.8%, rgba(196, 157, 75, .09) 12%, transparent 12.2%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-head { position: relative !important; z-index: 2 !important; display: grid !important; grid-template-columns: 54px minmax(0, 1fr) 42px !important; align-items: center !important; min-height: 78px !important; gap: 14px !important; padding: 12px 18px !important; background: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(229, 245, 251, .98)) !important; border-bottom: 1px solid rgba(190, 154, 76, .52) !important; box-shadow: inset 0 -3px 0 rgba(124, 194, 222, .16) !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-sigil { position: relative !important; display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; border: 1px solid rgba(151, 111, 40, .88) !important; background: linear-gradient(135deg, #ffffff 0 28%, #a8dff1 29% 58%, #f8e8b4 59% 100%) !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 4px rgba(112, 184, 214, .5), 0 6px 14px rgba(28, 77, 103, .2) !important; transform: rotate(45deg) !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-sigil > i { display: block !important; width: 15px !important; height: 15px !important; border: 1px solid rgba(137, 98, 31, .88) !important; background: #effaff !important; box-shadow: inset 0 0 0 4px #69bddd, 0 0 9px rgba(83, 183, 220, .72) !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading { display: grid !important; min-width: 0 !important; gap: 2px !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading small, html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading strong, html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading span { display: block !important; width: 100% !important; margin: 0 !important; overflow: hidden !important; letter-spacing: 0 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading small { color: var(--ritual-gold-deep) !important; font-size: 11px !important; font-weight: 900 !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading strong { color: var(--ritual-ink) !important; font-size: clamp(20px, 2.2vw, 29px) !important; font-weight: 950 !important; line-height: 1.06 !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading span { color: var(--ritual-muted) !important; font-size: 12px !important; font-weight: 760 !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-close { display: grid !important; place-items: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 0 2px !important; color: #31536a !important; background: linear-gradient(180deg, #fff, #e4f3f8) !important; border: 1px solid rgba(126, 177, 199, .88) !important; border-radius: 6px !important; box-shadow: inset 0 0 0 1px #fff, 0 4px 9px rgba(31, 73, 96, .16) !important; font-size: 25px !important; font-weight: 500 !important; line-height: 1 !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-close:hover { color: #173a54 !important; border-color: rgba(167, 126, 43, .85) !important; translate: 0 -1px !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-stage { position: relative !important; z-index: 1 !important; min-height: 0 !important; padding: clamp(16px, 2.4vw, 26px) !important; overflow: auto !important; background: linear-gradient(180deg, rgba(235, 248, 252, .88), rgba(255, 253, 246, .9)) !important; scrollbar-width: thin !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf#previewJobShelf.preview-job-shelf:not([hidden]) { position: relative !important; inset: auto !important; z-index: 1 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: stretch !important; width: min(760px, 100%) !important; max-width: 100% !important; max-height: none !important; gap: clamp(12px, 2vw, 20px) !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; transform: none !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card { box-sizing: border-box !important; position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(250px, 46dvh) auto !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; max-height: 590px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; color: var(--ritual-ink) !important; background: linear-gradient(180deg, #ffffff, #e8f5fa) !important; border: 1px solid rgba(119, 178, 202, .72) !important; border-radius: 7px !important; box-shadow: 0 12px 28px rgba(30, 71, 93, .18), inset 0 0 0 1px rgba(255, 255, 255, .96) !important; transform: none !important; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card:hover:not(:disabled) { z-index: 3 !important; translate: 0 -3px !important; transform: none !important; border-color: rgba(174, 132, 47, .86) !important; box-shadow: 0 16px 34px rgba(30, 71, 93, .24), 0 0 0 2px rgba(255, 255, 255, .94), 0 0 0 3px rgba(211, 181, 108, .42) !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card.selected { z-index: 2 !important; translate: 0 0 !important; transform: none !important; filter: saturate(1.04) brightness(1.015) !important; border-color: rgba(169, 126, 39, .96) !important; box-shadow: 0 15px 34px rgba(29, 73, 97, .25), 0 0 0 2px rgba(255, 255, 255, .96), 0 0 0 4px rgba(215, 185, 112, .72), inset 0 0 24px rgba(109, 193, 225, .11) !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card.selected::after { content: "✓" !important; top: 8px !important; right: 8px !important; width: 24px !important; height: 24px !important; color: #fff !important; background: #67b9d9 !important; border: 1px solid rgba(151, 109, 31, .9) !important; border-radius: 50% !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 4px 10px rgba(21, 62, 83, .28) !important; font-size: 14px !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card-art.preview-job-card-art { min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; background-color: #d9eef7 !important; background-image: var(--character-art), linear-gradient(180deg, #eef9fc, #cbe7f2) !important; background-size: contain, cover !important; background-position: center, center !important; background-repeat: no-repeat, no-repeat !important; border: 0 !important; border-bottom: 1px solid rgba(169, 137, 67, .42) !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card > span { box-sizing: border-box !important; display: grid !important; place-content: center !important; min-height: 76px !important; gap: 3px !important; padding: 10px 12px 11px !important; text-align: center !important; background: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(231, 245, 250, .98)) !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card > span small, html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card > span strong, html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card > span em { width: 100% !important; margin: 0 !important; overflow: hidden !important; letter-spacing: 0 !important; text-align: center !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card > span small { color: var(--ritual-gold-deep) !important; -webkit-text-fill-color: var(--ritual-gold-deep) !important; font-size: 10px !important; font-weight: 900 !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card > span strong { color: var(--ritual-ink) !important; -webkit-text-fill-color: var(--ritual-ink) !important; font-size: clamp(17px, 2vw, 22px) !important; font-weight: 950 !important; line-height: 1.05 !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card > span em { display: block !important; color: var(--ritual-muted) !important; -webkit-text-fill-color: var(--ritual-muted) !important; font-size: 10px !important; font-style: normal !important; font-weight: 760 !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-foot { position: relative !important; z-index: 2 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; min-height: 72px !important; gap: 18px !important; padding: 11px 18px !important; background: linear-gradient(180deg, rgba(255, 254, 249, .99), rgba(235, 247, 250, .99)) !important; border-top: 1px solid rgba(190, 154, 76, .52) !important; box-shadow: inset 0 3px 0 rgba(125, 194, 222, .14) !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-selection-copy { display: grid !important; min-width: 0 !important; gap: 2px !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-selection-copy small { color: var(--ritual-muted) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-selection-copy strong { overflow: hidden !important; color: var(--ritual-ink) !important; font-size: clamp(15px, 1.8vw, 20px) !important; font-weight: 950 !important; letter-spacing: 0 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-confirm { box-sizing: border-box !important; display: grid !important; place-items: center !important; min-width: 174px !important; min-height: 46px !important; margin: 0 !important; padding: 10px 20px !important; color: #fffdf4 !important; background: linear-gradient(180deg, #245978, #123a57) !important; border: 1px solid rgba(194, 157, 77, .96) !important; border-radius: 7px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 6px 14px rgba(20, 59, 82, .25) !important; font-size: 14px !important; font-weight: 950 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-confirm:hover:not(:disabled) { translate: 0 -2px !important; background: linear-gradient(180deg, #2d6b8e, #174763) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 9px 18px rgba(20, 59, 82, .3), 0 0 0 2px rgba(255, 255, 255, .84), 0 0 0 3px rgba(210, 177, 101, .52) !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-confirm:disabled { color: #6b8290 !important; background: linear-gradient(180deg, #e8f3f6, #d2e5eb) !important; border-color: rgba(131, 172, 190, .68) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8) !important; cursor: default !important; opacity: 1 !important; } @media (prefers-reduced-motion: no-preference) { html body:not(.maintenance-mode) > #previewJobDialog.preview-job-dialog:not([hidden]) .preview-job-backdrop { animation: preview-job-backdrop-in 180ms ease-out both !important; } html body:not(.maintenance-mode) > #previewJobDialog.preview-job-dialog:not([hidden]) .preview-job-ritual { animation: preview-job-ritual-in 280ms cubic-bezier(.18, .8, .26, 1) both !important; } html body:not(.maintenance-mode) > #previewJobDialog.preview-job-dialog:not([hidden]) .preview-job-sigil { animation: preview-job-sigil-pulse 2.4s ease-in-out infinite !important; } } @keyframes preview-job-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes preview-job-ritual-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes preview-job-sigil-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 4px rgba(112, 184, 214, .5), 0 6px 14px rgba(28, 77, 103, .2); } 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .96), 0 0 0 5px rgba(213, 179, 99, .62), 0 0 18px rgba(83, 183, 220, .46); } } @media (max-width: 899px) { html body:not(.maintenance-mode) > #previewJobDialog.preview-job-dialog:not([hidden]) { padding: 8px !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-head { grid-template-columns: 40px minmax(0, 1fr) 34px !important; min-height: 64px !important; gap: 9px !important; padding: 8px 10px !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-sigil { width: 31px !important; height: 31px !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-sigil > i { width: 10px !important; height: 10px !important; box-shadow: inset 0 0 0 3px #69bddd, 0 0 6px rgba(83, 183, 220, .68) !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading small { font-size: 9px !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading strong { font-size: clamp(17px, 5.4vw, 21px) !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading span { font-size: 10px !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-close { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; font-size: 21px !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-stage { padding: 10px !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf#previewJobShelf.preview-job-shelf:not([hidden]) { width: 100% !important; gap: 8px !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card { grid-template-rows: minmax(172px, 31dvh) auto !important; max-height: none !important; border-radius: 6px !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card > span { min-height: 58px !important; gap: 2px !important; padding: 7px 5px 8px !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card > span small { font-size: 8px !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card > span strong { font-size: clamp(14px, 4.2vw, 18px) !important; } html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card > span em { font-size: 8px !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-foot { min-height: 62px !important; gap: 8px !important; padding: 8px 10px !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-selection-copy small { font-size: 8px !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-selection-copy strong { font-size: clamp(13px, 4.1vw, 17px) !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-confirm { min-width: 128px !important; min-height: 40px !important; padding: 8px 11px !important; font-size: 12px !important; } } @media (max-width: 380px), (max-height: 700px) { html body:not(.maintenance-mode) > #previewJobDialog #previewJobShelf .preview-job-card.preview-job-card { grid-template-rows: minmax(138px, 27dvh) auto !important; } html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading small, html body:not(.maintenance-mode) > #previewJobDialog .preview-job-selection-copy small { display: none !important; } } /* V1.28Beta-account2: functional player account entry and porcelain account dialog. */ html body:not(.maintenance-mode) { --account-ink: #123452; --account-muted: #5f7890; --account-ice: #dff4ff; --account-gold: #b88b3d; --account-gold-light: #f2d995; } html body:not(.maintenance-mode) #appRoot.app .topbar .account-pill { box-sizing: border-box !important; position: fixed !important; top: clamp(18px, 2.4vh, 30px) !important; right: clamp(18px, 2.4vw, 34px) !important; left: auto !important; z-index: 64 !important; display: grid !important; grid-template-columns: 34px minmax(0, 1fr) 12px !important; align-items: center !important; gap: 9px !important; width: auto !important; min-width: 154px !important; max-width: min(220px, calc(100vw - 36px)) !important; height: 46px !important; margin: 0 !important; padding: 5px 9px 5px 6px !important; color: var(--account-ink) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(226, 242, 251, .96)) !important; border: 1px solid rgba(184, 139, 61, .72) !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(20, 54, 82, .22), inset 0 0 0 1px rgba(255, 255, 255, .92) !important; text-align: left !important; cursor: pointer !important; pointer-events: auto !important; backdrop-filter: blur(10px) saturate(1.05) !important; -webkit-backdrop-filter: blur(10px) saturate(1.05) !important; transition: translate .16s ease, box-shadow .16s ease, border-color .16s ease !important; } html body:not(.maintenance-mode) #appRoot.app .topbar .account-pill:hover, html body:not(.maintenance-mode) #appRoot.app .topbar .account-pill:focus-visible { translate: 0 -1px !important; border-color: rgba(157, 112, 34, .96) !important; box-shadow: 0 10px 28px rgba(20, 54, 82, .28), inset 0 0 0 1px rgba(255, 255, 255, 1), 0 0 0 3px rgba(133, 205, 236, .18) !important; outline: none !important; } html body:not(.maintenance-mode) #appRoot.app .topbar .account-avatar, html body:not(.maintenance-mode) .account-dialog-avatar { display: grid !important; place-items: center !important; width: 34px !important; height: 34px !important; color: #fffdf5 !important; background: linear-gradient(145deg, #174f76, #2b83aa) !important; border: 1px solid rgba(225, 190, 106, .9) !important; border-radius: 50% !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 2px 8px rgba(17, 58, 88, .2) !important; font-size: 13px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) #appRoot.app .topbar .account-pill[data-authenticated="true"] .account-avatar, html body:not(.maintenance-mode) .account-dialog-avatar { color: #173854 !important; background: linear-gradient(145deg, #fff9df, #e5bd63) !important; border-color: rgba(137, 94, 26, .72) !important; } html body:not(.maintenance-mode) #appRoot.app .topbar .account-pill-copy { display: grid !important; min-width: 0 !important; gap: 2px !important; } html body:not(.maintenance-mode) #appRoot.app .topbar .account-pill-copy > small { overflow: hidden !important; color: var(--account-muted) !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app .topbar .account-pill-copy > strong { overflow: hidden !important; max-width: 142px !important; color: var(--account-ink) !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app .topbar .account-chevron { color: #9b742f !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1 !important; transform: translateY(-1px) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo) .account-pill, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .account-pill, html body:not(.maintenance-mode) #appRoot.app.character-select-app .account-pill, html body:not(.maintenance-mode) #appRoot.app.identity-select-app .account-pill, html body:not(.maintenance-mode) #appRoot.app.battle-app .account-pill { display: none !important; } html body.account-dialog-open { overflow: hidden !important; } html body:not(.maintenance-mode) .account-dialog { position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; display: grid !important; place-items: center !important; padding: 18px !important; background: rgba(7, 24, 42, .58) !important; backdrop-filter: blur(10px) saturate(.9) !important; -webkit-backdrop-filter: blur(10px) saturate(.9) !important; } html body:not(.maintenance-mode) .account-dialog[hidden] { display: none !important; } html body:not(.maintenance-mode) .account-dialog-shell { position: relative !important; box-sizing: border-box !important; width: min(420px, calc(100vw - 28px)) !important; max-height: calc(100dvh - 28px) !important; padding: 26px 26px 22px !important; overflow: auto !important; color: var(--account-ink) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(230, 243, 251, .99)) !important; border: 1px solid rgba(174, 130, 48, .82) !important; border-radius: 8px !important; box-shadow: 0 28px 80px rgba(4, 20, 35, .48), inset 0 0 0 1px rgba(255, 255, 255, .96) !important; outline: none !important; } html body:not(.maintenance-mode) .account-dialog-shell::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #d7ad55, #94d9f3 45%, #fff6cf 70%, #c89a41) !important; pointer-events: none !important; } html body:not(.maintenance-mode) .account-dialog-heading { display: flex !important; align-items: center !important; gap: 12px !important; padding-right: 38px !important; } html body:not(.maintenance-mode) .account-dialog-avatar { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; font-size: 15px !important; } html body:not(.maintenance-mode) .account-close { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 2 !important; display: grid !important; place-items: center !important; width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; color: #49667f !important; background: rgba(255, 255, 255, .76) !important; border: 1px solid rgba(107, 148, 178, .42) !important; border-radius: 50% !important; box-shadow: none !important; font-size: 20px !important; line-height: 1 !important; cursor: pointer !important; } html body:not(.maintenance-mode) .account-close:hover, html body:not(.maintenance-mode) .account-close:focus-visible { color: #173854 !important; border-color: rgba(174, 130, 48, .76) !important; outline: none !important; } html body:not(.maintenance-mode) .account-kicker { display: block !important; color: #7f632f !important; font-size: 10px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) .account-dialog h2 { margin: 5px 0 0 !important; color: var(--account-ink) !important; font-size: 24px !important; line-height: 1.08 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) .account-dialog p { margin: 14px 0 18px !important; color: var(--account-muted) !important; font-size: 12px !important; line-height: 1.45 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) .account-fields { display: grid !important; gap: 12px !important; } html body:not(.maintenance-mode) .account-fields[hidden] { display: none !important; } html body:not(.maintenance-mode) .account-fields label { display: grid !important; gap: 6px !important; color: #36546d !important; font-size: 11px !important; font-weight: 850 !important; line-height: 1.1 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) .account-fields input { box-sizing: border-box !important; width: 100% !important; min-height: 46px !important; padding: 0 13px !important; color: #102f49 !important; background: rgba(255, 255, 255, .9) !important; border: 1px solid rgba(110, 156, 187, .5) !important; border-radius: 6px !important; box-shadow: inset 0 1px 2px rgba(16, 54, 80, .06) !important; outline: none !important; font-size: 14px !important; } html body:not(.maintenance-mode) .account-fields input::placeholder { color: #8ba0b2 !important; } html body:not(.maintenance-mode) .account-fields input:focus { border-color: rgba(174, 130, 48, .82) !important; box-shadow: inset 0 1px 2px rgba(16, 54, 80, .05), 0 0 0 3px rgba(120, 197, 230, .2) !important; } html body:not(.maintenance-mode) .account-actions { display: flex !important; flex-direction: row !important; gap: 10px !important; margin-top: 18px !important; } html body:not(.maintenance-mode) .account-actions button { flex: 1 1 0 !important; min-width: 0 !important; min-height: 44px !important; padding: 8px 12px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: 0 !important; cursor: pointer !important; } html body:not(.maintenance-mode) .account-actions .account-primary { color: #fffdf4 !important; background: linear-gradient(180deg, #296f9a, #17486e) !important; border: 1px solid rgba(170, 127, 48, .88) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 5px 12px rgba(23, 72, 110, .18) !important; } html body:not(.maintenance-mode) .account-actions .account-secondary { color: #234964 !important; background: rgba(255, 255, 255, .82) !important; border: 1px solid rgba(104, 157, 190, .62) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72) !important; } html body:not(.maintenance-mode) .account-actions #accountLogout { color: #6d3440 !important; background: rgba(255, 249, 248, .9) !important; border: 1px solid rgba(170, 105, 112, .48) !important; } html body:not(.maintenance-mode) .account-actions button:hover, html body:not(.maintenance-mode) .account-actions button:focus-visible { filter: brightness(1.04) !important; translate: 0 -1px !important; outline: none !important; } html body:not(.maintenance-mode) .account-actions button:disabled { opacity: .58 !important; cursor: wait !important; translate: none !important; } html body:not(.maintenance-mode) .account-actions button[hidden] { display: none !important; } html body:not(.maintenance-mode) .account-status { display: flex !important; align-items: flex-start !important; gap: 7px !important; margin-top: 14px !important; color: #657d91 !important; font-size: 10px !important; line-height: 1.35 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) .account-status::before { content: "" !important; flex: 0 0 7px !important; width: 7px !important; height: 7px !important; margin-top: 3px !important; background: #74b8d6 !important; border: 1px solid rgba(40, 105, 137, .36) !important; border-radius: 50% !important; } html body:not(.maintenance-mode) .account-status[data-state="synced"]::before { background: #5db88d !important; border-color: rgba(42, 114, 78, .45) !important; } html body:not(.maintenance-mode) .account-status[data-state="busy"]::before { background: #d7ad55 !important; } html body:not(.maintenance-mode) .account-status[data-state="error"] { color: #8a3b48 !important; } html body:not(.maintenance-mode) .account-status[data-state="error"]::before { background: #c75d6d !important; border-color: rgba(119, 38, 53, .45) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app .topbar .account-pill { top: 74px !important; right: 14px !important; grid-template-columns: 28px minmax(0, 1fr) !important; gap: 7px !important; min-width: 112px !important; max-width: 132px !important; height: 38px !important; padding: 4px 8px 4px 4px !important; } html body:not(.maintenance-mode) #appRoot.app .topbar .account-avatar { width: 28px !important; height: 28px !important; font-size: 11px !important; } html body:not(.maintenance-mode) #appRoot.app .topbar .account-pill-copy > small { font-size: 8px !important; } html body:not(.maintenance-mode) #appRoot.app .topbar .account-pill-copy > strong { font-size: 10px !important; } html body:not(.maintenance-mode) #appRoot.app .topbar .account-chevron { display: none !important; } html body:not(.maintenance-mode) .account-dialog { padding: 10px !important; } html body:not(.maintenance-mode) .account-dialog-shell { width: min(420px, calc(100vw - 20px)) !important; padding: 22px 18px 18px !important; } html body:not(.maintenance-mode) .account-dialog h2 { font-size: 21px !important; } html body:not(.maintenance-mode) .account-actions { flex-direction: row !important; gap: 8px !important; } html body:not(.maintenance-mode) .account-actions button { padding-inline: 8px !important; font-size: 12px !important; } } /* The thumbnail stack has legacy high-specificity relative positioning rules. Keep this compact control pinned to the artwork instead of letting it enter the skill-label flow. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.has-job-change:not(.placeholder) > span > b.job-change-tip.job-change-tip { position: absolute !important; top: 11.5% !important; right: auto !important; bottom: auto !important; left: 7.5% !important; margin: 0 !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.has-job-change:not(.placeholder) > span > b.job-change-tip.job-change-tip > span { position: static !important; display: inline !important; flex: 0 0 auto !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; overflow: visible !important; color: var(--job-clean-ink) !important; -webkit-text-fill-color: var(--job-clean-ink) !important; background: none !important; border: 0 !important; opacity: 1 !important; visibility: visible !important; clip: auto !important; clip-path: none !important; transform: none !important; translate: none !important; font: inherit !important; line-height: 1 !important; letter-spacing: 0 !important; text-indent: 0 !important; text-shadow: none !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #characterSelect.character-select .character-option.has-job-change .job-change-tip.active > span { color: #6f501d !important; -webkit-text-fill-color: #6f501d !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.has-job-change:not(.placeholder) > span > b.job-change-tip.job-change-tip { top: 11% !important; left: 7% !important; } } @media (prefers-reduced-motion: no-preference) { html body:not(.maintenance-mode) #previewJobButton.preview-job-button, html body:not(.maintenance-mode) #previewJobShelf .preview-job-card { transition: translate 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button.active::before { animation: job-change-prism 2.8s ease-in-out infinite alternate !important; } } @keyframes job-change-prism { from { opacity: .38; filter: hue-rotate(0deg); } to { opacity: .72; filter: hue-rotate(24deg); } } /* V1.28Beta-job-change9 Character-select job controls use the same porcelain, ice-blue and pale-gold language as the card frame, skill plate and lock control. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select { --job-clean-ink: #173b57; --job-clean-muted: #607b8e; --job-clean-ivory: #fffdf7; --job-clean-ice: #e7f5fb; --job-clean-blue: #87c9e6; --job-clean-gold: #d2b36d; --job-clean-gold-deep: #9a7430; } html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview.character-preview:not([hidden]) #previewJobButton.preview-job-button { box-sizing: border-box !important; grid-template-columns: 1fr !important; place-items: center !important; gap: 2px !important; min-width: 112px !important; min-height: 42px !important; padding: 6px 13px 5px 25px !important; color: var(--job-clean-ink) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(248, 253, 254, .98) 42%, rgba(226, 242, 248, .98)) !important; border: 1px solid rgba(121, 181, 209, .96) !important; border-radius: 7px !important; box-shadow: 0 5px 12px rgba(25, 67, 94, .2), inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 -2px 0 rgba(210, 179, 109, .2) !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select #previewJobButton.preview-job-button::before { content: "" !important; position: absolute !important; inset: auto auto 50% 11px !important; z-index: 1 !important; width: 8px !important; height: 8px !important; border: 1px solid rgba(159, 117, 41, .92) !important; border-radius: 1px !important; background: linear-gradient(135deg, #e8fbff, #62c4e7) !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .82), 0 0 7px rgba(83, 181, 219, .48) !important; opacity: 1 !important; filter: none !important; transform: translateY(50%) rotate(45deg) !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button > span { color: var(--job-clean-ink) !important; -webkit-text-fill-color: var(--job-clean-ink) !important; font-size: 14px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: none !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button > small { max-width: 92px !important; color: var(--job-clean-muted) !important; -webkit-text-fill-color: var(--job-clean-muted) !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: none !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button:hover:not(:disabled), html body:not(.maintenance-mode) #previewJobButton.preview-job-button.open { translate: 0 -1px !important; color: #102f49 !important; background: linear-gradient(180deg, #ffffff, #f2fbfe 42%, #d8eef7) !important; border-color: rgba(173, 133, 56, .85) !important; box-shadow: 0 7px 15px rgba(25, 67, 94, .24), 0 0 0 2px rgba(255, 255, 255, .88), 0 0 0 3px rgba(210, 179, 109, .45) !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button.active { background: linear-gradient(180deg, #fffef9, #fff9e9 48%, #e7f3f5) !important; border-color: rgba(184, 143, 59, .92) !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button.active::before { background: linear-gradient(135deg, #fff8d5, #e4b94c) !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .88), 0 0 8px rgba(205, 160, 55, .45) !important; animation: none !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button:disabled { filter: grayscale(.08) !important; opacity: .68 !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview.character-preview:not([hidden]) #previewJobShelf.preview-job-shelf:not([hidden]) { width: max-content !important; min-width: 0 !important; max-width: calc(100vw - 40px) !important; padding: 9px !important; gap: 8px !important; background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(236, 247, 251, .97)) !important; border: 1px solid rgba(132, 188, 213, .92) !important; border-radius: 8px !important; box-shadow: 0 14px 34px rgba(18, 54, 79, .28), inset 0 0 0 1px rgba(255, 255, 255, .92), 0 0 0 2px rgba(210, 179, 109, .24) !important; backdrop-filter: blur(8px) !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card { min-height: 98px !important; color: var(--job-clean-ink) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(231, 244, 249, .98)) !important; border: 1px solid rgba(133, 181, 204, .68) !important; border-radius: 6px !important; box-shadow: 0 4px 10px rgba(31, 68, 91, .14), inset 0 0 0 1px rgba(255, 255, 255, .9) !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card.selected { border-color: rgba(179, 136, 49, .9) !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 0 3px rgba(210, 179, 109, .55), 0 5px 12px rgba(31, 68, 91, .17) !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card.selected::after { content: "✓" !important; position: absolute !important; top: 5px !important; right: 6px !important; display: grid !important; place-items: center !important; width: 17px !important; height: 17px !important; color: #fff !important; background: #6bb8d8 !important; border: 1px solid rgba(151, 111, 35, .85) !important; border-radius: 50% !important; box-shadow: 0 2px 5px rgba(28, 68, 92, .22) !important; font-size: 11px !important; font-style: normal !important; font-weight: 950 !important; line-height: 1 !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card-art { background-color: #dbeef5 !important; background-image: var(--character-art), linear-gradient(180deg, #edf8fb, #c8e2ed) !important; border-right: 1px solid rgba(137, 184, 205, .65) !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card small { color: var(--job-clean-gold-deep) !important; -webkit-text-fill-color: var(--job-clean-gold-deep) !important; letter-spacing: 0 !important; text-shadow: none !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card strong { color: var(--job-clean-ink) !important; -webkit-text-fill-color: var(--job-clean-ink) !important; letter-spacing: 0 !important; text-shadow: none !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card em { color: var(--job-clean-muted) !important; -webkit-text-fill-color: var(--job-clean-muted) !important; letter-spacing: 0 !important; text-shadow: none !important; } html body:not(.maintenance-mode) #previewJobShelf .preview-job-card:hover:not(:disabled) { translate: 0 -2px !important; border-color: rgba(176, 133, 48, .84) !important; background: linear-gradient(180deg, #fff, #e7f5fa) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.has-job-change:not(.placeholder) > span > .job-change-tip { position: absolute !important; top: 11.5% !important; left: 7.5% !important; z-index: 2147480800 !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 56px !important; height: 22px !important; gap: 6px !important; padding: 0 7px 0 6px !important; overflow: hidden !important; color: var(--job-clean-ink) !important; -webkit-text-fill-color: var(--job-clean-ink) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(226, 242, 248, .98)) !important; border: 1px solid rgba(118, 180, 208, .94) !important; border-radius: 5px !important; box-shadow: 0 3px 8px rgba(18, 54, 79, .22), inset 0 0 0 1px rgba(255, 255, 255, .92) !important; font-size: 10px !important; font-style: normal !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: none !important; cursor: pointer !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #characterSelect.character-select .character-option.has-job-change .job-change-tip::before { content: "" !important; flex: 0 0 7px !important; width: 7px !important; height: 7px !important; border: 1px solid rgba(159, 117, 41, .9) !important; border-radius: 1px !important; background: linear-gradient(135deg, #e8fbff, #62c4e7) !important; transform: rotate(45deg) !important; } html body:not(.maintenance-mode) #characterSelect.character-select .character-option.has-job-change .job-change-tip.active { width: 62px !important; color: #6f501d !important; -webkit-text-fill-color: #6f501d !important; background: linear-gradient(180deg, #fffef8, #f8eccd) !important; border-color: rgba(179, 136, 49, .9) !important; } html body:not(.maintenance-mode) #characterSelect.character-select .character-option.has-job-change .job-change-tip.active::before { background: linear-gradient(135deg, #fff9d5, #dfb347) !important; } html body:not(.maintenance-mode) #characterSelect.character-select .character-option.has-job-change .job-change-tip:hover { translate: 0 -1px !important; border-color: rgba(170, 127, 41, .92) !important; box-shadow: 0 5px 10px rgba(18, 54, 79, .26), inset 0 0 0 1px rgba(255, 255, 255, .95) !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview.character-preview:not([hidden]) #previewJobShelf.preview-job-shelf:not([hidden]) { width: min(92vw, 540px) !important; max-width: calc(100vw - 18px) !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview.character-preview:not([hidden]) #previewJobButton.preview-job-button { min-width: 92px !important; min-height: 38px !important; padding: 5px 9px 4px 22px !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button::before { left: 9px !important; width: 7px !important; height: 7px !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button > span { font-size: 13px !important; } html body:not(.maintenance-mode) #previewJobButton.preview-job-button > small { max-width: 72px !important; font-size: 8px !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.has-job-change:not(.placeholder) > span > .job-change-tip { top: 11% !important; left: 7% !important; width: 50px !important; height: 19px !important; gap: 5px !important; padding: 0 5px !important; font-size: 9px !important; } html body:not(.maintenance-mode) #characterSelect.character-select .character-option.has-job-change .job-change-tip::before { flex-basis: 6px !important; width: 6px !important; height: 6px !important; } html body:not(.maintenance-mode) #characterSelect.character-select .character-option.has-job-change .job-change-tip.active { width: 57px !important; } } /* V1.28Beta-job-change10 Job choices are full-art specialization cards. The selected card is the visual focus, and Qizong's jelly-bear branch has a restrained idle motion. */ html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview.character-preview:not([hidden]) #previewJobShelf#previewJobShelf.preview-job-shelf:not([hidden]) { position: fixed !important; z-index: 2147483300 !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: center !important; width: min(500px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; max-height: calc(100dvh - 32px) !important; gap: 12px !important; padding: 11px !important; overflow: visible !important; transform: translate(-50%, -50%) !important; isolation: isolate !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card { z-index: 1 !important; flex: none !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: clamp(220px, 30dvh, 320px) auto !important; align-items: stretch !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; max-height: calc(100dvh - 58px) !important; overflow: hidden !important; transform: scale(1) !important; transform-origin: center !important; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card.selected { z-index: 3 !important; transform: scale(1.035) !important; filter: saturate(1.06) brightness(1.02) !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card:hover:not(:disabled) { z-index: 4 !important; translate: 0 0 !important; transform: scale(1.025) !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card.selected:hover:not(:disabled) { transform: scale(1.045) !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card-art.preview-job-card-art { position: relative !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; background-color: #dbeef5 !important; background-image: var(--character-art), linear-gradient(180deg, #edf8fb, #c8e2ed) !important; background-size: contain, cover !important; background-position: center, center !important; background-repeat: no-repeat, no-repeat !important; border-right: 0 !important; border-bottom: 1px solid rgba(137, 184, 205, .65) !important; isolation: isolate !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card > span { justify-content: center !important; min-height: 64px !important; gap: 3px !important; padding: 9px 11px 10px !important; text-align: center !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card small, html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card strong, html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card em { width: 100% !important; text-align: center !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card strong { font-size: clamp(16px, 2vw, 21px) !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card[data-character="Qizong"][data-job-key="jelly-bear"] .preview-job-card-art { background-image: radial-gradient(circle at 50% 78%, rgba(114, 255, 153, .28), transparent 40%), linear-gradient(180deg, #edf8fb, #c8e2ed) !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card[data-character="Qizong"][data-job-key="jelly-bear"] .preview-job-card-art::before { content: "" !important; position: absolute !important; inset: 2px !important; z-index: 2 !important; background-image: var(--character-art) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; transform-origin: 50% 82% !important; animation: qizong-jelly-bear-idle 2.7s ease-in-out infinite !important; will-change: transform !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card[data-character="Qizong"][data-job-key="jelly-bear"] .preview-job-card-art::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 7% !important; z-index: 1 !important; width: 62% !important; aspect-ratio: 2.4 / 1 !important; border: 2px solid rgba(89, 224, 126, .42) !important; border-radius: 50% !important; box-shadow: 0 0 16px rgba(70, 214, 116, .24) !important; transform: translateX(-50%) scale(.74) !important; animation: qizong-jelly-bear-ripple 2.7s ease-out infinite !important; } @keyframes qizong-jelly-bear-idle { 0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); } 24% { transform: translateY(-5px) rotate(-.8deg) scale(1.018, .982); } 46% { transform: translateY(-8px) rotate(.8deg) scale(.986, 1.018); } 66% { transform: translateY(-2px) rotate(-.35deg) scale(1.022, .978); } 80% { transform: translateY(1px) rotate(.2deg) scale(.992, 1.008); } } @keyframes qizong-jelly-bear-ripple { 0% { opacity: 0; transform: translateX(-50%) scale(.66); } 28% { opacity: .72; } 72%, 100% { opacity: 0; transform: translateX(-50%) scale(1.08); } } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview.character-preview:not([hidden]) #previewJobShelf#previewJobShelf.preview-job-shelf:not([hidden]) { width: calc(100vw - 18px) !important; max-width: calc(100vw - 18px) !important; max-height: calc(100dvh - 18px) !important; gap: 8px !important; padding: 8px !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card { grid-template-rows: clamp(196px, 29dvh, 252px) auto !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card > span { min-height: 58px !important; padding: 7px 6px 8px !important; } html body:not(.maintenance-mode) #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card strong { font-size: clamp(14px, 4.2vw, 18px) !important; } } @media (prefers-reduced-motion: reduce) { html body:not(.maintenance-mode) #previewJobShelf .preview-job-card[data-character="Qizong"][data-job-key="jelly-bear"] .preview-job-card-art::before, html body:not(.maintenance-mode) #previewJobShelf .preview-job-card[data-character="Qizong"][data-job-key="jelly-bear"] .preview-job-card-art::after { animation: none !important; } } /* V1.28Beta-select-bigcard-identity1 Every full-size character-select card keeps the same identity hierarchy: profession-colored title above the character name. Class, spec and skill copy are secondary and never replace the identity block. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open:not([hidden]) #characterPreview.character-preview:not([hidden]) #previewArt.preview-art > .preview-inscription.card-inscription { display: flex !important; visibility: visible !important; opacity: 1 !important; } html body:not(.maintenance-mode) #previewJobShelf.preview-job-shelf .preview-job-card-art > .preview-job-card-inscription.card-inscription { position: absolute !important; left: auto !important; right: 6.5% !important; top: 50% !important; bottom: auto !important; z-index: 8 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; width: min(72%, 190px) !important; min-width: 0 !important; max-width: calc(100% - 13%) !important; height: auto !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; color: #fff7dc !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; text-align: right !important; transform: translateY(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #previewJobShelf.preview-job-shelf .preview-job-card-art > .preview-job-card-inscription.card-inscription small, html body:not(.maintenance-mode) #previewJobShelf.preview-job-shelf .preview-job-card-art > .preview-job-card-inscription.card-inscription strong { display: block !important; width: auto !important; max-width: 100% !important; margin: 0 !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; text-align: right !important; text-overflow: ellipsis !important; white-space: nowrap !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) #previewJobShelf.preview-job-shelf .preview-job-card-art > .preview-job-card-inscription.card-inscription small { padding: 5px 9px 5px 11px !important; color: var(--character-title-color, #f2c15a) !important; -webkit-text-fill-color: var(--character-title-color, #f2c15a) !important; background: linear-gradient(90deg, rgba(6, 8, 13, .84), rgba(6, 8, 13, .97)) !important; border: 0 !important; border-right: 3px solid var(--character-title-color, #f2c15a) !important; border-radius: 5px 0 0 5px !important; box-shadow: 0 3px 10px rgba(0, 0, 0, .42) !important; font-size: clamp(9px, 1.05vw, 13px) !important; font-style: normal !important; font-weight: 900 !important; line-height: 1 !important; text-shadow: 0 1px 3px #000 !important; } html body:not(.maintenance-mode) #previewJobShelf.preview-job-shelf .preview-job-card-art > .preview-job-card-inscription.card-inscription strong { color: #fff7dc !important; -webkit-text-fill-color: #fff7dc !important; font-size: clamp(21px, 2.15vw, 30px) !important; font-style: normal !important; font-weight: 950 !important; line-height: .98 !important; text-shadow: 0 3px 6px rgba(0, 0, 0, .96), 0 0 14px rgba(0, 0, 0, .58) !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #previewJobShelf.preview-job-shelf .preview-job-card-art > .preview-job-card-inscription.card-inscription { right: 6% !important; top: 49% !important; width: 76% !important; max-width: 88% !important; gap: 2px !important; } html body:not(.maintenance-mode) #previewJobShelf.preview-job-shelf .preview-job-card-art > .preview-job-card-inscription.card-inscription small { padding: 4px 7px 4px 8px !important; border-right-width: 2px !important; font-size: clamp(8px, 2.4vw, 10px) !important; } html body:not(.maintenance-mode) #previewJobShelf.preview-job-shelf .preview-job-card-art > .preview-job-card-inscription.card-inscription strong { font-size: clamp(18px, 5.6vw, 24px) !important; } } /* Final portal lock: legacy full-art cards scaled the selected option. */ html body:not(.maintenance-mode) > #previewJobDialog#previewJobDialog #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card, html body:not(.maintenance-mode) > #previewJobDialog#previewJobDialog #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card.selected, html body:not(.maintenance-mode) > #previewJobDialog#previewJobDialog #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card:hover:not(:disabled), html body:not(.maintenance-mode) > #previewJobDialog#previewJobDialog #previewJobShelf#previewJobShelf .preview-job-card.preview-job-card.selected:hover:not(:disabled) { transform: none !important; } /* V1.28Beta-bigcard-title-parity1 The expanded select card reuses the thumbnail's exact title tag language. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewArt#previewArt#previewArt#previewArt.preview-art > .preview-inscription.preview-inscription.card-inscription > small { box-sizing: border-box !important; display: block !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; min-height: 17px !important; max-height: none !important; margin: 0 !important; padding: 4px 8px 4px 9px !important; overflow: hidden !important; color: var(--character-title-color, #f2c15a) !important; -webkit-text-fill-color: var(--character-title-color, #f2c15a) !important; font-size: clamp(8.5px, calc(var(--select-card-outer-w, 180px) * 0.054), 11px) !important; font-style: normal !important; font-weight: 850 !important; line-height: 1.02 !important; letter-spacing: 0 !important; text-align: right !important; text-overflow: ellipsis !important; text-transform: none !important; white-space: nowrap !important; background: linear-gradient(90deg, rgba(6, 8, 13, 0.82), rgba(6, 8, 13, 0.96)), rgba(6, 8, 13, 0.92) !important; border: 0 !important; border-right: 2px solid var(--character-title-color, #f2c15a) !important; border-radius: 5px 0 0 5px !important; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 244, 207, 0.045) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 0 8px color-mix(in srgb, var(--character-title-color, #f2c15a) 28%, transparent) !important; opacity: 1 !important; visibility: visible !important; filter: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) .preview-copy.preview-copy > #previewTitle#previewTitle, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) .preview-copy.preview-copy > #previewName#previewName { position: fixed !important; left: -10000px !important; right: auto !important; top: 0 !important; bottom: auto !important; display: block !important; inline-size: 1px !important; block-size: 1px !important; min-width: 0 !important; max-width: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; opacity: 0 !important; white-space: nowrap !important; pointer-events: none !important; transform: none !important; } @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewArt#previewArt#previewArt#previewArt.preview-art > .preview-inscription.preview-inscription.card-inscription > small { padding: 3px 7px 3px 8px !important; font-size: clamp(8px, calc(var(--select-card-outer-w, 150px) * 0.054), 10.5px) !important; min-height: 0 !important; border-right-width: 2px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 244, 207, 0.04) !important; } }