/* V1.28Beta-character-select-skill-whitebox1 */ body:not(.maintenance-mode) #characterSelect.character-select #characterPreview.character-preview .preview-skill { box-sizing: border-box !important; width: min(88%, 340px) !important; max-width: min(88%, 340px) !important; margin: 0 auto !important; padding: clamp(9px, 1.45vh, 13px) clamp(11px, 1.8vh, 15px) !important; border: 1px solid rgba(155, 203, 236, 0.86) !important; border-radius: 8px !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 248, 255, 0.94) 62%, rgba(224, 240, 250, 0.9)), rgba(255, 255, 255, 0.96) !important; box-shadow: 0 10px 24px rgba(6, 28, 48, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.82) !important; color: #17344d !important; text-shadow: none !important; overflow: hidden !important; } body:not(.maintenance-mode) #characterSelect.character-select #characterPreview.character-preview .preview-skill > strong { margin: 0 0 7px !important; color: #17324a !important; -webkit-text-fill-color: #17324a !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(222, 239, 249, 0.9)) !important; border: 1px solid rgba(184, 213, 232, 0.9) !important; border-left: 3px solid var(--preview-title-color, #67bde8) !important; border-radius: 6px !important; clip-path: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74) !important; text-shadow: none !important; } body:not(.maintenance-mode) #characterSelect.character-select #characterPreview.character-preview .preview-skill > span { box-sizing: border-box !important; display: block !important; min-height: clamp(54px, 7.5vh, 78px) !important; max-height: clamp(74px, 12vh, 116px) !important; padding: clamp(8px, 1.2vh, 10px) clamp(9px, 1.4vh, 12px) !important; border: 1px solid rgba(207, 223, 236, 0.95) !important; border-radius: 7px !important; background: rgba(255, 255, 255, 0.96) !important; color: #1b3851 !important; -webkit-text-fill-color: #1b3851 !important; font-weight: 750 !important; line-height: 1.45 !important; text-shadow: none !important; overflow-y: auto !important; } body:not(.maintenance-mode) #characterSelect.character-select .skill-tip::after { width: min(260px, 76vw) !important; padding: 10px 12px !important; border: 1px solid rgba(178, 208, 229, 0.96) !important; border-radius: 8px !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(237, 248, 255, 0.96)), #ffffff !important; color: #17344d !important; -webkit-text-fill-color: #17344d !important; box-shadow: 0 14px 32px rgba(7, 25, 43, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.82) !important; text-shadow: none !important; } body:not(.maintenance-mode) #characterSelect.character-select .skill-tip::before { background: #ffffff !important; border-right: 1px solid rgba(178, 208, 229, 0.96) !important; border-bottom: 1px solid rgba(178, 208, 229, 0.96) !important; } body:not(.maintenance-mode) #modeDialog.mode-dialog .mode-dialog-copy #modeDialogDescription { box-sizing: border-box !important; padding: clamp(10px, 1.6vh, 14px) clamp(12px, 2vh, 16px) !important; border: 1px solid rgba(178, 208, 229, 0.96) !important; border-radius: 8px !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 248, 255, 0.94)), #ffffff !important; color: #17344d !important; -webkit-text-fill-color: #17344d !important; font-weight: 750 !important; line-height: 1.5 !important; text-shadow: none !important; box-shadow: 0 10px 24px rgba(6, 28, 48, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.8) !important; } @media (max-width: 899px) { body:not(.maintenance-mode) #characterSelect.character-select #characterPreview.character-preview .preview-skill { width: min(88%, 318px) !important; max-width: min(88%, 318px) !important; min-height: clamp(112px, 28vw, 146px) !important; } body:not(.maintenance-mode) #characterSelect.character-select #characterPreview.character-preview .preview-skill > span { min-height: clamp(62px, 16vw, 84px) !important; max-height: clamp(76px, 20vw, 104px) !important; } } /* V1.28Beta-skill-desc-frame1: Skill rule: the skill name is never framed here. Only the description copy gets the readable framed panel on small-card hover tips and opened big cards. */ body:not(.maintenance-mode) #characterSelect.character-select #characterPreview.character-preview .preview-skill, body:not(.maintenance-mode) #battleCharacterPreview.character-preview .preview-skill, body:not(.maintenance-mode) .skill-inspect-box .preview-skill { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; } body:not(.maintenance-mode) #characterSelect.character-select #characterPreview.character-preview .preview-skill > strong, body:not(.maintenance-mode) #battleCharacterPreview.character-preview .preview-skill > strong, body:not(.maintenance-mode) .skill-inspect-box .preview-skill > strong { border: 0 !important; border-left: 3px solid var(--preview-title-color, #67bde8) !important; background: linear-gradient(90deg, rgba(255, 255, 255, .98), rgba(220, 242, 255, .86) 72%, transparent) !important; box-shadow: none !important; border-radius: 0 !important; margin-bottom: clamp(7px, 1.2dvh, 11px) !important; } body:not(.maintenance-mode) #characterSelect.character-select #characterPreview.character-preview .preview-skill > span, body:not(.maintenance-mode) #battleCharacterPreview.character-preview .preview-skill > span, body:not(.maintenance-mode) .skill-inspect-box .preview-skill > span { box-sizing: border-box !important; display: block !important; padding: clamp(9px, 1.35dvh, 12px) clamp(11px, 1.7dvh, 15px) !important; border: 1px solid rgba(229, 197, 116, .88) !important; border-radius: 8px !important; background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(239, 249, 255, .94) 66%, rgba(255, 250, 235, .9)), #ffffff !important; color: #15324a !important; -webkit-text-fill-color: #15324a !important; box-shadow: 0 10px 24px rgba(6, 28, 48, .17), inset 0 0 0 1px rgba(255, 255, 255, .82) !important; text-shadow: none !important; } body:not(.maintenance-mode) #characterSelect.character-select .skill-tip::after, body:not(.maintenance-mode) #characterSelect.character-select .mode-tip::after { box-sizing: border-box !important; padding: 9px 11px !important; border: 1px solid rgba(229, 197, 116, .88) !important; border-radius: 8px !important; background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(239, 249, 255, .94) 66%, rgba(255, 250, 235, .9)), #ffffff !important; color: #15324a !important; -webkit-text-fill-color: #15324a !important; box-shadow: 0 12px 26px rgba(6, 28, 48, .22), inset 0 0 0 1px rgba(255, 255, 255, .82) !important; text-shadow: none !important; } body:not(.maintenance-mode) #characterSelect.character-select .skill-tip::before, body:not(.maintenance-mode) #characterSelect.character-select .mode-tip::before { background: #fffaf0 !important; border-right: 1px solid rgba(229, 197, 116, .88) !important; border-bottom: 1px solid rgba(229, 197, 116, .88) !important; } body:not(.maintenance-mode) #characterSelect.character-select .skill-inline-passive-tag, body:not(.maintenance-mode) #characterPreview.character-preview .skill-inline-passive-tag, body:not(.maintenance-mode) #battleCharacterPreview.character-preview .skill-inline-passive-tag, body:not(.maintenance-mode) .skill-inspect-box .skill-inline-passive-tag { color: #fff7df !important; -webkit-text-fill-color: #fff7df !important; background: linear-gradient(90deg, rgba(74, 8, 17, .96), rgba(166, 25, 48, .9)) !important; border: 1px solid rgba(255, 213, 136, .86) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .82) !important; box-shadow: 0 0 10px rgba(188, 28, 52, .26), inset 0 1px 0 rgba(255, 255, 255, .18) !important; } /* V1.28Beta-bigcard-skill-center2: Opened big cards keep the skill block on the card centerline. */ 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#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-copy.preview-copy.preview-copy { left: clamp(24px, 6.3%, 32px) !important; right: clamp(24px, 6.3%, 32px) !important; width: auto !important; max-width: none !important; box-sizing: border-box !important; justify-items: stretch !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#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-skill.preview-skill.preview-skill { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; justify-self: stretch !important; align-self: stretch !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#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-skill.preview-skill.preview-skill > #previewSkill#previewSkill.preview-skill-tip { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; align-self: stretch !important; justify-self: stretch !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#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-skill.preview-skill.preview-skill > #previewDescription#previewDescription { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }