/* V1.28Beta-mobile-select-final-guard1: Final mobile character-select overrides. Keep this file loaded after the character/codex crop sheets so opened-card controls cannot drift again. */ @media (max-width: 899px) { /* V1.28Beta-mobile-preview-skill-icegold-frame1: The painted ice-blue, pearl-white and pale-gold frame carries the visual language; CSS only lays out the single frosted-glass skill panel and its text. */ 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.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-skill.preview-skill.preview-skill { position: relative !important; isolation: isolate !important; display: grid !important; grid-template-rows: clamp(27px, 7.2dvw, 31px) minmax(0, 1fr) !important; gap: 0 !important; width: min(100%, 230px) !important; min-width: 0 !important; max-width: 230px !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 1835 / 857 !important; margin: 0 auto !important; padding: clamp(9px, 2.5dvw, 11px) clamp(14px, 4dvw, 18px) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #17364f !important; overflow: visible !important; pointer-events: auto !important; box-sizing: border-box !important; justify-self: center !important; align-self: center !important; } 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.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-skill.preview-skill.preview-skill::before { content: "" !important; position: absolute !important; inset: clamp(11px, 2.9dvw, 13px) clamp(12px, 3.2dvw, 15px) !important; z-index: 0 !important; border-radius: 5px !important; background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.58) 46%, transparent 72%), linear-gradient(180deg, rgba(247, 252, 255, 0.95), rgba(220, 238, 250, 0.92) 62%, rgba(245, 248, 244, 0.94)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.88), inset 0 -10px 22px rgba(82, 163, 214, 0.09) !important; pointer-events: none !important; } 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.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-skill.preview-skill.preview-skill::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 3 !important; width: 100% !important; height: 100% !important; transform: none !important; background: url("assets/ui/skill-inspect-frame-icegold-v1.png?v=V1.28Beta-mobile-skill-icegold-frame1") center / contain no-repeat !important; filter: drop-shadow(0 6px 9px rgba(24, 74, 108, 0.18)) drop-shadow(0 0 6px rgba(122, 210, 255, 0.2)) !important; box-shadow: none !important; pointer-events: none !important; } 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.preview-open:not([hidden]) #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 { position: relative !important; z-index: 2 !important; display: grid !important; grid-template-columns: auto auto !important; align-items: center !important; justify-content: center !important; justify-items: center !important; gap: 5px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 1px 8px 2px !important; border: 0 !important; border-radius: 0 !important; background: linear-gradient(90deg, transparent, rgba(91, 143, 184, 0.42) 20%, rgba(215, 174, 77, 0.62) 50%, rgba(91, 143, 184, 0.42) 80%, transparent) center bottom / 88% 1px no-repeat !important; color: #173f5e !important; -webkit-text-fill-color: #173f5e !important; font-size: clamp(11.5px, 3.25dvw, 13.5px) !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) !important; box-shadow: none !important; clip-path: none !important; box-sizing: border-box !important; } 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.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-skill.preview-skill.preview-skill > #previewDescription#previewDescription { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 3px 7px 1px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #17364f !important; -webkit-text-fill-color: #17364f !important; font-size: clamp(11px, 3.15dvw, 12.5px) !important; font-weight: 750 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-align: center !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.94) !important; box-shadow: none !important; overflow-x: hidden !important; overflow-y: auto !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option:not(.placeholder):not(.no-skill) > span > em:not([hidden]) { bottom: 16.6% !important; top: auto !important; } html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) .preview-copy.preview-copy { align-items: flex-end !important; text-align: right !important; } html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewTitle#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; justify-self: end !important; width: max-content !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) #characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewName#previewName { display: block !important; align-self: flex-end !important; justify-self: end !important; width: max-content !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; } html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #lockCharacter#lockCharacter, html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) > #lockCharacter#lockCharacter { position: absolute !important; left: 50% !important; right: auto !important; top: var( --preview-lock-top, calc(100% + var(--preview-frame-bottom-outset, var(--preview-frame-bind-outset-y, 52px)) + clamp(6px, 2dvw, 12px)) ) !important; bottom: auto !important; transform: translateX(-50%) !important; margin-left: 0 !important; margin-right: 0 !important; justify-self: auto !important; align-self: auto !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#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#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter#lockCharacter { position: absolute !important; left: 50% !important; right: auto !important; top: var( --preview-lock-top, calc(100% + var(--preview-frame-bottom-outset, var(--preview-frame-bind-outset-y, 52px)) + clamp(6px, 2dvw, 12px)) ) !important; bottom: auto !important; transform: translateX(-50%) !important; margin-left: 0 !important; margin-right: 0 !important; justify-self: auto !important; align-self: auto !important; text-align: center !important; } } /* V1.28Beta-identity-view-hidden-guard1: Hidden route panels and character overlays must never be revived by layout overrides. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #roomLobby#roomLobby.room-lobby[hidden], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #identitySelect#identitySelect.identity-select[hidden], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect.character-select[hidden], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[hidden], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #modeDialog#modeDialog.mode-dialog[hidden], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle.battle[hidden], html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #sidePanel#sidePanel.side[hidden] { display: none !important; visibility: hidden !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app:not(.character-select-app) #characterPreview#characterPreview.character-preview, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app:not(.character-select-app) #characterSelect#characterSelect .character-preview-backdrop { display: none !important; visibility: hidden !important; pointer-events: none !important; }