/* V1.28Beta-mobile-title-polish1 Phone character-select title badges use calm faction accents instead of saturated class ink. */ @media (max-width: 899px) { html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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:not(.placeholder), html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) { --mobile-card-title-ink: #284f69; --mobile-card-title-accent: #91d8ff; --mobile-card-title-edge: rgba(121, 204, 255, 0.92); --mobile-card-title-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(220, 241, 255, 0.83) 62%, rgba(197, 229, 249, 0.74)); } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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[data-select-faction="neutral"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-select-faction="neutral"]:not([hidden]) { --mobile-card-title-ink: #64516a; --mobile-card-title-accent: #efbdd9; --mobile-card-title-edge: rgba(235, 177, 214, 0.9); --mobile-card-title-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 230, 243, 0.84) 62%, rgba(231, 229, 239, 0.76)); } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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[data-select-faction="villain"], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-select-faction="villain"]:not([hidden]) { --mobile-card-title-ink: #71202d; --mobile-card-title-accent: #f2b36f; --mobile-card-title-edge: rgba(224, 84, 98, 0.88); --mobile-card-title-bg: linear-gradient(180deg, rgba(255, 246, 239, 0.94), rgba(255, 223, 211, 0.83) 62%, rgba(245, 194, 185, 0.74)); } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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:not(.placeholder) > span > .card-inscription.card-inscription { right: clamp(8px, calc(var(--select-card-outer-w, 180px) * 0.048), 11px) !important; width: min(63%, 112px) !important; max-width: calc(100% - 16%) !important; gap: clamp(2px, calc(var(--select-card-outer-w, 180px) * 0.014), 4px) !important; align-items: flex-end !important; justify-items: end !important; text-align: right !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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:not(.placeholder) > span > .card-inscription.card-inscription small, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-inscription.card-inscription.card-inscription small, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #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; width: auto !important; max-width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: clamp(2px, 0.72dvw, 4px) clamp(7px, 1.8dvw, 10px) clamp(2px, 0.72dvw, 4px) clamp(8px, 2dvw, 11px) !important; border: 1px solid rgba(255, 255, 255, 0.78) !important; border-right: 2px solid var(--mobile-card-title-edge, rgba(121, 204, 255, 0.92)) !important; border-left: 0 !important; border-radius: 999px 4px 4px 999px !important; clip-path: none !important; background: var(--mobile-card-title-bg) !important; color: var(--mobile-card-title-ink, #284f69) !important; -webkit-text-fill-color: var(--mobile-card-title-ink, #284f69) !important; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", sans-serif !important; font-size: clamp(10px, calc(var(--select-card-outer-w, 180px) * 0.058), 12px) !important; font-weight: 850 !important; line-height: 1.08 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; overflow-wrap: normal !important; text-align: right !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important; box-shadow: 0 3px 8px rgba(8, 33, 54, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.64) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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:not(.placeholder) > span > .card-inscription.card-inscription strong { max-width: 100% !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: clamp(18px, calc(var(--select-card-outer-w, 180px) * 0.118), 24px) !important; line-height: 0.98 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.82), 0 0 8px rgba(255, 255, 255, 0.22) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-inscription.card-inscription.card-inscription { width: min(45%, 148px) !important; right: clamp(10px, 2.8dvw, 14px) !important; gap: clamp(4px, 1.2dvw, 7px) !important; align-items: flex-end !important; justify-items: end !important; text-align: right !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-inscription.card-inscription.card-inscription small, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewTitle.preview-title { font-size: clamp(11px, 3.05dvw, 13px) !important; max-width: min(100%, 148px) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-inscription.card-inscription.card-inscription strong, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewName { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.86), 0 0 10px rgba(255, 255, 255, 0.22) !important; } } /* V1.28Beta-mobile-title-polish2: beat the thumbnail frame safety lock for title badges only. */ @media (max-width: 899px) { html body:not(.maintenance-mode) #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.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 small { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: clamp(2px, 0.72dvw, 4px) clamp(7px, 1.8dvw, 10px) clamp(2px, 0.72dvw, 4px) clamp(8px, 2dvw, 11px) !important; border: 1px solid rgba(255, 255, 255, 0.78) !important; border-right: 2px solid var(--mobile-card-title-edge, rgba(121, 204, 255, 0.92)) !important; border-left: 0 !important; border-radius: 999px 4px 4px 999px !important; background: var(--mobile-card-title-bg) !important; color: var(--mobile-card-title-ink, #284f69) !important; -webkit-text-fill-color: var(--mobile-card-title-ink, #284f69) !important; font-size: clamp(10px, calc(var(--select-card-outer-w, 180px) * 0.058), 12px) !important; line-height: 1.08 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; overflow-wrap: normal !important; text-align: right !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important; box-shadow: 0 3px 8px rgba(8, 33, 54, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.64) !important; } }