/* V1.28Beta-select-title-restore1 Character select thumbnails keep the old right-side transparent title/name read. The expanded big card uses previewTitle/previewName only, so the duplicate art inscription stays gone. */ 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:not([hidden]) .character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span > .card-inscription.card-inscription.card-inscription.card-inscription { position: absolute !important; left: auto !important; right: 7.4% !important; top: 49% !important; bottom: auto !important; z-index: 13060 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; width: calc(var(--select-card-w, 180px) * 0.62) !important; min-width: 0 !important; max-width: calc(100% - 14.8%) !important; height: auto !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; overflow: visible !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) #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:not([hidden]) .character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span > .card-inscription.card-inscription.card-inscription.card-inscription small, 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:not([hidden]) .character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span > .card-inscription.card-inscription.card-inscription.card-inscription strong { display: block !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-align: right !important; letter-spacing: 0 !important; } 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:not([hidden]) .character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span > .card-inscription.card-inscription.card-inscription.card-inscription small { 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-weight: 850 !important; line-height: 1.02 !important; padding: 4px 8px 4px 9px !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-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; } 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:not([hidden]) .character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span > .card-inscription.card-inscription.card-inscription.card-inscription strong { margin-top: 1px !important; color: #fff7dc !important; -webkit-text-fill-color: #fff7dc !important; font-size: clamp(19px, calc(var(--select-card-outer-w, 180px) * 0.124), 27px) !important; font-weight: 950 !important; line-height: 0.98 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.42) !important; } 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:not([hidden]) .character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Rhasta"]:not(.placeholder) > span > .card-inscription.card-inscription.card-inscription.card-inscription strong { transform: none !important; } 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.character-preview:not([hidden]) #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.preview-inscription.card-inscription { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: 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:not([hidden]) .character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span > .card-inscription.card-inscription.card-inscription.card-inscription { right: 7.8% !important; width: calc(var(--select-card-w, 150px) * 0.64) !important; max-width: calc(100% - 15.6%) !important; } 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:not([hidden]) .character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span > .card-inscription.card-inscription.card-inscription.card-inscription small { font-size: clamp(8px, calc(var(--select-card-outer-w, 150px) * 0.054), 10.5px) !important; padding: 3px 7px 3px 8px !important; border-right: 2px solid var(--character-title-color, #f2c15a) !important; border-radius: 5px 0 0 5px !important; background: linear-gradient(90deg, rgba(6, 8, 13, 0.82), rgba(6, 8, 13, 0.96)), rgba(6, 8, 13, 0.92) !important; color: var(--character-title-color, #f2c15a) !important; -webkit-text-fill-color: var(--character-title-color, #f2c15a) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 244, 207, 0.04) !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; } 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:not([hidden]) .character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span > .card-inscription.card-inscription.card-inscription.card-inscription strong { font-size: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.128), 25px) !important; } } /* V1.28Beta-mobile-bigcard-title-match-thumb1: Mobile opened preview uses the same title/name language as the thumbnail: black title tag, colored title text, white right-aligned character name. */ @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.character-preview:not([hidden]) .preview-copy.preview-copy, html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-copy.preview-copy { align-items: flex-end !important; text-align: right !important; } 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.character-preview:not([hidden]) #previewTitle.preview-title, html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewTitle.preview-title { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; align-self: flex-end !important; width: auto !important; max-width: min(64%, 156px) !important; min-width: 0 !important; margin: 0 !important; padding: 3px 7px 3px 8px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-align: right !important; color: var(--character-title-color, #f2c15a) !important; -webkit-text-fill-color: var(--character-title-color, #f2c15a) !important; font-size: clamp(10px, 3.05dvw, 13px) !important; font-weight: 850 !important; line-height: 1.05 !important; letter-spacing: 0 !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 6px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 244, 207, 0.04) !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; } 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.character-preview:not([hidden]) #previewName, html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewName { align-self: flex-end !important; max-width: min(70%, 190px) !important; margin: 1px 0 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-align: right !important; color: #fff7dc !important; -webkit-text-fill-color: #fff7dc !important; font-size: clamp(24px, 7.2dvw, 34px) !important; font-weight: 950 !important; line-height: 0.98 !important; letter-spacing: 0 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.42) !important; } }