/* V1.27Beta mobile UI final cascade. Loaded after style.css on purpose. */ body:not(.maintenance-mode) #cards .action-card { --action-solid: #dbeaff; --action-icon-mask: url("assets/ui/action-icon-attack-solid.svg?v=v1.21Beta-solid-actions"); --action-panel-art: none; --action-panel-veil: linear-gradient(90deg, rgba(2, 4, 8, 0.86), rgba(15, 23, 34, 0.82) 42%, rgba(4, 7, 12, 0.92)); min-height: 56px !important; padding: 0 !important; color: #f9fbff !important; border: 1px solid rgba(213, 229, 245, 0.42) !important; border-radius: 8px !important; background: radial-gradient(circle at 14% 50%, color-mix(in srgb, var(--action-solid) 18%, transparent) 0 15%, transparent 28%), var(--action-panel-veil), linear-gradient(180deg, rgba(245, 250, 255, 0.24), transparent 34%, color-mix(in srgb, var(--action-solid) 14%, rgba(0, 0, 0, 0.36)) 100%), var(--action-panel-art) center / contain no-repeat, #0b111a !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -10px 24px rgba(0, 0, 0, 0.4), 0 10px 22px rgba(0, 0, 0, 0.26) !important; overflow: hidden !important; clip-path: none !important; } /* V1.27Beta-codex54: hard-lock painted action buttons, single desktop select frame, and non-circular card shimmer. */ html body:not(.maintenance-mode) { --action-defend-user-panel-art: url("assets/ui/action-defend-user-crystal-panel-v3.png?v=V1.27Beta-codex54"); --action-charge-user-panel-art: url("assets/ui/action-charge-user-gold-panel-v3.png?v=V1.27Beta-codex54"); --character-select-desktop-frame-art: url("assets/ui/character-select-desktop-single-white-frame-v1.png?v=V1.27Beta-codex54"); --codex-card-artifact-art: url("assets/ui/codex-card-artifact-relicvault-actual-artifacts-v1.png?v=V1.27Beta-codex54"); --battle-opportunity-library-art: url("assets/ui/codex-card-opportunity-fatecards-v3-gpt2.png?v=V1.27Beta-codex54"); --battle-artifact-library-art: url("assets/ui/codex-card-artifact-relicvault-actual-artifacts-v1.png?v=V1.27Beta-codex54"); } html body:not(.maintenance-mode) .card-vfx-idle::after { opacity: 0.18 !important; background: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.22) 48%, transparent 58%) !important; } html body:not(.maintenance-mode) #battle #cards .action-card, html body:not(.maintenance-mode) #cards .action-card { --action-button-art: none; min-height: 0 !important; aspect-ratio: 16 / 9 !important; padding: 0 !important; display: grid !important; place-items: center !important; overflow: visible !important; isolation: isolate !important; border: 0 !important; border-radius: 0 !important; clip-path: none !important; background: var(--action-button-art) center center / contain no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 7px 12px rgba(2, 11, 22, 0.22)) !important; } html body:not(.maintenance-mode) #battle #cards .action-card.attack, html body:not(.maintenance-mode) #cards .action-card.attack { --action-button-art: var(--action-attack-panel-art) !important; background: var(--action-attack-panel-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #battle #cards .action-card.defend, html body:not(.maintenance-mode) #cards .action-card.defend { --action-button-art: var(--action-defend-panel-art, var(--action-defend-user-panel-art)) !important; background: var(--action-button-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #battle #cards .action-card.charge, html body:not(.maintenance-mode) #cards .action-card.charge { --action-button-art: var(--action-charge-panel-art, var(--action-charge-user-panel-art)) !important; background: var(--action-button-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #battle #cards .action-card::before, html body:not(.maintenance-mode) #battle #cards .action-card::after, html body:not(.maintenance-mode) #cards .action-card::before, html body:not(.maintenance-mode) #cards .action-card::after, html body:not(.maintenance-mode) #battle #cards .action-card .action-icon, html body:not(.maintenance-mode) #cards .action-card .action-icon { content: none !important; display: none !important; } html body:not(.maintenance-mode) #battle #cards .action-card span, html body:not(.maintenance-mode) #cards .action-card span { position: relative !important; z-index: 2 !important; margin: 0 0 0 16% !important; color: #f7fbff !important; -webkit-text-fill-color: currentColor !important; font-weight: 950 !important; letter-spacing: 0 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.94), 0 0 10px rgba(159, 229, 255, 0.34) !important; } html body:not(.maintenance-mode) #battle #cards .action-card.charge span, html body:not(.maintenance-mode) #cards .action-card.charge span { color: #fff7d0 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.94), 0 0 12px rgba(255, 205, 80, 0.38) !important; } html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle#showOpportunityLibraryBattle, html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle#showArtifactLibraryBattle { border: 0 !important; border-radius: 0 !important; min-height: 42px !important; overflow: hidden !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 8px 14px rgba(3, 14, 28, 0.24)) !important; } html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle#showOpportunityLibraryBattle { --library-glow: #8bdfff; background-image: linear-gradient(90deg, rgba(4, 15, 30, 0.68), rgba(4, 15, 30, 0.22) 52%, rgba(4, 15, 30, 0.72)), var(--battle-opportunity-library-art) !important; } html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle#showArtifactLibraryBattle { --library-glow: #d9c07c; background-image: linear-gradient(90deg, rgba(4, 15, 30, 0.68), rgba(4, 15, 30, 0.2) 52%, rgba(4, 15, 30, 0.72)), var(--battle-artifact-library-art) !important; } html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle#showOpportunityLibraryBattle span, html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle#showArtifactLibraryBattle span { color: #fffaf0 !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92), 0 0 12px color-mix(in srgb, var(--library-glow) 42%, transparent) !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) { --select-frame-inner-x: clamp(58px, 4.2vw, 82px) !important; --select-frame-inner-y: clamp(86px, 10.4vh, 118px) !important; --select-matrix-w: calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3) !important; --select-matrix-h: calc(var(--select-card-outer-h) * 2 + var(--select-gap)) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { position: fixed !important; left: 50vw !important; top: 50dvh !important; width: min(calc(var(--select-matrix-w) + var(--select-frame-inner-x) * 2), calc(100vw - 14px)) !important; height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 50px)) !important; max-width: calc(100vw - 14px) !important; max-height: calc(100dvh - 50px) !important; padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important; display: grid !important; place-items: center !important; margin: 0 !important; transform: translate(-50%, -50%) !important; overflow: visible !important; isolation: isolate !important; background: var(--character-select-desktop-frame-art) center center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll { position: relative !important; z-index: 2 !important; width: var(--select-matrix-w) !important; max-width: var(--select-matrix-w) !important; height: var(--select-matrix-h) !important; max-height: var(--select-matrix-h) !important; padding: 0 !important; margin: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { width: var(--select-matrix-w) !important; max-width: var(--select-matrix-w) !important; grid-template-columns: repeat(4, var(--select-card-outer-w)) !important; grid-auto-rows: var(--select-card-outer-h) !important; gap: var(--select-gap) !important; align-content: center !important; justify-content: center !important; padding: 0 !important; margin: 0 auto !important; } } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]) { max-width: 100% !important; width: fit-content !important; min-width: 0 !important; min-height: 0 !important; padding: 3px 8px 4px 7px !important; display: inline-grid !important; place-items: center !important; justify-self: start !important; order: 1 !important; margin: 0 0 5px !important; font-size: clamp(12px, 0.95vw, 14px) !important; line-height: 1.08 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill .skill-inline-icon { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Rhasta"] #previewModeSkill:not([hidden]) { color: #fff3bd !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(226, 168, 62, 0.88) !important; border-left: 3px solid rgba(45, 122, 95, 0.98) !important; background: radial-gradient(circle at 16% 0%, rgba(255, 248, 213, 0.54), transparent 46%), linear-gradient(90deg, rgba(45, 122, 95, 0.94), rgba(217, 155, 56, 0.92) 56%, rgba(82, 49, 15, 0.96)) !important; box-shadow: 0 8px 20px rgba(73, 55, 18, 0.28), 0 0 18px rgba(226, 168, 62, 0.22), inset 0 1px 0 rgba(255, 247, 204, 0.38) !important; text-shadow: 0 1px 3px rgba(34, 18, 5, 0.72), 0 0 10px rgba(255, 218, 116, 0.28) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Lollipopz"] #previewModeSkill:not([hidden]) { color: #ffe5ff !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(255, 143, 216, 0.88) !important; border-left: 3px solid rgba(104, 209, 255, 0.98) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 244, 252, 0.58), transparent 46%), linear-gradient(90deg, rgba(61, 150, 218, 0.94), rgba(205, 87, 202, 0.94) 54%, rgba(75, 36, 116, 0.98)) !important; box-shadow: 0 8px 20px rgba(83, 29, 96, 0.28), 0 0 18px rgba(255, 137, 220, 0.24), inset 0 1px 0 rgba(255, 244, 252, 0.42) !important; text-shadow: 0 1px 3px rgba(35, 12, 48, 0.76), 0 0 10px rgba(255, 169, 231, 0.28) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Xiaoyang"] #previewModeSkill:not([hidden]) { color: #e9fbff !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(104, 213, 255, 0.9) !important; border-left: 3px solid rgba(78, 153, 255, 0.98) !important; background: radial-gradient(circle at 18% 0%, rgba(240, 253, 255, 0.62), transparent 46%), linear-gradient(90deg, rgba(55, 104, 210, 0.94), rgba(89, 216, 255, 0.9) 52%, rgba(33, 46, 111, 0.98)) !important; box-shadow: 0 8px 20px rgba(25, 68, 126, 0.28), 0 0 18px rgba(101, 222, 255, 0.24), inset 0 1px 0 rgba(244, 253, 255, 0.42) !important; text-shadow: 0 1px 3px rgba(8, 30, 76, 0.76), 0 0 10px rgba(118, 224, 255, 0.32) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] { --special-mode-title-gradient: linear-gradient(180deg, #ffffff 0%, #dffbff 20%, #80eaff 44%, #416ef2 72%, #f0c46a 100%); } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] { --special-mode-title-gradient: linear-gradient(180deg, #ffffff 0%, #ffe0fb 20%, #ff86d7 45%, #8c7cff 72%, #77dfff 100%); } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] { --special-mode-title-gradient: linear-gradient(180deg, #fffbe0 0%, #ffe08a 22%, #62d59f 50%, #247c68 74%, #f2b74b 100%); } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(#modeDialogName, #modeDialogCharacter, #modeDialogSkill, #modeDialogSkill .skill-inline-text), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(#modeDialogName, #modeDialogCharacter, #modeDialogSkill, #modeDialogSkill .skill-inline-text), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(#modeDialogName, #modeDialogCharacter, #modeDialogSkill, #modeDialogSkill .skill-inline-text) { background: var(--special-mode-title-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42)) drop-shadow(0 0 10px rgba(116, 220, 255, 0.34)) !important; } /* V1.27Beta-codex57: final star shimmer and taller desktop character-select backing. */ html body:not(.maintenance-mode) .card-vfx-idle::after { opacity: 0.2 !important; background: linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.18) 48%, transparent 56%) 0 0 / 100% 100% no-repeat, linear-gradient(90deg, transparent 0 33%, rgba(255, 255, 255, 0.62) 46% 54%, transparent 68%) 18% 22% / 22px 1px no-repeat, linear-gradient(0deg, transparent 0 33%, rgba(255, 255, 255, 0.5) 46% 54%, transparent 68%) 18% 22% / 1px 22px no-repeat, linear-gradient(90deg, transparent 0 36%, rgba(130, 232, 255, 0.5) 47% 53%, transparent 66%) 78% 76% / 18px 1px no-repeat, linear-gradient(0deg, transparent 0 36%, rgba(130, 232, 255, 0.4) 47% 53%, transparent 66%) 78% 76% / 1px 18px no-repeat !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) { --select-frame-inner-y: clamp(112px, 14.2vh, 154px) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 20px)) !important; max-height: calc(100dvh - 20px) !important; padding-top: var(--select-frame-inner-y) !important; padding-bottom: var(--select-frame-inner-y) !important; background: var(--character-select-desktop-frame-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::before { content: "" !important; display: block !important; position: absolute !important; inset: clamp(38px, 5.8vh, 64px) clamp(52px, 4.1vw, 78px) !important; z-index: 0 !important; pointer-events: none !important; border-radius: clamp(20px, 2.8vw, 42px) !important; background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.99) 0 46%, rgba(244, 250, 255, 0.96) 78%, rgba(229, 243, 254, 0.92) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 247, 255, 0.94)) !important; box-shadow: inset 0 0 0 1px rgba(166, 211, 242, 0.38), inset 0 0 42px rgba(112, 185, 240, 0.16) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll { position: relative !important; z-index: 2 !important; } } /* V1.27Beta-codex56: taller desktop character-select white backing. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) { --select-frame-inner-y: clamp(112px, 14.2vh, 154px) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 20px)) !important; max-height: calc(100dvh - 20px) !important; padding-top: var(--select-frame-inner-y) !important; padding-bottom: var(--select-frame-inner-y) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::before { content: "" !important; display: block !important; position: absolute !important; inset: clamp(40px, 6.2vh, 66px) clamp(52px, 4.1vw, 78px) !important; z-index: 0 !important; pointer-events: none !important; border-radius: clamp(20px, 2.8vw, 42px) !important; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9) 42%, rgba(238, 248, 255, 0.88) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 247, 255, 0.94)) !important; box-shadow: inset 0 0 0 1px rgba(168, 211, 242, 0.36), inset 0 0 46px rgba(112, 185, 240, 0.18) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll { z-index: 2 !important; } } /* V1.27Beta-codex4 lobby mode clarity hotfix: the four mode paintings must fill their buttons directly, with no milky crystal veil. */ html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select { width: min(960px, 100%) !important; margin: 0 auto !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: clamp(128px, 16vh, 174px) !important; gap: clamp(12px, 1.4vw, 18px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="1v1"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="2v2"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="3v3"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="identity"] { width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; padding: clamp(14px, 1.4vw, 20px) !important; display: grid !important; align-content: center !important; justify-items: start !important; overflow: hidden !important; border: 0 !important; border-radius: 8px !important; background-image: linear-gradient(90deg, rgba(0, 9, 18, 0.54) 0%, rgba(0, 9, 18, 0.3) 38%, rgba(0, 9, 18, 0.06) 78%), var(--mode-art) !important; background-size: cover, cover !important; background-position: center center, center center !important; background-repeat: no-repeat, no-repeat !important; background-color: #061425 !important; box-shadow: 0 14px 28px rgba(4, 18, 34, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; filter: saturate(1.1) contrast(1.08) brightness(0.98) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button::before, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button:hover, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button:focus-visible { filter: saturate(1.18) contrast(1.12) brightness(1.02) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button.selected { box-shadow: 0 16px 30px rgba(4, 18, 34, 0.32), 0 0 0 2px rgba(238, 187, 82, 0.58), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: clamp(86px, 17vw, 116px) !important; gap: 9px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button { padding: 12px !important; } } /* V1.27Beta-codex6 final lobby input alignment override. */ html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-panel label { gap: clamp(12px, 1.25vw, 18px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo #nameInput { padding-left: clamp(34px, 3.2vw, 48px) !important; padding-right: clamp(18px, 2vw, 26px) !important; text-indent: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.solo #joinCode { padding-left: clamp(24px, 2.3vw, 34px) !important; padding-right: clamp(14px, 1.8vw, 22px) !important; text-indent: 0 !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo #nameInput { padding-left: 42px !important; padding-right: 18px !important; } html body:not(.maintenance-mode) #appRoot.app.solo #joinCode { padding-left: 28px !important; padding-right: 16px !important; } } /* V1.27Beta-codex22 true final lobby action fit and version button override. */ html body:not(.maintenance-mode) #appRoot.app.solo .lobby-copy { width: auto !important; max-width: none !important; min-width: 0 !important; height: 34px !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded { width: 104px !important; min-width: 104px !important; max-width: 104px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 11px !important; display: grid !important; place-items: center !important; overflow: hidden !important; cursor: pointer !important; pointer-events: auto !important; border: 1px solid rgba(226, 239, 250, 0.56) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(250, 254, 255, 0.88), rgba(203, 225, 244, 0.74)), linear-gradient(135deg, rgba(92, 155, 214, 0.34), rgba(255, 244, 197, 0.28)) !important; box-shadow: 0 8px 18px rgba(3, 19, 36, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(102, 151, 190, 0.22) !important; backdrop-filter: blur(4px) saturate(1.06) !important; -webkit-backdrop-filter: blur(4px) saturate(1.06) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes::before, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded span { display: block !important; max-height: 32px !important; margin: 0 !important; opacity: 1 !important; transform: none !important; font-size: 12px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; color: #173a58 !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded p { display: none !important; max-height: 0 !important; margin: 0 !important; opacity: 0 !important; overflow: hidden !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { overflow: visible !important; clip-path: none !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1) 56%, transparent), var(--lobby-action-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom::after, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules::after, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex::after { content: none !important; display: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo .lobby-copy { left: 12px !important; bottom: 10px !important; height: 32px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded { width: 94px !important; min-width: 94px !important; max-width: 94px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes span { font-size: 11px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions { width: min(92vw, 540px) !important; gap: clamp(4px, 1.2vw, 7px) !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { height: clamp(62px, 9.2vh, 82px) !important; min-height: clamp(62px, 9.2vh, 82px) !important; padding: 0 5px 1px !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 58%, transparent), var(--lobby-action-art) center center / contain no-repeat !important; } } /* V1.27Beta-codex22 final lobby action fit and version button override. */ html body:not(.maintenance-mode) #appRoot.app.solo .lobby-copy { width: auto !important; max-width: none !important; min-width: 0 !important; height: 34px !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded { width: 104px !important; min-width: 104px !important; max-width: 104px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 11px !important; display: grid !important; place-items: center !important; overflow: hidden !important; cursor: pointer !important; pointer-events: auto !important; border: 1px solid rgba(226, 239, 250, 0.56) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(250, 254, 255, 0.88), rgba(203, 225, 244, 0.74)), linear-gradient(135deg, rgba(92, 155, 214, 0.34), rgba(255, 244, 197, 0.28)) !important; box-shadow: 0 8px 18px rgba(3, 19, 36, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(102, 151, 190, 0.22) !important; backdrop-filter: blur(4px) saturate(1.06) !important; -webkit-backdrop-filter: blur(4px) saturate(1.06) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes::before, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded span { display: block !important; max-height: 32px !important; margin: 0 !important; opacity: 1 !important; transform: none !important; font-size: 12px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; color: #173a58 !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded p { display: none !important; max-height: 0 !important; margin: 0 !important; opacity: 0 !important; overflow: hidden !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { overflow: visible !important; clip-path: none !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1) 56%, transparent), var(--lobby-action-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom::after, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules::after, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex::after { content: none !important; display: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo .lobby-copy { left: 12px !important; bottom: 10px !important; height: 32px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded { width: 94px !important; min-width: 94px !important; max-width: 94px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes span { font-size: 11px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions { width: min(92vw, 540px) !important; gap: clamp(4px, 1.2vw, 7px) !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { height: clamp(62px, 9.2vh, 82px) !important; min-height: clamp(62px, 9.2vh, 82px) !important; padding: 0 5px 1px !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 58%, transparent), var(--lobby-action-art) center center / contain no-repeat !important; } } /* V1.27Beta-codex22 lobby action fit and version button. */ html body:not(.maintenance-mode) #appRoot.app.solo .lobby-copy { width: auto !important; max-width: none !important; min-width: 0 !important; height: 34px !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded { width: 104px !important; min-width: 104px !important; max-width: 104px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 11px !important; display: grid !important; place-items: center !important; overflow: hidden !important; cursor: pointer !important; pointer-events: auto !important; border: 1px solid rgba(226, 239, 250, 0.56) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(250, 254, 255, 0.88), rgba(203, 225, 244, 0.74)), linear-gradient(135deg, rgba(92, 155, 214, 0.34), rgba(255, 244, 197, 0.28)) !important; box-shadow: 0 8px 18px rgba(3, 19, 36, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(102, 151, 190, 0.22) !important; backdrop-filter: blur(4px) saturate(1.06) !important; -webkit-backdrop-filter: blur(4px) saturate(1.06) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes::before, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded span { display: block !important; max-height: 32px !important; margin: 0 !important; opacity: 1 !important; transform: none !important; font-size: 12px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; color: #173a58 !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded p { display: none !important; max-height: 0 !important; margin: 0 !important; opacity: 0 !important; overflow: hidden !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { overflow: visible !important; clip-path: none !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1) 56%, transparent), var(--lobby-action-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom::after, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules::after, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex::after { content: none !important; display: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo .lobby-copy { left: 12px !important; bottom: 10px !important; height: 32px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded { width: 94px !important; min-width: 94px !important; max-width: 94px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes span { font-size: 11px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions { width: min(92vw, 540px) !important; gap: clamp(4px, 1.2vw, 7px) !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { height: clamp(62px, 9.2vh, 82px) !important; min-height: clamp(62px, 9.2vh, 82px) !important; padding: 0 5px 1px !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 58%, transparent), var(--lobby-action-art) center center / contain no-repeat !important; } } /* V1.27Beta-codex20 mobile battle layout and action buttons. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #battle.battle:not([hidden]) { width: calc(100vw - 12px) !important; height: calc(100dvh - 18px) !important; max-height: calc(100dvh - 18px) !important; padding: 0 0 calc(70px + env(safe-area-inset-bottom)) !important; grid-template-rows: minmax(0, 1fr) 49px 38px 40px !important; gap: 5px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .fighters { height: 100% !important; min-height: 0 !important; padding: 4px !important; align-items: start !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .combatant, html body:not(.maintenance-mode) #battle .opponent-combatant { height: min(100%, 412px) !important; min-height: 318px !important; max-height: 100% !important; grid-template-rows: auto minmax(128px, 1fr) !important; align-content: start !important; gap: 6px !important; padding: 6px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .you-combatant > .fighter-panel, html body:not(.maintenance-mode) #battle .opponent-combatant > .fighter-panel { height: clamp(128px, 18.5dvh, 154px) !important; min-height: 128px !important; max-height: 154px !important; padding: 7px 6px !important; display: grid !important; grid-template-rows: 22px 22px 18px 18px 18px minmax(0, 1fr) !important; gap: 3px !important; align-content: stretch !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .fighter-panel .status-bar { min-height: 0 !important; height: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .fighter-panel .equipment-slots { min-height: 0 !important; height: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .fighter-panel .meter-row, html body:not(.maintenance-mode) #battle .fighter-panel .energy, html body:not(.maintenance-mode) #battle .fighter-panel .fatigue-row { min-height: 0 !important; height: 18px !important; align-items: center !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .fighter-panel .meter-row { grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 4px !important; } html body:not(.maintenance-mode) #battle .fighter-panel .stat-label { font-size: 9px !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #battle .fighter-panel .meter { height: 7px !important; } html body:not(.maintenance-mode) #battle .fighter-panel .choice { min-height: 0 !important; margin: 0 !important; padding: 2px 3px !important; display: grid !important; place-items: center !important; font-size: clamp(9px, 2.45vw, 11px) !important; line-height: 1.05 !important; text-align: center !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle #cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; padding: 0 4px !important; align-items: center !important; } html body:not(.maintenance-mode) #battle #cards .action-card { --mobile-action-frame: url("assets/ui/action_buttons/v125/attack/rogue/assassination.png?v=V1.27Beta-action-alpha-seamfix2"); --mobile-action-icon: url("assets/ui/action-icon-rogue-silver-daggers-clean.png?v=V1.27Beta-codex21"); --mobile-action-glow: #d8e7ff; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 16 / 9 !important; padding: 0 !important; display: grid !important; place-items: center !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: var(--mobile-action-frame) center center / 100% 100% no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 5px 9px rgba(2, 9, 18, 0.34)) !important; touch-action: manipulation !important; } html body:not(.maintenance-mode) #battle #cards .action-card.defend, html body:not(.maintenance-mode) #battle #cards .action-card.charge { background: radial-gradient(circle at 16.5% 50%, rgba(218, 234, 255, 0.14) 0 18%, rgba(5, 10, 17, 0.62) 31%, transparent 32%), linear-gradient(90deg, rgba(209, 226, 240, 0.42) 0 2px, transparent 2px), linear-gradient(180deg, rgba(238, 246, 255, 0.3), rgba(255, 255, 255, 0.04) 26%, rgba(0, 0, 0, 0.34) 100%), linear-gradient(90deg, rgba(16, 22, 31, 0.94), rgba(25, 33, 44, 0.9) 48%, rgba(13, 18, 27, 0.96)) !important; clip-path: polygon(2.8% 0, 97.2% 0, 100% 50%, 97.2% 100%, 2.8% 100%, 0 50%) !important; border: 1px solid rgba(204, 222, 238, 0.74) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 10px 18px rgba(255, 255, 255, 0.08), inset 0 -14px 22px rgba(0, 0, 0, 0.42), 0 5px 9px rgba(2, 9, 18, 0.34) !important; } html body:not(.maintenance-mode) #battle #cards .action-card.defend { --mobile-action-icon: url("assets/ui/action-icon-defend-silver-clean-gpt2.png?v=V1.27Beta-codex21"); --mobile-action-glow: #74eaf0; } html body:not(.maintenance-mode) #battle #cards .action-card.charge { --mobile-action-icon: url("assets/ui/action-icon-charge-silver-clean-gpt2.png?v=V1.27Beta-codex21"); --mobile-action-glow: #ffd978; } html body:not(.maintenance-mode) #battle #cards .action-card::before { content: "" !important; display: block !important; position: absolute !important; left: 4.5% !important; top: 50% !important; width: 23.8% !important; max-width: none !important; height: auto !important; aspect-ratio: 1 !important; transform: translateY(-50%) !important; border-radius: 50% !important; background: radial-gradient(circle at 35% 29%, rgba(255, 255, 255, 0.26) 0 9%, transparent 18%), radial-gradient(circle, color-mix(in srgb, var(--mobile-action-glow) 14%, #111923 86%) 0 53%, rgba(5, 8, 13, 0.96) 55%, rgba(7, 12, 18, 0.62) 68%, transparent 74%) !important; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1), inset 0 0 13px color-mix(in srgb, var(--mobile-action-glow) 25%, transparent), 0 0 8px color-mix(in srgb, var(--mobile-action-glow) 28%, transparent) !important; pointer-events: none !important; opacity: 1 !important; } html body:not(.maintenance-mode) #battle #cards .action-card.attack::before { content: none !important; display: none !important; } html body:not(.maintenance-mode) #battle #cards .action-card::after { content: "" !important; display: block !important; position: absolute !important; left: 6.3% !important; top: 50% !important; z-index: 2 !important; width: 20% !important; max-width: none !important; height: auto !important; aspect-ratio: 1 !important; transform: translateY(-50%) !important; background: var(--mobile-action-icon) center center / contain no-repeat !important; -webkit-mask: none !important; mask: none !important; opacity: 1 !important; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.68)) drop-shadow(0 0 6px color-mix(in srgb, var(--mobile-action-glow) 36%, transparent)) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #battle #cards .action-card.attack::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #battle #cards .action-card span { position: relative !important; z-index: 3 !important; width: auto !important; margin: 0 0 0 23% !important; color: rgba(246, 252, 255, 0.94) !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(13px, 3.3vw, 16px) !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 0 8px color-mix(in srgb, var(--mobile-action-glow) 24%, transparent) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #battle #cards .action-card.attack span { margin-left: 25% !important; } html body:not(.maintenance-mode) #battle .utility { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: column !important; gap: 5px !important; padding: 0 4px !important; align-items: center !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; } html body:not(.maintenance-mode) #battle .utility:has(#rematch:not([hidden])) { grid-template-columns: 0.72fr 1fr 1fr !important; } html body:not(.maintenance-mode) #battle .utility #showRulesBattle { order: 1 !important; } html body:not(.maintenance-mode) #battle .utility #leaveRoom { order: 2 !important; } html body:not(.maintenance-mode) #battle .utility #rematch { order: 3 !important; } html body:not(.maintenance-mode) #battle .utility #rematch[hidden] { display: none !important; } html body:not(.maintenance-mode) #battle .utility button { width: 100% !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 8px !important; display: inline-grid !important; place-items: center !important; font-size: clamp(11px, 2.8vw, 13px) !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #battle .utility #rematch { font-size: clamp(9px, 2.45vw, 11px) !important; padding: 0 5px !important; } } /* V1.27Beta-codex21 mobile battle specificity lock. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) { height: calc(100dvh - 18px) !important; max-height: calc(100dvh - 18px) !important; padding: 0 0 calc(100px + env(safe-area-inset-bottom)) !important; grid-template-rows: minmax(0, 1fr) 49px 38px 40px !important; gap: 5px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant, html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { height: min(100%, 396px) !important; min-height: 360px !important; grid-template-rows: auto minmax(168px, 1fr) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .you-combatant > .fighter-panel, html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant > .fighter-panel { height: clamp(168px, 22dvh, 182px) !important; min-height: 168px !important; max-height: 182px !important; grid-template-rows: 24px 24px 20px 20px 20px minmax(0, 1fr) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle #cards .action-card { height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 16 / 9 !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .utility { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .utility:has(#rematch:not([hidden])) { grid-template-columns: 0.72fr 1fr 1fr !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .utility #rematch[hidden] { display: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .utility button { height: 36px !important; min-height: 36px !important; max-height: 36px !important; } } /* V1.27Beta-codex13 final lobby version icon. Final EOF pass: default is only one tiny app icon; focus/hover expands the changelog. */ html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) ~ .version-badge { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-copy { position: fixed !important; left: clamp(12px, 1.45vw, 20px) !important; right: auto !important; top: auto !important; bottom: clamp(12px, 1.6vh, 20px) !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; z-index: 30 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes { position: absolute !important; left: 0 !important; bottom: 0 !important; z-index: 31 !important; width: 44px !important; min-width: 44px !important; max-width: none !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; cursor: pointer !important; pointer-events: auto !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; isolation: isolate !important; transition: width 180ms ease, min-height 180ms ease, padding 180ms ease, border-radius 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes::before { content: "" !important; position: absolute !important; left: 0 !important; bottom: 0 !important; z-index: 2 !important; width: 44px !important; height: 44px !important; border-radius: 999px !important; background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.72), transparent 34%), url("assets/icons/app/luminary-app-icon-64.png?v=V1.27Beta") center / 76% 76% no-repeat, linear-gradient(180deg, rgba(245, 253, 255, 0.92), rgba(182, 226, 255, 0.76) 52%, rgba(69, 132, 180, 0.72)) !important; box-shadow: 0 8px 18px rgba(6, 24, 42, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.62), inset 0 -8px 14px rgba(35, 99, 144, 0.18) !important; transition: left 180ms ease, top 180ms ease, bottom 180ms ease, width 180ms ease, height 180ms ease !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes::after { content: "" !important; position: absolute !important; right: 5px !important; top: 6px !important; z-index: 3 !important; width: 9px !important; height: 9px !important; border-radius: 999px !important; background: linear-gradient(180deg, #fff7c7, #d79b24) !important; box-shadow: 0 0 8px rgba(255, 219, 105, 0.58) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes span, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes strong, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes p { position: relative !important; z-index: 4 !important; display: block !important; max-height: 0 !important; margin: 0 !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; transform: translateY(3px) !important; transition: max-height 180ms ease, margin-top 180ms ease, opacity 180ms ease, transform 180ms ease !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) { width: clamp(252px, 22vw, 330px) !important; min-width: clamp(252px, 22vw, 330px) !important; min-height: 142px !important; height: auto !important; padding: 13px 15px 14px 58px !important; border: 1px solid rgba(208, 232, 248, 0.42) !important; border-radius: 12px !important; background: radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.2), transparent 42%), linear-gradient(180deg, rgba(23, 48, 68, 0.78), rgba(8, 24, 42, 0.72)), rgba(10, 28, 46, 0.7) !important; box-shadow: 0 14px 30px rgba(4, 15, 30, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(6px) saturate(1.08) !important; -webkit-backdrop-filter: blur(6px) saturate(1.08) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within)::before { left: 12px !important; top: 12px !important; bottom: auto !important; width: 34px !important; height: 34px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) span { max-height: 22px !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) strong { max-height: 46px !important; margin-top: 8px !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) p { max-height: 84px !important; margin-top: 6px !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:focus-visible { outline: 2px solid rgba(255, 226, 124, 0.72) !important; outline-offset: 3px !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-copy { left: 12px !important; bottom: 12px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) { width: min(326px, calc(100vw - 24px)) !important; min-width: min(326px, calc(100vw - 24px)) !important; min-height: 152px !important; padding: 13px 14px 14px 56px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) p { max-height: 96px !important; } } /* V1.27Beta-codex13 final lobby version icon. Final EOF pass: default is only one tiny app icon; focus/hover expands the changelog. */ html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) ~ .version-badge { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-copy { position: fixed !important; left: clamp(12px, 1.45vw, 20px) !important; right: auto !important; top: auto !important; bottom: clamp(12px, 1.6vh, 20px) !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; z-index: 30 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes { position: absolute !important; left: 0 !important; bottom: 0 !important; z-index: 31 !important; width: 44px !important; min-width: 44px !important; max-width: none !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; cursor: pointer !important; pointer-events: auto !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; isolation: isolate !important; transition: width 180ms ease, min-height 180ms ease, padding 180ms ease, border-radius 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes::before { content: "" !important; position: absolute !important; left: 0 !important; bottom: 0 !important; z-index: 2 !important; width: 44px !important; height: 44px !important; border-radius: 999px !important; background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.72), transparent 34%), url("assets/icons/app/luminary-app-icon-64.png?v=V1.27Beta") center / 76% 76% no-repeat, linear-gradient(180deg, rgba(245, 253, 255, 0.92), rgba(182, 226, 255, 0.76) 52%, rgba(69, 132, 180, 0.72)) !important; box-shadow: 0 8px 18px rgba(6, 24, 42, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.62), inset 0 -8px 14px rgba(35, 99, 144, 0.18) !important; transition: left 180ms ease, top 180ms ease, bottom 180ms ease, width 180ms ease, height 180ms ease !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes::after { content: "" !important; position: absolute !important; right: 5px !important; top: 6px !important; z-index: 3 !important; width: 9px !important; height: 9px !important; border-radius: 999px !important; background: linear-gradient(180deg, #fff7c7, #d79b24) !important; box-shadow: 0 0 8px rgba(255, 219, 105, 0.58) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes span, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes strong, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes p { position: relative !important; z-index: 4 !important; display: block !important; max-height: 0 !important; margin: 0 !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; transform: translateY(3px) !important; transition: max-height 180ms ease, margin-top 180ms ease, opacity 180ms ease, transform 180ms ease !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) { width: clamp(252px, 22vw, 330px) !important; min-width: clamp(252px, 22vw, 330px) !important; min-height: 142px !important; height: auto !important; padding: 13px 15px 14px 58px !important; border: 1px solid rgba(208, 232, 248, 0.42) !important; border-radius: 12px !important; background: radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.2), transparent 42%), linear-gradient(180deg, rgba(23, 48, 68, 0.78), rgba(8, 24, 42, 0.72)), rgba(10, 28, 46, 0.7) !important; box-shadow: 0 14px 30px rgba(4, 15, 30, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(6px) saturate(1.08) !important; -webkit-backdrop-filter: blur(6px) saturate(1.08) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within)::before { left: 12px !important; top: 12px !important; bottom: auto !important; width: 34px !important; height: 34px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) span { max-height: 22px !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) strong { max-height: 46px !important; margin-top: 8px !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) p { max-height: 84px !important; margin-top: 6px !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:focus-visible { outline: 2px solid rgba(255, 226, 124, 0.72) !important; outline-offset: 3px !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-copy { left: 12px !important; bottom: 12px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) { width: min(326px, calc(100vw - 24px)) !important; min-width: min(326px, calc(100vw - 24px)) !important; min-height: 152px !important; padding: 13px 14px 14px 56px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) p { max-height: 96px !important; } } /* V1.27Beta-codex12 lobby version icon: The changelog should sleep as one quiet icon, then expand only when the player asks. */ html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) ~ .version-badge { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-copy { left: clamp(12px, 1.45vw, 20px) !important; bottom: clamp(12px, 1.6vh, 20px) !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes { position: absolute !important; left: 0 !important; bottom: 0 !important; z-index: 30 !important; width: 44px !important; min-width: 44px !important; max-width: none !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; cursor: pointer !important; pointer-events: auto !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; isolation: isolate !important; transition: width 180ms ease, min-height 180ms ease, padding 180ms ease, border-radius 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes::before { content: "" !important; position: absolute !important; left: 0 !important; bottom: 0 !important; z-index: 2 !important; width: 44px !important; height: 44px !important; border-radius: 999px !important; background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.72), transparent 34%), url("assets/icons/app/luminary-app-icon-64.png?v=V1.27Beta") center / 76% 76% no-repeat, linear-gradient(180deg, rgba(245, 253, 255, 0.92), rgba(182, 226, 255, 0.76) 52%, rgba(69, 132, 180, 0.72)) !important; box-shadow: 0 8px 18px rgba(6, 24, 42, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.62), inset 0 -8px 14px rgba(35, 99, 144, 0.18) !important; transition: left 180ms ease, top 180ms ease, bottom 180ms ease, width 180ms ease, height 180ms ease !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes::after { content: "" !important; position: absolute !important; right: 5px !important; top: 6px !important; z-index: 3 !important; width: 9px !important; height: 9px !important; border-radius: 999px !important; background: linear-gradient(180deg, #fff7c7, #d79b24) !important; box-shadow: 0 0 8px rgba(255, 219, 105, 0.58) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes span, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes strong, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes p { position: relative !important; z-index: 4 !important; display: block !important; max-height: 0 !important; margin: 0 !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; transform: translateY(3px) !important; transition: max-height 180ms ease, margin-top 180ms ease, opacity 180ms ease, transform 180ms ease !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) { width: clamp(252px, 22vw, 330px) !important; min-width: clamp(252px, 22vw, 330px) !important; min-height: 142px !important; height: auto !important; padding: 13px 15px 14px 58px !important; border: 1px solid rgba(208, 232, 248, 0.42) !important; border-radius: 12px !important; background: radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.2), transparent 42%), linear-gradient(180deg, rgba(23, 48, 68, 0.78), rgba(8, 24, 42, 0.72)), rgba(10, 28, 46, 0.7) !important; box-shadow: 0 14px 30px rgba(4, 15, 30, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(6px) saturate(1.08) !important; -webkit-backdrop-filter: blur(6px) saturate(1.08) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within)::before { left: 12px !important; top: 12px !important; bottom: auto !important; width: 34px !important; height: 34px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) span { max-height: 22px !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) strong { max-height: 46px !important; margin-top: 8px !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) p { max-height: 84px !important; margin-top: 6px !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:focus-visible { outline: 2px solid rgba(255, 226, 124, 0.72) !important; outline-offset: 3px !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-copy { left: 12px !important; bottom: 12px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) { width: min(326px, calc(100vw - 24px)) !important; min-width: min(326px, calc(100vw - 24px)) !important; min-height: 152px !important; padding: 13px 14px 14px 56px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) p { max-height: 96px !important; } } /* V1.27Beta-codex14 version icon expansion unlock. This sits after the earlier icon blocks so the focused card actually opens. */ html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) { width: clamp(252px, 22vw, 330px) !important; min-width: clamp(252px, 22vw, 330px) !important; height: auto !important; min-height: 142px !important; padding: 13px 15px 14px 58px !important; border: 1px solid rgba(208, 232, 248, 0.42) !important; border-radius: 12px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) span { max-height: 22px !important; margin-top: 0 !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) strong { max-height: 46px !important; margin-top: 8px !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) p { max-height: 96px !important; margin-top: 6px !important; opacity: 1 !important; transform: translateY(0) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:is(:hover, :focus, :focus-within) { width: min(326px, calc(100vw - 24px)) !important; min-width: min(326px, calc(100vw - 24px)) !important; min-height: 152px !important; padding: 13px 14px 14px 56px !important; } } /* V1.27Beta-codex15 version icon expansion compatibility. Avoid :is() here: explicit selectors win cleanly against the older changelog rules. */ html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:hover, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:focus, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:focus-within { width: clamp(252px, 22vw, 330px) !important; min-width: clamp(252px, 22vw, 330px) !important; height: auto !important; min-height: 142px !important; padding: 13px 15px 14px 58px !important; border: 1px solid rgba(208, 232, 248, 0.42) !important; border-radius: 12px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:hover span, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:focus span, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:focus-within span { max-height: 22px !important; margin-top: 0 !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:hover strong, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:focus strong, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:focus-within strong { max-height: 46px !important; margin-top: 8px !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:hover p, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:focus p, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:focus-within p { max-height: 96px !important; margin-top: 6px !important; opacity: 1 !important; transform: translateY(0) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:hover, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:focus, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes:focus-within { width: min(326px, calc(100vw - 24px)) !important; min-width: min(326px, calc(100vw - 24px)) !important; min-height: 152px !important; padding: 13px 14px 14px 56px !important; } } /* V1.27Beta-codex16 clicked version icon state. */ html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes.expanded { width: clamp(252px, 22vw, 330px) !important; min-width: clamp(252px, 22vw, 330px) !important; height: auto !important; min-height: 142px !important; padding: 13px 15px 14px 58px !important; border: 1px solid rgba(208, 232, 248, 0.42) !important; border-radius: 12px !important; background: radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.2), transparent 42%), linear-gradient(180deg, rgba(23, 48, 68, 0.78), rgba(8, 24, 42, 0.72)), rgba(10, 28, 46, 0.7) !important; box-shadow: 0 14px 30px rgba(4, 15, 30, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(6px) saturate(1.08) !important; -webkit-backdrop-filter: blur(6px) saturate(1.08) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes.expanded::before { left: 12px !important; top: 12px !important; bottom: auto !important; width: 34px !important; height: 34px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes.expanded span { max-height: 22px !important; margin-top: 0 !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes.expanded strong { max-height: 46px !important; margin-top: 8px !important; opacity: 1 !important; transform: translateY(0) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes.expanded p { max-height: 96px !important; margin-top: 6px !important; opacity: 1 !important; transform: translateY(0) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .version-notes.expanded { width: min(326px, calc(100vw - 24px)) !important; min-width: min(326px, calc(100vw - 24px)) !important; min-height: 152px !important; padding: 13px 14px 14px 56px !important; } } /* V1.27Beta-codex8 final mobile battle touch rescue. Keep the report compact and out of the action hit-area; keep portraits square-cropped. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .arena { grid-template-rows: auto minmax(0, 1fr) !important; gap: 4px !important; padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)) !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle.battle:not([hidden]) { position: relative !important; z-index: 30 !important; width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; height: calc(100dvh - 20px) !important; max-height: calc(100dvh - 20px) !important; margin: 0 auto !important; padding: 0 0 calc(100px + env(safe-area-inset-bottom)) !important; box-sizing: border-box !important; display: grid !important; grid-template-rows: minmax(0, 1fr) 54px 38px 72px !important; gap: 5px !important; overflow: hidden !important; transform: none !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #battle .fighters { --phone-vs: 28px; min-height: 0 !important; height: 100% !important; max-height: none !important; align-items: start !important; justify-items: stretch !important; padding: 4px !important; gap: 4px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .combatant, html body:not(.maintenance-mode) #battle .opponent-combatant { align-self: start !important; width: 100% !important; height: auto !important; max-height: 100% !important; min-height: 0 !important; align-content: start !important; grid-template-rows: auto auto !important; gap: 5px !important; padding: 6px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .fighter { width: 100% !important; min-height: 0 !important; height: auto !important; grid-template-rows: auto auto !important; align-content: start !important; gap: 4px !important; padding: 5px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .character-face { position: relative !important; width: 100% !important; max-width: min(38vw, 156px) !important; aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; max-height: min(38vw, 156px) !important; justify-self: center !important; align-self: start !important; display: block !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .avatar { width: 100% !important; height: 100% !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; background-size: var(--art-size, cover), cover, cover !important; background-position: var(--art-position, center 12%), center, center !important; } html body:not(.maintenance-mode) #battle .role-card { position: absolute !important; left: 5px !important; right: 5px !important; bottom: 5px !important; min-height: 32px !important; max-height: 45px !important; padding: 4px 5px !important; overflow: hidden !important; z-index: 3 !important; } html body:not(.maintenance-mode) #battle .role-card > span { -webkit-line-clamp: 1 !important; } html body:not(.maintenance-mode) #battle .fighter-panel { height: 58px !important; min-height: 58px !important; max-height: 58px !important; padding: 5px !important; } html body:not(.maintenance-mode) #battle #cards, html body:not(.maintenance-mode) #battle .battle-libraries, html body:not(.maintenance-mode) #battle .utility { position: relative !important; z-index: 60 !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #battle #cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; padding: 0 4px !important; } html body:not(.maintenance-mode) #battle #cards .action-card { height: 54px !important; min-height: 54px !important; max-height: 54px !important; touch-action: manipulation !important; } html body:not(.maintenance-mode) #battle .battle-libraries, html body:not(.maintenance-mode) #battle .utility { gap: 5px !important; padding: 0 4px !important; } html body:not(.maintenance-mode) #battle .battle-libraries .library-action, html body:not(.maintenance-mode) #battle .utility button { height: 36px !important; min-height: 36px !important; max-height: 36px !important; touch-action: manipulation !important; } html body:not(.maintenance-mode) #sidePanel.side { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; z-index: 12 !important; width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; height: 86px !important; min-height: 0 !important; max-height: 86px !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: hidden !important; pointer-events: none !important; } html body:not(.maintenance-mode) #sidePanel.side section:first-child { width: 100% !important; height: 86px !important; min-height: 0 !important; max-height: 86px !important; margin: 0 !important; padding: 6px 8px !important; display: grid !important; grid-template-rows: 24px minmax(0, 1fr) !important; gap: 4px !important; overflow: hidden !important; border-radius: 10px !important; background: linear-gradient(180deg, rgba(5, 18, 36, 0.82), rgba(5, 15, 30, 0.72)), rgba(10, 30, 52, 0.68) !important; box-shadow: 0 10px 24px rgba(2, 10, 22, 0.24), inset 0 0 0 1px rgba(198, 229, 255, 0.18) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #sidePanel.side .rules, html body:not(.maintenance-mode) #sidePanel.side section:first-child > h2 { display: none !important; } html body:not(.maintenance-mode) #sidePanel.side .battle-status { min-height: 0 !important; height: 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 0 2px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #sidePanel.side .battle-status span, html body:not(.maintenance-mode) #sidePanel.side .battle-status strong { font-size: 11px !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #sidePanel.side #log { height: 46px !important; max-height: 46px !important; min-height: 0 !important; display: grid !important; grid-auto-rows: minmax(0, 1fr) !important; gap: 3px !important; overflow: hidden !important; padding: 0 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #sidePanel.side #log article { min-height: 0 !important; padding: 3px 6px !important; display: none !important; overflow: hidden !important; border-radius: 6px !important; } html body:not(.maintenance-mode) #sidePanel.side #log article:nth-child(-n + 2) { display: block !important; } html body:not(.maintenance-mode) #sidePanel.side #log article strong, html body:not(.maintenance-mode) #sidePanel.side #log article small { font-size: 9px !important; line-height: 1.08 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* V1.27Beta-codex8 mobile battle touch rescue. Keep the report compact and out of the action hit-area; keep portraits square-cropped. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .arena { grid-template-rows: auto minmax(0, 1fr) !important; gap: 4px !important; padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)) !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle.battle:not([hidden]) { position: relative !important; z-index: 30 !important; width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; height: calc(100dvh - 20px) !important; max-height: calc(100dvh - 20px) !important; margin: 0 auto !important; padding: 0 0 calc(100px + env(safe-area-inset-bottom)) !important; box-sizing: border-box !important; display: grid !important; grid-template-rows: minmax(0, 1fr) 54px 38px 72px !important; gap: 5px !important; overflow: hidden !important; transform: none !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #battle .fighters { --phone-vs: 28px; min-height: 0 !important; height: 100% !important; max-height: none !important; align-items: start !important; justify-items: stretch !important; padding: 4px !important; gap: 4px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .combatant, html body:not(.maintenance-mode) #battle .opponent-combatant { align-self: start !important; width: 100% !important; height: auto !important; max-height: 100% !important; min-height: 0 !important; align-content: start !important; grid-template-rows: auto auto !important; gap: 5px !important; padding: 6px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .fighter { width: 100% !important; min-height: 0 !important; height: auto !important; grid-template-rows: auto auto !important; align-content: start !important; gap: 4px !important; padding: 5px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .character-face { position: relative !important; width: 100% !important; max-width: min(38vw, 156px) !important; aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; max-height: min(38vw, 156px) !important; justify-self: center !important; align-self: start !important; display: block !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .avatar { width: 100% !important; height: 100% !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; background-size: var(--art-size, cover), cover, cover !important; background-position: var(--art-position, center 12%), center, center !important; } html body:not(.maintenance-mode) #battle .role-card { position: absolute !important; left: 5px !important; right: 5px !important; bottom: 5px !important; min-height: 32px !important; max-height: 45px !important; padding: 4px 5px !important; overflow: hidden !important; z-index: 3 !important; } html body:not(.maintenance-mode) #battle .role-card > span { -webkit-line-clamp: 1 !important; } html body:not(.maintenance-mode) #battle .fighter-panel { height: 58px !important; min-height: 58px !important; max-height: 58px !important; padding: 5px !important; } html body:not(.maintenance-mode) #battle #cards, html body:not(.maintenance-mode) #battle .battle-libraries, html body:not(.maintenance-mode) #battle .utility { position: relative !important; z-index: 60 !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #battle #cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; padding: 0 4px !important; } html body:not(.maintenance-mode) #battle #cards .action-card { height: 54px !important; min-height: 54px !important; max-height: 54px !important; touch-action: manipulation !important; } html body:not(.maintenance-mode) #battle .battle-libraries, html body:not(.maintenance-mode) #battle .utility { gap: 5px !important; padding: 0 4px !important; } html body:not(.maintenance-mode) #battle .battle-libraries .library-action, html body:not(.maintenance-mode) #battle .utility button { height: 36px !important; min-height: 36px !important; max-height: 36px !important; touch-action: manipulation !important; } html body:not(.maintenance-mode) #sidePanel.side { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; z-index: 12 !important; width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; height: 86px !important; min-height: 0 !important; max-height: 86px !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: hidden !important; pointer-events: none !important; } html body:not(.maintenance-mode) #sidePanel.side section:first-child { width: 100% !important; height: 86px !important; min-height: 0 !important; max-height: 86px !important; margin: 0 !important; padding: 6px 8px !important; display: grid !important; grid-template-rows: 24px minmax(0, 1fr) !important; gap: 4px !important; overflow: hidden !important; border-radius: 10px !important; background: linear-gradient(180deg, rgba(5, 18, 36, 0.82), rgba(5, 15, 30, 0.72)), rgba(10, 30, 52, 0.68) !important; box-shadow: 0 10px 24px rgba(2, 10, 22, 0.24), inset 0 0 0 1px rgba(198, 229, 255, 0.18) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #sidePanel.side .rules, html body:not(.maintenance-mode) #sidePanel.side section:first-child > h2 { display: none !important; } html body:not(.maintenance-mode) #sidePanel.side .battle-status { min-height: 0 !important; height: 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 0 2px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #sidePanel.side .battle-status span, html body:not(.maintenance-mode) #sidePanel.side .battle-status strong { font-size: 11px !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #sidePanel.side #log { height: 46px !important; max-height: 46px !important; min-height: 0 !important; display: grid !important; grid-auto-rows: minmax(0, 1fr) !important; gap: 3px !important; overflow: hidden !important; padding: 0 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #sidePanel.side #log article { min-height: 0 !important; padding: 3px 6px !important; display: none !important; overflow: hidden !important; border-radius: 6px !important; } html body:not(.maintenance-mode) #sidePanel.side #log article:nth-child(-n + 2) { display: block !important; } html body:not(.maintenance-mode) #sidePanel.side #log article strong, html body:not(.maintenance-mode) #sidePanel.side #log article small { font-size: 9px !important; line-height: 1.08 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* V1.27Beta-codex7 final mobile lobby title/action row override. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar { left: 0 !important; right: 0 !important; top: clamp(16px, 3vh, 28px) !important; width: 100vw !important; max-width: 100vw !important; padding: 0 18px !important; justify-content: center !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar > div:first-child { width: min(92vw, 620px) !important; margin: 0 auto !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar h1 { margin-inline: auto !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #subtitle { max-width: min(92vw, 620px) !important; margin: 8px auto 0 !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions { width: min(94vw, 560px) !important; max-width: 560px !important; margin-inline: auto !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(6px, 1.8vw, 10px) !important; align-items: stretch !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > button, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { width: 100% !important; max-width: none !important; min-width: 0 !important; height: clamp(58px, 8.2vh, 72px) !important; min-height: clamp(58px, 8.2vh, 72px) !important; padding: 0 6px 1px !important; display: grid !important; align-content: center !important; justify-items: center !important; gap: 1px !important; text-align: center !important; line-height: 1.08 !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > button span { width: 100% !important; font-size: clamp(15px, 4.3vw, 20px) !important; line-height: 1.06 !important; white-space: nowrap !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > button small { width: 100% !important; font-size: clamp(8px, 2.45vw, 11px) !important; line-height: 1.08 !important; white-space: nowrap !important; text-align: center !important; } } /* V1.27Beta-codex7 final mobile lobby title/action row override. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar { left: 0 !important; right: 0 !important; top: clamp(16px, 3vh, 28px) !important; width: 100vw !important; max-width: 100vw !important; padding: 0 18px !important; justify-content: center !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar > div:first-child { width: min(92vw, 620px) !important; margin: 0 auto !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar h1 { margin-inline: auto !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #subtitle { max-width: min(92vw, 620px) !important; margin: 8px auto 0 !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions { width: min(94vw, 560px) !important; max-width: 560px !important; margin-inline: auto !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(6px, 1.8vw, 10px) !important; align-items: stretch !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > button, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { width: 100% !important; max-width: none !important; min-width: 0 !important; height: clamp(58px, 8.2vh, 72px) !important; min-height: clamp(58px, 8.2vh, 72px) !important; padding: 0 6px 1px !important; display: grid !important; align-content: center !important; justify-items: center !important; gap: 1px !important; text-align: center !important; line-height: 1.08 !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > button span { width: 100% !important; font-size: clamp(15px, 4.3vw, 20px) !important; line-height: 1.06 !important; white-space: nowrap !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > button small { width: 100% !important; font-size: clamp(8px, 2.45vw, 11px) !important; line-height: 1.08 !important; white-space: nowrap !important; text-align: center !important; } } /* V1.27Beta-codex7 mobile lobby title/action alignment. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar { left: 0 !important; right: 0 !important; top: clamp(16px, 3vh, 28px) !important; width: 100vw !important; max-width: 100vw !important; padding: 0 18px !important; justify-content: center !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar > div:first-child { width: min(92vw, 620px) !important; margin: 0 auto !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar h1 { margin-inline: auto !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #subtitle { max-width: min(92vw, 620px) !important; margin: 8px auto 0 !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions { width: min(94vw, 560px) !important; max-width: 560px !important; margin-inline: auto !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(6px, 1.8vw, 10px) !important; align-items: stretch !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > button, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { width: 100% !important; max-width: none !important; min-width: 0 !important; height: clamp(58px, 8.2vh, 72px) !important; min-height: clamp(58px, 8.2vh, 72px) !important; padding: 0 6px 1px !important; display: grid !important; align-content: center !important; justify-items: center !important; gap: 1px !important; text-align: center !important; line-height: 1.08 !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > button span { width: 100% !important; font-size: clamp(15px, 4.3vw, 20px) !important; line-height: 1.06 !important; white-space: nowrap !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > button small { width: 100% !important; font-size: clamp(8px, 2.45vw, 11px) !important; line-height: 1.08 !important; white-space: nowrap !important; text-align: center !important; } } /* V1.27Beta-codex6 lobby input text alignment: keep placeholder/value text clear of the painted crystal ornaments. */ html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-panel label { gap: clamp(12px, 1.25vw, 18px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo #nameInput { padding-left: clamp(34px, 3.2vw, 48px) !important; padding-right: clamp(18px, 2vw, 26px) !important; text-indent: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.solo #joinCode { padding-left: clamp(24px, 2.3vw, 34px) !important; padding-right: clamp(14px, 1.8vw, 22px) !important; text-indent: 0 !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo #nameInput { padding-left: 42px !important; padding-right: 18px !important; } html body:not(.maintenance-mode) #appRoot.app.solo #joinCode { padding-left: 28px !important; padding-right: 16px !important; } } /* V1.27Beta-codex6 final lobby input alignment override. */ html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-panel label { gap: clamp(12px, 1.25vw, 18px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo #nameInput { padding-left: clamp(34px, 3.2vw, 48px) !important; padding-right: clamp(18px, 2vw, 26px) !important; text-indent: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.solo #joinCode { padding-left: clamp(24px, 2.3vw, 34px) !important; padding-right: clamp(14px, 1.8vw, 22px) !important; text-indent: 0 !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo #nameInput { padding-left: 42px !important; padding-right: 18px !important; } html body:not(.maintenance-mode) #appRoot.app.solo #joinCode { padding-left: 28px !important; padding-right: 16px !important; } } body:not(.maintenance-mode) #cards .action-card::before { content: "" !important; display: block !important; position: absolute !important; left: 4.3% !important; top: 50% !important; z-index: 1 !important; width: 32% !important; max-width: 54px !important; height: auto !important; aspect-ratio: 1 !important; transform: translateY(-50%) !important; border: 1px solid color-mix(in srgb, var(--action-solid) 52%, rgba(255, 255, 255, 0.2)) !important; border-radius: 50% !important; background: radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.18), transparent 0 14%, transparent 15%), radial-gradient(circle, rgba(9, 16, 26, 0.96) 0 55%, color-mix(in srgb, var(--action-solid) 28%, #0a1019 72%) 57% 69%, transparent 72%) !important; box-shadow: inset 0 0 18px color-mix(in srgb, var(--action-solid) 20%, transparent), 0 0 14px color-mix(in srgb, var(--action-solid) 22%, transparent) !important; opacity: 1 !important; pointer-events: none !important; filter: none !important; } body:not(.maintenance-mode) #cards .action-card::after { content: "" !important; display: block !important; position: absolute !important; left: 7.35% !important; top: 50% !important; z-index: 2 !important; width: 22% !important; max-width: 38px !important; height: auto !important; aspect-ratio: 1 !important; transform: translateY(-50%) !important; background: var(--action-solid) !important; box-shadow: none !important; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.84)) drop-shadow(0 0 7px color-mix(in srgb, var(--action-solid) 48%, transparent)) !important; -webkit-mask: var(--action-icon-mask) center / contain no-repeat !important; mask: var(--action-icon-mask) center / contain no-repeat !important; opacity: 1 !important; pointer-events: none !important; } body:not(.maintenance-mode) #cards .action-card span { color: #f9fbff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92), 0 0 9px color-mix(in srgb, var(--action-solid) 34%, transparent) !important; } body:not(.maintenance-mode) #cards .action-card.attack { --action-icon-mask: var(--weapon-caster); } body:not(.maintenance-mode) #cards[data-attack-style="warrior"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="arms-warrior"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="fury-warrior"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="protection-warrior"] .action-card.attack { --action-solid: #ff6961; --action-icon-mask: var(--weapon-warrior); } body:not(.maintenance-mode) #cards[data-attack-style="death-knight"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="blood-death-knight"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="frost-death-knight"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="unholy-death-knight"] .action-card.attack { --action-solid: #8deaff; --action-icon-mask: var(--weapon-death-knight); } body:not(.maintenance-mode) #cards[data-attack-style="demon-hunter"] .action-card.attack { --action-solid: #86ff7a; --action-icon-mask: var(--weapon-demon-hunter); } body:not(.maintenance-mode) #cards[data-attack-style="paladin"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="holy-paladin"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="protection-paladin"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="retribution-paladin"] .action-card.attack { --action-solid: #ffe48a; --action-icon-mask: var(--weapon-paladin); } body:not(.maintenance-mode) #cards[data-attack-style="monk"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="brewmaster-monk"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="mistweaver-monk"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="windwalker-monk"] .action-card.attack { --action-solid: #70ffc8; --action-icon-mask: var(--weapon-monk); } body:not(.maintenance-mode) #cards[data-attack-style="druid"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="feral-druid"] .action-card.attack { --action-solid: #82ec72; --action-icon-mask: var(--weapon-druid); } body:not(.maintenance-mode) #cards[data-attack-style="balance-druid"] .action-card.attack { --action-solid: #9ad9ff; --action-icon-mask: var(--weapon-druid); } body:not(.maintenance-mode) #cards[data-attack-style="shaman"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="restoration-shaman"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="elemental-shaman"] .action-card.attack { --action-solid: #72eaff; --action-icon-mask: var(--weapon-shaman); } body:not(.maintenance-mode) #cards[data-attack-style="warlock"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="demonology-warlock"] .action-card.attack { --action-solid: #c084ff; --action-icon-mask: var(--weapon-warlock); } body:not(.maintenance-mode) #cards[data-attack-style="mage"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="arcane-mage"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="caster"] .action-card.attack { --action-solid: #8bdfff; --action-icon-mask: var(--weapon-mage); } body:not(.maintenance-mode) #cards[data-attack-style="fire-mage"] .action-card.attack { --action-solid: #ff7d39; --action-icon-mask: var(--weapon-mage); } body:not(.maintenance-mode) #cards[data-attack-style="frost-mage"] .action-card.attack { --action-solid: #75d7ff; --action-icon-mask: var(--weapon-mage); } body:not(.maintenance-mode) #cards[data-attack-style="hunter"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="beastmaster-hunter"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="marksman-hunter"] .action-card.attack { --action-solid: #a8ff82; --action-icon-mask: var(--weapon-hunter); } body:not(.maintenance-mode) #cards[data-attack-style="priest"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="discipline-priest"] .action-card.attack { --action-solid: #fff0b0; --action-icon-mask: var(--weapon-priest); } body:not(.maintenance-mode) #cards[data-attack-style="rogue"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="assassination-rogue"] .action-card.attack { --action-solid: #d8e7ff; --action-icon-mask: var(--weapon-melee); } body:not(.maintenance-mode) #cards .action-card.defend { --action-solid: #85f4e8; --action-icon-mask: url("assets/ui/action-icon-defend-solid.svg?v=v1.21Beta-solid-actions"); --action-panel-art: url("assets/ui/action-defend-panel-teal-gpt2.png?v=v1.22beta-gpt2-action-textures-1"); --action-panel-veil: linear-gradient(90deg, rgba(1, 9, 13, 0.66), rgba(7, 24, 30, 0.42) 42%, rgba(2, 8, 13, 0.74)); } body:not(.maintenance-mode) #cards .action-card.charge { --action-solid: #ffe087; --action-icon-mask: url("assets/ui/action-icon-charge-solid.svg?v=v1.21Beta-solid-actions"); --action-panel-art: url("assets/ui/action-charge-panel-gold-gpt2.png?v=v1.22beta-gpt2-action-textures-1"); --action-panel-veil: linear-gradient(90deg, rgba(15, 9, 2, 0.7), rgba(37, 24, 7, 0.42) 42%, rgba(13, 8, 2, 0.76)); } body:not(.maintenance-mode) #cards .action-card:hover:not(:disabled), body:not(.maintenance-mode) #cards .action-card:focus-visible:not(:disabled) { filter: brightness(1.1) saturate(1.08) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 -10px 24px rgba(0, 0, 0, 0.36), 0 12px 24px rgba(0, 0, 0, 0.28), 0 0 20px color-mix(in srgb, var(--action-solid) 28%, transparent) !important; } body:not(.maintenance-mode) .battle-libraries .library-action { --library-art: none; --library-glow: #8bdfff; position: relative !important; overflow: hidden !important; isolation: isolate !important; border: 1px solid color-mix(in srgb, var(--library-glow) 46%, rgba(255, 255, 255, 0.18)) !important; border-radius: 8px !important; color: #fffaf0 !important; background: linear-gradient(90deg, rgba(2, 4, 8, 0.76), rgba(8, 12, 19, 0.38) 44%, rgba(2, 4, 8, 0.78)), linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(0, 0, 0, 0.14)), var(--library-art) center / contain no-repeat, #0b111a !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -12px 24px rgba(0, 0, 0, 0.28), 0 10px 20px rgba(0, 0, 0, 0.24), 0 0 16px color-mix(in srgb, var(--library-glow) 16%, transparent) !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92), 0 0 12px color-mix(in srgb, var(--library-glow) 40%, transparent) !important; } body:not(.maintenance-mode) .battle-libraries .library-action::before { content: none !important; } body:not(.maintenance-mode) .battle-libraries .library-action span { position: relative !important; z-index: 1 !important; color: #fffaf0 !important; letter-spacing: 0 !important; } body:not(.maintenance-mode) .battle-libraries .opportunity-library-action { --library-art: url("assets/ui/library-opportunity-button-fatecards-gpt2.png?v=v1.22beta-gpt2-library-buttons-1"); --library-glow: #8bdfff; } body:not(.maintenance-mode) .battle-libraries .artifact-library-action { --library-art: url("assets/ui/library-artifact-button-relicvault-gpt2.png?v=v1.22beta-gpt2-library-buttons-1"); --library-glow: #d6b56a; } body:not(.maintenance-mode) #battle .battle-libraries .library-action { border: 1px solid color-mix(in srgb, var(--library-glow) 46%, rgba(255, 255, 255, 0.18)) !important; border-radius: 8px !important; color: #fffaf0 !important; background: linear-gradient(90deg, rgba(2, 4, 8, 0.76), rgba(8, 12, 19, 0.38) 44%, rgba(2, 4, 8, 0.78)), linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(0, 0, 0, 0.14)), var(--library-art) center / contain no-repeat, #0b111a !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -12px 24px rgba(0, 0, 0, 0.28), 0 10px 20px rgba(0, 0, 0, 0.24), 0 0 16px color-mix(in srgb, var(--library-glow) 16%, transparent) !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92), 0 0 12px color-mix(in srgb, var(--library-glow) 40%, transparent) !important; filter: none !important; } body:not(.maintenance-mode) #battle .battle-libraries .library-action span { color: #fffaf0 !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92), 0 0 12px color-mix(in srgb, var(--library-glow) 40%, transparent) !important; } body:not(.maintenance-mode) #characterPreview .preview-skill { gap: 4px !important; align-content: end !important; } body:not(.maintenance-mode) #characterPreview .preview-skill > .preview-skill-tip[hidden] { display: none !important; } body:not(.maintenance-mode) #characterPreview .preview-skill > .preview-skill-tip { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; width: fit-content !important; max-width: 100% !important; min-height: clamp(30px, 4.25vh, 36px) !important; padding: 5px 12px 6px 9px !important; color: #15110a !important; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", "Arial Black", sans-serif !important; font-size: clamp(15px, 2.05vh, 18px) !important; font-weight: 900 !important; line-height: 1.12 !important; letter-spacing: 0 !important; border: 1px solid rgba(251, 215, 112, 0.92) !important; border-left: 3px solid rgba(18, 12, 6, 0.95) !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%) !important; background: linear-gradient(90deg, rgba(255, 229, 124, 0.98), rgba(246, 200, 95, 0.94) 58%, rgba(37, 25, 12, 0.96)) !important; box-shadow: 0 7px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 248, 199, 0.64) !important; text-shadow: 0 1px 0 rgba(255, 243, 178, 0.5) !important; overflow: hidden !important; text-overflow: ellipsis !important; -webkit-font-smoothing: antialiased !important; text-rendering: geometricPrecision !important; } body:not(.maintenance-mode) #characterPreview .preview-skill > #previewModeSkill.preview-mode-skill-tip { color: #f6fff5 !important; border-color: rgba(135, 227, 173, 0.9) !important; border-left-color: rgba(55, 166, 107, 0.98) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 246, 197, 0.5), transparent 46%), linear-gradient(90deg, rgba(75, 173, 111, 0.96), rgba(29, 109, 80, 0.94) 54%, rgba(15, 44, 35, 0.96)) !important; box-shadow: 0 8px 20px rgba(18, 92, 54, 0.28), 0 0 18px rgba(88, 214, 141, 0.22), inset 0 1px 0 rgba(255, 242, 184, 0.34) !important; text-shadow: 0 1px 3px rgba(10, 39, 28, 0.84), 0 0 10px rgba(148, 244, 183, 0.34) !important; } body:not(.maintenance-mode) #characterPreview .preview-skill > #previewModeSkill.preview-mode-skill-tip.enabled { color: #fffbe8 !important; border-color: rgba(255, 210, 120, 0.96) !important; border-left-color: rgba(75, 188, 116, 0.98) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 248, 210, 0.62), transparent 46%), linear-gradient(90deg, rgba(88, 198, 121, 0.98), rgba(38, 130, 84, 0.96) 48%, rgba(18, 62, 40, 0.98)) !important; box-shadow: 0 9px 24px rgba(22, 100, 62, 0.34), 0 0 24px rgba(123, 231, 148, 0.3), inset 0 1px 0 rgba(255, 238, 194, 0.42) !important; } body:not(.maintenance-mode) #characterPreview[data-character="Xiaoyang"] .preview-skill > #previewModeSkill.preview-mode-skill-tip { color: #fff2e9 !important; border-color: rgba(255, 118, 106, 0.88) !important; border-left-color: rgba(255, 70, 74, 0.98) !important; background: radial-gradient(circle at 16% 0%, rgba(255, 233, 219, 0.54), transparent 46%), linear-gradient(90deg, rgba(255, 74, 74, 0.94), rgba(142, 18, 24, 0.94) 54%, rgba(38, 5, 9, 0.96)) !important; box-shadow: 0 8px 20px rgba(123, 10, 18, 0.34), 0 0 18px rgba(255, 70, 74, 0.24), inset 0 1px 0 rgba(255, 221, 205, 0.32) !important; text-shadow: 0 1px 3px rgba(32, 4, 7, 0.82), 0 0 10px rgba(255, 104, 82, 0.36) !important; } body:not(.maintenance-mode) #characterPreview[data-character="Lollipopz"] .preview-skill > #previewModeSkill.preview-mode-skill-tip { color: #f08fc4 !important; border-color: rgba(255, 184, 220, 0.9) !important; border-left-color: rgba(255, 142, 198, 0.96) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 48%), linear-gradient(90deg, rgba(255, 244, 251, 0.96), rgba(255, 202, 229, 0.78) 52%, rgba(219, 237, 255, 0.58)) !important; box-shadow: 0 7px 18px rgba(170, 60, 120, 0.16), 0 0 18px rgba(255, 178, 220, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88), 0 0 10px rgba(255, 188, 224, 0.42) !important; } body:not(.maintenance-mode) #characterPreview .preview-skill > .preview-skill-tip .skill-inline-icon { width: 1.18em !important; height: 1.18em !important; min-width: 18px !important; min-height: 18px !important; object-fit: contain !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 5px rgba(78, 205, 196, 0.18)) !important; } body:not(.maintenance-mode) #characterPreview .preview-skill > .preview-skill-tip .skill-inline-text { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; line-height: 1.12 !important; } body:not(.maintenance-mode) #characterPreview .preview-skill > #previewDescription { display: block !important; box-sizing: border-box !important; width: 100% !important; min-height: clamp(54px, 7.2vh, 72px) !important; max-height: clamp(72px, 11vh, 108px) !important; margin-top: 2px !important; padding: 9px 11px 10px !important; color: rgba(255, 248, 224, 0.94) !important; font-size: clamp(11px, 1.45vh, 12.5px) !important; line-height: 1.42 !important; border: 1px solid rgba(246, 200, 95, 0.42) !important; border-left: 3px solid rgba(246, 200, 95, 0.76) !important; border-radius: 6px !important; background: linear-gradient(180deg, rgba(16, 20, 30, 0.82), rgba(5, 8, 15, 0.72)), radial-gradient(circle at 12% 0%, rgba(246, 200, 95, 0.18), transparent 42%) !important; box-shadow: inset 0 1px 0 rgba(255, 248, 210, 0.12), inset 0 0 18px rgba(246, 200, 95, 0.06), 0 8px 18px rgba(0, 0, 0, 0.28) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82) !important; overflow: auto !important; scrollbar-width: thin !important; scrollbar-color: rgba(246, 200, 95, 0.76) rgba(8, 13, 22, 0.28) !important; } body:not(.maintenance-mode) #characterPreview .preview-skill > #previewDescription strong { display: inline-flex !important; align-items: center !important; margin-right: 5px !important; padding: 1px 5px 2px !important; color: #15110a !important; border-radius: 4px !important; background: linear-gradient(180deg, rgba(255, 232, 139, 0.98), rgba(224, 167, 62, 0.94)) !important; box-shadow: inset 0 1px 0 rgba(255, 250, 210, 0.58) !important; text-shadow: 0 1px 0 rgba(255, 245, 188, 0.5) !important; } @media (max-width: 560px) { html, body { width: 100%; max-width: 100vw; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; } body:not(.maintenance-mode) .app { width: 100%; max-width: 100vw; min-height: 100dvh; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 6px 8px 96px; overflow: visible; } body:not(.maintenance-mode) .app .arena { width: 100%; max-width: calc(100vw - 16px); min-height: 100dvh; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, auto); gap: 10px; align-content: start; justify-items: stretch; margin: 0 auto; padding: 10px 8px 96px; overflow: visible; transform: none; } html body:not(.maintenance-mode) .app .lobby[hidden], html body:not(.maintenance-mode) .app #roomLobby[hidden], html body:not(.maintenance-mode) .app .room-lobby[hidden], html body:not(.maintenance-mode) .app #identitySelect[hidden], html body:not(.maintenance-mode) .app .identity-select[hidden], html body:not(.maintenance-mode) .app #characterSelect[hidden], html body:not(.maintenance-mode) .app .character-select[hidden], html body:not(.maintenance-mode) .app #battle[hidden], html body:not(.maintenance-mode) .app .battle[hidden], html body:not(.maintenance-mode) .app #sidePanel[hidden], html body:not(.maintenance-mode) .app .side[hidden], html body:not(.maintenance-mode) #modeDialog.mode-dialog[hidden] { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; pointer-events: none !important; } body:not(.maintenance-mode) .vfx-demo-panel, body:not(.maintenance-mode) .vfx-demo-panel:not([hidden]) { display: none !important; } body:not(.maintenance-mode) .topbar, body:not(.maintenance-mode) .battle-status, body:not(.maintenance-mode) .character-select .status-line { width: 100%; max-width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0 auto; padding-inline: 4px; transform: none; } body:not(.maintenance-mode) .topbar h1 { max-width: calc(100vw - 32px); font-size: 32px; line-height: 1.04; white-space: normal; overflow-wrap: anywhere; text-align: left; } body:not(.maintenance-mode) #subtitle { max-width: calc(100vw - 32px); font-size: 14px; line-height: 1.35; white-space: normal; } body:not(.maintenance-mode) .app.solo .lobby, body:not(.maintenance-mode) .app.solo .lobby-shell, body:not(.maintenance-mode) .app.solo .lobby-panel { width: 100%; max-width: none; min-height: 0; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; transform: none; } body:not(.maintenance-mode) .app.solo .lobby-panel::before, body:not(.maintenance-mode) .app.solo .lobby-panel::after { content: none; display: none; } body:not(.maintenance-mode) .app.solo .mode-select, body:not(.maintenance-mode) .app.solo .lobby-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body:not(.maintenance-mode) .app.solo .mode-select button { min-height: 64px; padding: 10px 12px; border-radius: 7px; } body:not(.maintenance-mode) .app.solo .mode-select button span { font-size: 26px; line-height: 1; } body:not(.maintenance-mode) .app.solo .mode-select button small { font-size: 11px; line-height: 1.15; } body:not(.maintenance-mode) .app.solo .lobby-actions > #createBotRoom, body:not(.maintenance-mode) .app.solo .lobby-actions > #showRules { width: 100%; height: 66px; min-height: 0; max-height: 66px; padding: 0 10px; } body:not(.maintenance-mode) .app.solo .lobby-actions > button span { font-size: 22px; line-height: 1; } body:not(.maintenance-mode) .app.solo .lobby-actions > button small { font-size: 10px; line-height: 1.15; } body:not(.maintenance-mode) .app.solo .join-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; padding: 8px; } body:not(.maintenance-mode) .app.solo .join-row input, body:not(.maintenance-mode) .app.solo .join-row #joinRoom { width: 100%; min-width: 0; min-height: 44px; font-size: 15px; } body:not(.maintenance-mode) #roomLobby.room-lobby, body:not(.maintenance-mode) #identitySelect.identity-select, body:not(.maintenance-mode) #characterSelect.character-select, body:not(.maintenance-mode) .battle { width: 100%; max-width: calc(100vw - 18px); min-height: 0; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-self: start; justify-self: center; margin: 0 auto; overflow: visible; transform: none; } body:not(.maintenance-mode) #roomLobby.room-lobby { grid-template-rows: auto auto auto; padding: 10px 8px 14px; } body:not(.maintenance-mode) #roomLobby .room-lobby-head { width: 100%; max-width: 100%; margin: 0; padding: 10px; text-align: center; } body:not(.maintenance-mode) #roomLobby .room-lobby-head strong { font-size: 24px; line-height: 1.1; white-space: normal; } body:not(.maintenance-mode) #roomLobby .room-lobby-head span, body:not(.maintenance-mode) #roomLobby .room-lobby-head small { font-size: 12px; line-height: 1.25; white-space: normal; } body:not(.maintenance-mode) #roomLobby .room-seat-grid, body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="2v2"] .room-seat-grid, body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat-grid, body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat-grid { width: 100%; max-width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: center; margin: 0 auto; padding: 0; overflow: visible; transform: none; } body:not(.maintenance-mode) #roomLobby .room-seat { width: min(100%, 336px); max-width: 100%; min-width: 0; aspect-ratio: 2048 / 767; min-height: 0; height: auto; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 22px 40px; overflow: visible; transform: none; } body:not(.maintenance-mode) #roomLobby .room-seat > .room-seat-identity { width: 100%; max-width: 100%; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); font-size: 14px; line-height: 1.08; } body:not(.maintenance-mode) #roomLobby .room-seat-action { min-height: 32px; padding: 5px 10px; font-size: 12px; } body:not(.maintenance-mode) #roomLobby .room-lobby-actions { width: 100%; max-width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 2px 0 0; } body:not(.maintenance-mode) #roomLobby .room-lobby-actions #startGame { grid-column: 1 / -1; } body:not(.maintenance-mode) #roomLobby .room-lobby-actions button { width: 100%; min-height: 40px; height: auto; padding: 7px 8px; font-size: 13px; line-height: 1.1; } body:not(.maintenance-mode) #identitySelect.identity-select { max-height: none; padding: 12px; } body:not(.maintenance-mode) #identitySelect .identity-select-head strong { font-size: 24px; line-height: 1.1; } body:not(.maintenance-mode) #identitySelect .identity-layout, body:not(.maintenance-mode) #identitySelect .identity-option-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } body:not(.maintenance-mode) #identitySelect .identity-card-display, body:not(.maintenance-mode) #identitySelect .identity-action-panel { width: 100%; max-width: 100%; min-width: 0; } body:not(.maintenance-mode) #identitySelect .identity-card-art { min-height: 210px; } body:not(.maintenance-mode) #identitySelect .identity-action-panel { padding: 12px; gap: 10px; } body:not(.maintenance-mode) #identitySelect .identity-option { min-height: 72px; padding: 10px; } body:not(.maintenance-mode) #characterSelect.character-select { max-width: calc(100vw - 16px); padding: 0; } body:not(.maintenance-mode) #characterSelect .status-line { padding: 8px 10px; } body:not(.maintenance-mode) #characterSelect .status-line strong { font-size: 24px; line-height: 1.1; } body:not(.maintenance-mode) #characterSelect .status-line #leaveCharacterSelect { width: 100%; min-width: 0; justify-self: stretch; } body:not(.maintenance-mode) #characterSelect .character-select-layout { width: 100%; max-width: 100%; min-height: 0; height: auto; aspect-ratio: auto; margin: 8px auto 0; padding: 34px 12px 42px; overflow: hidden; transform: none; } body:not(.maintenance-mode) #characterSelect .character-scroll { width: 100%; max-height: none; padding: 4px; overflow: visible; } body:not(.maintenance-mode) #characterSelect .character-options { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; justify-items: center; padding: 0; } body:not(.maintenance-mode) #characterSelect .character-option { width: min(100%, 150px); max-width: 100%; height: auto; padding: 5px; border-radius: 8px; } body:not(.maintenance-mode) #characterSelect .character-option span { width: 100%; height: auto; aspect-ratio: 2.5 / 3.5; overflow: hidden; } body:not(.maintenance-mode) #characterSelect .mini-art { inset: 6px 6px 31px; border-radius: 5px 5px 3px 3px; } body:not(.maintenance-mode) #characterSelect .card-inscription { top: auto; right: 7px; bottom: 44px; width: 78px; display: grid; justify-items: end; gap: 3px; transform: none; } body:not(.maintenance-mode) #characterSelect .card-inscription small { max-width: 76px; padding: 3px 6px; font-size: 10px; line-height: 1.05; white-space: normal; overflow-wrap: anywhere; } body:not(.maintenance-mode) #characterSelect .card-inscription strong { max-width: 88px; padding: 0; font-size: 17px; line-height: 0.98; white-space: normal; overflow-wrap: anywhere; transform: none; } body:not(.maintenance-mode) #characterSelect .character-option[data-character="Rhasta"] .card-inscription strong { transform: none; } body:not(.maintenance-mode) #characterSelect .character-option em { width: calc(100% - 14px); min-height: 0; gap: 3px; align-self: end; padding: 0 7px 8px; transform: none; } body:not(.maintenance-mode) #characterSelect .character-option .skill-tip, body:not(.maintenance-mode) #characterSelect .character-option .mode-tip { max-width: 100%; padding: 3px 6px; font-size: 10px; line-height: 1.05; white-space: normal; overflow-wrap: anywhere; } body:not(.maintenance-mode) #characterPreview .preview-skill > #previewDescription { min-height: 58px !important; max-height: min(25dvh, 118px) !important; padding: 8px 9px 9px !important; font-size: clamp(10.5px, 2.8vw, 12px) !important; line-height: 1.38 !important; } body:not(.maintenance-mode) #characterPreview:not([hidden]) { width: calc(100vw - 28px); max-height: calc(100dvh - 34px); left: 50vw; top: 50dvh; transform: translate3d(-50%, -50%, 0); } body:not(.maintenance-mode) .battle { max-width: 100%; grid-template-rows: auto auto auto auto; padding: 8px 0 112px; } body:not(.maintenance-mode) .fighters, body:not(.maintenance-mode) .combatant, body:not(.maintenance-mode) .fighter, body:not(.maintenance-mode) .fighter-panel, body:not(.maintenance-mode) .team-board, body:not(.maintenance-mode) #cards, body:not(.maintenance-mode) .battle-libraries, body:not(.maintenance-mode) .utility, body:not(.maintenance-mode) #sidePanel.side { width: 100%; max-width: 100%; min-width: 0; transform: none; } body:not(.maintenance-mode) .fighters, body:not(.maintenance-mode) .combatant { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } body:not(.maintenance-mode) .fighters { padding: 8px; } body:not(.maintenance-mode) .versus { justify-self: center; margin: 0; } body:not(.maintenance-mode) #cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; } body:not(.maintenance-mode) #cards .action-card { width: 100%; max-width: 100%; min-width: 0; min-height: 72px; aspect-ratio: auto; padding: 8px 6px; } body:not(.maintenance-mode) #cards .action-card span { inset: 0; width: 100%; max-width: 100%; height: 100%; font-size: 14px; } body:not(.maintenance-mode) .battle-libraries, body:not(.maintenance-mode) .utility { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body:not(.maintenance-mode) .utility #leaveRoom { grid-column: 1 / -1; } body:not(.maintenance-mode) .battle-libraries .library-action, body:not(.maintenance-mode) .utility button { width: 100%; min-height: 40px; padding: 7px 8px; font-size: 13px; } body:not(.maintenance-mode) .team-board { min-height: 0; height: auto; padding: 8px 0; overflow: visible; } body:not(.maintenance-mode) .seat-ring { width: min(100%, 348px); max-width: calc(100vw - 28px); min-width: 0; aspect-ratio: 1 / 1; margin: 0 auto; transform: none; } body:not(.maintenance-mode) #sidePanel.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 0 96px; } body:not(.maintenance-mode) .version-badge { left: 8px; bottom: 8px; transform: scale(0.82); transform-origin: left bottom; } body:not(.maintenance-mode) .language-toggle { right: 62px; bottom: 8px; width: 50px; height: 50px; } body:not(.maintenance-mode) .music-toggle { right: 8px; bottom: 8px; width: 48px; height: 48px; } } @media (max-width: 380px) { body:not(.maintenance-mode) .topbar h1 { font-size: 28px; } body:not(.maintenance-mode) .app.solo .mode-select button { min-height: 58px; } body:not(.maintenance-mode) .app.solo .mode-select button span { font-size: 23px; } body:not(.maintenance-mode) .app.solo .join-row { grid-template-columns: minmax(0, 1fr) 96px; } body:not(.maintenance-mode) #characterSelect .character-options { gap: 8px; } } /* Keep the character-select header in the normal mobile flow. */ @media (max-width: 560px) { body:not(.maintenance-mode) #characterSelect .status-line { position: relative !important; left: auto !important; top: auto !important; right: auto !important; transform: none !important; z-index: 5 !important; width: 100% !important; grid-template-columns: minmax(0, 1fr) 90px !important; margin: 0 auto 8px !important; padding: 8px 10px !important; } body:not(.maintenance-mode) #characterSelect .status-line strong { font-size: 22px !important; line-height: 1.08 !important; } body:not(.maintenance-mode) #characterSelect .status-line span { font-size: 11px !important; line-height: 1.2 !important; } body:not(.maintenance-mode) #characterSelect .status-line #leaveCharacterSelect { width: 90px !important; min-width: 0 !important; height: 34px !important; padding: 6px 10px !important; justify-self: end !important; font-size: 12px !important; } body:not(.maintenance-mode) #characterSelect .character-select-layout { margin-top: 0 !important; } } /* Absolute EOF: battle library buttons use their own GPT-painted panels. */ body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle#showOpportunityLibraryBattle, body:not(.maintenance-mode) #battle #showArtifactLibraryBattle#showArtifactLibraryBattle { min-height: 38px !important; border: 1px solid color-mix(in srgb, var(--library-glow) 48%, rgba(255, 255, 255, 0.2)) !important; border-radius: 8px !important; color: #fffaf0 !important; -webkit-text-fill-color: currentColor !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -12px 24px rgba(0, 0, 0, 0.28), 0 10px 20px rgba(0, 0, 0, 0.24), 0 0 16px color-mix(in srgb, var(--library-glow) 18%, transparent) !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92), 0 0 12px color-mix(in srgb, var(--library-glow) 42%, transparent) !important; filter: none !important; } body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle#showOpportunityLibraryBattle { --library-glow: #8bdfff; background: linear-gradient(90deg, rgba(2, 4, 8, 0.76), rgba(8, 12, 19, 0.38) 44%, rgba(2, 4, 8, 0.78)), linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(0, 0, 0, 0.14)), url("assets/ui/library-opportunity-button-fatecards-gpt2.png?v=v1.22beta-gpt2-library-buttons-1") center / contain no-repeat, #0b111a !important; } body:not(.maintenance-mode) #battle #showArtifactLibraryBattle#showArtifactLibraryBattle { --library-glow: #d6b56a; background: linear-gradient(90deg, rgba(2, 4, 8, 0.76), rgba(12, 9, 18, 0.4) 44%, rgba(2, 4, 8, 0.8)), linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.16)), url("assets/ui/library-artifact-button-relicvault-gpt2.png?v=v1.22beta-gpt2-library-buttons-1") center / contain no-repeat, #0b111a !important; } body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle#showOpportunityLibraryBattle span, body:not(.maintenance-mode) #battle #showArtifactLibraryBattle#showArtifactLibraryBattle span { color: #fffaf0 !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92), 0 0 12px color-mix(in srgb, var(--library-glow) 42%, transparent) !important; } /* Lollipopz magic-assassin battle portrait: keep the full bright figure in frame. */ body:not(.maintenance-mode) #battle .avatar[data-character="Lollipopz"][data-mode-active="magic-assassin"] { --art-size: contain; --art-position: center 48%; background: var(--character-art, none), radial-gradient(circle at 52% 32%, rgba(255, 235, 248, 0.42), transparent 0 30%, transparent 56%), linear-gradient(180deg, rgba(46, 32, 82, 0.24), rgba(26, 12, 44, 0.34) 56%, rgba(11, 7, 21, 0.68)), #1b1534 !important; background-size: var(--art-size), cover, cover, cover !important; background-position: var(--art-position), center, center, center !important; background-repeat: no-repeat !important; } body:not(.maintenance-mode) #battle .avatar[data-character="Lollipopz"][data-mode-active="magic-assassin"]::after { background: radial-gradient(circle at 50% 15%, rgba(255, 222, 245, 0.22), transparent 0 28%, transparent 52%), linear-gradient(180deg, rgba(255, 205, 236, 0.04), transparent 38%, rgba(32, 8, 34, 0.22) 100%) !important; opacity: 0.74 !important; } /* v1.22beta phone shell repair: lock scene backgrounds, restore inner scrolling. */ @media (max-width: 560px) { html, body { width: 100% !important; height: 100% !important; min-height: 100% !important; max-width: 100vw !important; overflow: hidden !important; overscroll-behavior: none !important; touch-action: manipulation; } body:not(.maintenance-mode) { position: fixed !important; inset: 0 !important; min-height: 100dvh !important; } body:not(.maintenance-mode) .enter-screen, body:not(.maintenance-mode) .app { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; min-height: 0 !important; max-width: 100vw !important; overflow: hidden !important; overscroll-behavior: none !important; } body:not(.maintenance-mode) .app[hidden], body:not(.maintenance-mode) .app .lobby[hidden], body:not(.maintenance-mode) .app #roomLobby[hidden], body:not(.maintenance-mode) .app #identitySelect[hidden], body:not(.maintenance-mode) .app #characterSelect[hidden], body:not(.maintenance-mode) .app #battle[hidden], body:not(.maintenance-mode) .app #sidePanel[hidden], body:not(.maintenance-mode) #modeDialog.mode-dialog[hidden] { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; pointer-events: none !important; } body:not(.maintenance-mode) .app { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; padding: 0 !important; } body:not(.maintenance-mode) .app .arena { width: 100vw !important; height: 100dvh !important; min-height: 0 !important; max-width: none !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; gap: 8px !important; align-content: stretch !important; justify-items: stretch !important; margin: 0 !important; padding: max(8px, env(safe-area-inset-top)) 8px max(72px, env(safe-area-inset-bottom)) !important; overflow: hidden !important; transform: none !important; background-position: center !important; background-size: cover !important; } body:not(.maintenance-mode) .app .arena::after { position: absolute !important; inset: 0 !important; pointer-events: none !important; } body:not(.maintenance-mode) .topbar { width: 100% !important; max-width: 100% !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; gap: 8px !important; padding: 0 2px !important; margin: 0 !important; transform: none !important; } body:not(.maintenance-mode) .topbar > div:first-child { min-width: 0 !important; max-width: 100% !important; } body:not(.maintenance-mode) .topbar h1 { max-width: 100% !important; font-size: clamp(25px, 8.3vw, 34px) !important; line-height: 1 !important; white-space: normal !important; overflow-wrap: normal !important; word-break: keep-all !important; text-align: left !important; } body:not(.maintenance-mode) #subtitle { max-width: 100% !important; font-size: 12px !important; line-height: 1.25 !important; white-space: normal !important; } body:not(.maintenance-mode) .room-pill { align-self: start !important; max-width: 118px !important; padding: 5px 6px !important; gap: 3px !important; } body:not(.maintenance-mode) .room-pill strong { font-size: 18px !important; line-height: 1 !important; } body:not(.maintenance-mode) .room-pill span, body:not(.maintenance-mode) .room-pill button { font-size: 10px !important; line-height: 1 !important; } body:not(.maintenance-mode) .app.solo .arena { padding-bottom: max(66px, env(safe-area-inset-bottom)) !important; } body:not(.maintenance-mode) .app.solo .lobby { width: 100% !important; height: 100% !important; min-height: 0 !important; display: grid !important; align-items: center !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } body:not(.maintenance-mode) .app.solo .lobby-shell, body:not(.maintenance-mode) .app.solo .lobby-panel { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } body:not(.maintenance-mode) .app.solo .lobby-shell { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; } body:not(.maintenance-mode) .app.solo .lobby-panel { display: grid !important; gap: 8px !important; padding: 0 !important; overflow: hidden !important; } body:not(.maintenance-mode) .app.solo .lobby-panel label { padding: 7px 10px !important; gap: 4px !important; } body:not(.maintenance-mode) .app.solo .lobby-panel input { min-height: 42px !important; font-size: 15px !important; } body:not(.maintenance-mode) .app.solo .mode-select { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } body:not(.maintenance-mode) .app.solo .mode-select button { min-height: clamp(62px, 10.5dvh, 78px) !important; padding: 9px 11px !important; } body:not(.maintenance-mode) .app.solo .mode-select button span { font-size: clamp(22px, 7vw, 28px) !important; line-height: 1 !important; } body:not(.maintenance-mode) .app.solo .mode-select button small { font-size: 10px !important; line-height: 1.1 !important; } body:not(.maintenance-mode) .app.solo .lobby-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } body:not(.maintenance-mode) .app.solo .lobby-actions > #createBotRoom, body:not(.maintenance-mode) .app.solo .lobby-actions > #showRules { width: 100% !important; height: clamp(58px, 9.4dvh, 70px) !important; min-height: 0 !important; max-height: none !important; padding: 0 8px !important; } body:not(.maintenance-mode) .app.solo .lobby-actions > button span { font-size: clamp(19px, 6vw, 24px) !important; line-height: 1 !important; } body:not(.maintenance-mode) .app.solo .lobby-actions > button small { font-size: 10px !important; line-height: 1.1 !important; } body:not(.maintenance-mode) .app.solo .join-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 104px !important; gap: 8px !important; padding: 7px !important; } body:not(.maintenance-mode) .app.solo .join-row input, body:not(.maintenance-mode) .app.solo .join-row #joinRoom { min-width: 0 !important; min-height: 42px !important; font-size: 14px !important; } body:not(.maintenance-mode) #roomLobby.room-lobby, body:not(.maintenance-mode) #identitySelect.identity-select, body:not(.maintenance-mode) #characterSelect.character-select, body:not(.maintenance-mode) #battle.battle { width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important; justify-self: stretch !important; align-self: stretch !important; margin: 0 !important; transform: none !important; overflow: hidden !important; } body:not(.maintenance-mode) #roomLobby.room-lobby { display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; gap: 8px !important; padding: 8px 6px 6px !important; background: linear-gradient(180deg, rgba(7, 24, 38, 0.1), rgba(7, 24, 38, 0.2)), var(--room-lobby-wallpaper, var(--room-mode-bg-identity)) center / cover no-repeat !important; } body:not(.maintenance-mode) #roomLobby .room-lobby-head { min-height: 0 !important; padding: 7px 9px !important; gap: 3px !important; } body:not(.maintenance-mode) #roomLobby .room-lobby-head strong { font-size: clamp(19px, 6vw, 24px) !important; line-height: 1.05 !important; } body:not(.maintenance-mode) #roomLobby .room-lobby-head span, body:not(.maintenance-mode) #roomLobby .room-lobby-head small { font-size: 11px !important; line-height: 1.18 !important; } body:not(.maintenance-mode) #roomLobby .room-seat-grid, body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="2v2"] .room-seat-grid, body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat-grid, body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat-grid { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: minmax(74px, auto) !important; align-content: start !important; justify-items: center !important; gap: 8px !important; padding: 8px 14px !important; margin: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } body:not(.maintenance-mode) #roomLobby .room-seat { width: min(100%, 340px) !important; min-width: 0 !important; max-width: 100% !important; min-height: 74px !important; height: auto !important; aspect-ratio: auto !important; display: grid !important; place-items: center !important; padding: 14px 72px 14px 28px !important; overflow: visible !important; } body:not(.maintenance-mode) #roomLobby .room-seat > .room-seat-identity { position: relative !important; z-index: 2 !important; width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(54px, max-content) 12px minmax(0, 1fr) !important; align-items: center !important; justify-content: center !important; gap: 3px !important; text-align: left !important; font-size: 13px !important; line-height: 1 !important; } body:not(.maintenance-mode) #roomLobby .room-seat-slot, body:not(.maintenance-mode) #roomLobby .room-seat-person, body:not(.maintenance-mode) #roomLobby .room-seat-separator { min-width: 0 !important; line-height: 1 !important; } body:not(.maintenance-mode) #roomLobby .room-seat-person, body:not(.maintenance-mode) #roomLobby .room-seat-person .player-name, body:not(.maintenance-mode) #roomLobby .room-seat-person .player-name-text { max-width: 100% !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } body:not(.maintenance-mode) #roomLobby .room-seat-actions { position: absolute !important; z-index: 4 !important; right: 17px !important; top: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 0 !important; margin: 0 !important; transform: translateY(-50%) !important; pointer-events: auto !important; } body:not(.maintenance-mode) #roomLobby .room-seat-action { min-width: 52px !important; width: 52px !important; min-height: 26px !important; height: 26px !important; padding: 0 5px !important; font-size: 11px !important; line-height: 1 !important; } body:not(.maintenance-mode) #roomLobby .room-lobby-actions { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; margin: 0 !important; } body:not(.maintenance-mode) #roomLobby .room-lobby-actions #startGame { grid-column: 1 / -1 !important; } body:not(.maintenance-mode) #roomLobby .room-lobby-actions button { min-width: 0 !important; min-height: 36px !important; height: 36px !important; padding: 0 7px !important; font-size: 12px !important; line-height: 1 !important; } body:not(.maintenance-mode) #characterSelect.character-select { display: grid !important; grid-template-rows: auto auto minmax(0, 1fr) auto !important; gap: 8px !important; padding: 0 !important; } body:not(.maintenance-mode) #characterSelect .status-line { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "room leave" "status leave" !important; align-items: center !important; gap: 4px 8px !important; padding: 7px 9px !important; margin: 0 !important; } body:not(.maintenance-mode) #characterSelect .status-line span { grid-area: room !important; min-width: 0 !important; font-size: 11px !important; line-height: 1 !important; } body:not(.maintenance-mode) #characterSelect .status-line strong { grid-area: status !important; min-width: 0 !important; font-size: clamp(19px, 6vw, 24px) !important; line-height: 1.05 !important; } body:not(.maintenance-mode) #characterSelect .status-line #leaveCharacterSelect { grid-area: leave !important; width: auto !important; min-width: 78px !important; height: 34px !important; justify-self: end !important; padding: 0 8px !important; font-size: 12px !important; } body:not(.maintenance-mode) #characterSelect .select-identity-card { max-height: 86px !important; min-height: 0 !important; overflow: hidden !important; } body:not(.maintenance-mode) #characterSelect .character-select-layout { width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; margin: 0 !important; padding: 22px 12px 24px !important; overflow: hidden !important; border-radius: 8px !important; } body:not(.maintenance-mode) #characterSelect .character-scroll { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; padding: 4px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } body:not(.maintenance-mode) #characterSelect .character-options { width: 100% !important; min-height: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; align-content: start !important; justify-items: center !important; gap: 9px !important; padding: 2px 2px 18px !important; } body:not(.maintenance-mode) #characterSelect .character-option { width: min(100%, 150px) !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; padding: 5px !important; } body:not(.maintenance-mode) #characterSelect .character-option span { width: 100% !important; height: auto !important; aspect-ratio: 2.5 / 3.5 !important; } body:not(.maintenance-mode) #characterSelect > .hint { min-height: 0 !important; margin: 0 !important; padding: 5px 8px !important; font-size: 11px !important; line-height: 1.2 !important; } body:not(.maintenance-mode) #identitySelect.identity-select, body:not(.maintenance-mode) #battle.battle { overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } } @media (max-width: 380px) { body:not(.maintenance-mode) .app.solo .join-row { grid-template-columns: minmax(0, 1fr) 92px !important; } body:not(.maintenance-mode) #roomLobby .room-seat { padding-inline: 22px 66px !important; } body:not(.maintenance-mode) #characterSelect .character-options { gap: 8px !important; } } /* v1.22beta phone shell priority patch: beat older .app.solo rules. */ @media (max-width: 560px) { body:not(.maintenance-mode) #appRoot.app, body:not(.maintenance-mode) #appRoot.app.solo, body:not(.maintenance-mode) #appRoot.app.room-lobby-app, body:not(.maintenance-mode) #appRoot.app.character-select-app, body:not(.maintenance-mode) #appRoot.app.identity-select-app, body:not(.maintenance-mode) #appRoot.app.team-battle-app, body:not(.maintenance-mode) #appRoot.app.identity-battle-app { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; min-height: 0 !important; max-width: 100vw !important; padding: 0 !important; overflow: hidden !important; } body:not(.maintenance-mode) #appRoot.app .arena, body:not(.maintenance-mode) #appRoot.app.solo .arena, body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena, body:not(.maintenance-mode) #appRoot.app.character-select-app .arena, body:not(.maintenance-mode) #appRoot.app.identity-select-app .arena, body:not(.maintenance-mode) #appRoot.app.team-battle-app .arena, body:not(.maintenance-mode) #appRoot.app.identity-battle-app .arena { width: 100vw !important; height: 100dvh !important; min-height: 0 !important; max-width: 100vw !important; grid-template-rows: auto minmax(0, 1fr) !important; align-content: stretch !important; justify-content: stretch !important; justify-items: stretch !important; align-items: stretch !important; margin: 0 !important; padding: max(8px, env(safe-area-inset-top)) 8px max(68px, env(safe-area-inset-bottom)) !important; overflow: hidden !important; } body:not(.maintenance-mode) #appRoot.app.room-lobby-app .topbar, body:not(.maintenance-mode) #appRoot.app.identity-select-app .topbar { gap: 6px !important; } body:not(.maintenance-mode) #appRoot.app.room-lobby-app .topbar h1, body:not(.maintenance-mode) #appRoot.app.identity-select-app .topbar h1 { font-size: clamp(21px, 6vw, 26px) !important; line-height: 1 !important; } body:not(.maintenance-mode) #appRoot.app.room-lobby-app #subtitle, body:not(.maintenance-mode) #appRoot.app.identity-select-app #subtitle { display: none !important; } body:not(.maintenance-mode) #roomLobby.room-lobby { align-self: stretch !important; justify-self: stretch !important; } body:not(.maintenance-mode) #roomLobby.room-lobby .room-seat-action.room-seat-action { box-sizing: border-box !important; aspect-ratio: auto !important; width: 52px !important; min-width: 52px !important; max-width: 52px !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; padding: 0 5px !important; font-size: 11px !important; } body:not(.maintenance-mode) #characterSelect .character-option .mini-art { inset: 6px 6px 6px !important; border-radius: 5px !important; background-size: cover !important; background-position: center top !important; } body:not(.maintenance-mode) #characterSelect .character-option em, body:not(.maintenance-mode) #characterSelect .character-option .card-inscription { z-index: 5 !important; } body:not(.maintenance-mode) #characterSelect .character-option span::after { z-index: 3 !important; } } /* v1.22beta phone playability pass: left-side special mode title, centered room seats, compact VS battle. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-panel, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-panel, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-panel { position: relative !important; grid-template-rows: minmax(0, 1fr) clamp(168px, 21dvh, 188px) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-copy, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-copy, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-copy { position: static !important; height: clamp(168px, 21dvh, 188px) !important; max-height: clamp(168px, 21dvh, 188px) !important; grid-template-rows: auto minmax(0, 1fr) auto auto !important; gap: 5px !important; padding: 9px 10px !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogName, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogName, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogName { position: absolute !important; left: 24px !important; top: 72px !important; z-index: 8 !important; display: block !important; max-width: min(42%, 154px) !important; margin: 0 !important; padding: 3px 9px 4px !important; overflow: hidden !important; color: transparent !important; background: linear-gradient(180deg, var(--special-mode-title-a) 0%, var(--special-mode-title-b) 48%, var(--special-mode-title-c) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 0 !important; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", sans-serif !important; font-size: clamp(14px, 3.8vw, 17px) !important; font-weight: 950 !important; line-height: 1.06 !important; letter-spacing: 0 !important; text-align: left !important; text-overflow: ellipsis !important; white-space: nowrap !important; border-left: 3px solid var(--special-mode-title-b) !important; border-radius: 0 !important; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.26)) drop-shadow(0 3px 7px rgba(0, 0, 0, 0.72)) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogCharacter { position: absolute !important; left: 24px !important; top: 99px !important; z-index: 8 !important; display: block !important; width: auto !important; max-width: min(45%, 166px) !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; color: #fffefa !important; background: none !important; border: 0 !important; border-radius: 0 !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; -webkit-text-stroke: 0 !important; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", sans-serif !important; font-size: clamp(29px, 8.3vw, 39px) !important; font-weight: 950 !important; line-height: 0.96 !important; letter-spacing: 0 !important; text-align: left !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 3px 9px rgba(0, 0, 0, 0.82), 0 0 16px rgba(var(--mode-frame-rgb), 0.28) !important; filter: none !important; pointer-events: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogDescription, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogDescription, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogDescription { max-height: 70px !important; } } @media (max-width: 560px) { html body:not(.maintenance-mode) #roomLobby .room-seat { min-height: 78px !important; padding: 13px 24px 23px !important; place-items: center !important; } html body:not(.maintenance-mode) #roomLobby .room-seat > .room-seat-identity { width: 100% !important; max-width: calc(100% - 8px) !important; display: grid !important; grid-template-columns: auto auto auto !important; justify-content: center !important; justify-items: center !important; align-items: center !important; gap: 4px !important; text-align: center !important; font-size: clamp(12px, 3.5vw, 14px) !important; line-height: 1 !important; } html body:not(.maintenance-mode) #roomLobby .room-seat-slot, html body:not(.maintenance-mode) #roomLobby .room-seat-person, html body:not(.maintenance-mode) #roomLobby .room-seat-person .player-name, html body:not(.maintenance-mode) #roomLobby .room-seat-person .player-name-text { justify-self: center !important; justify-content: center !important; width: auto !important; max-width: min(32vw, 112px) !important; text-align: center !important; } html body:not(.maintenance-mode) #roomLobby .room-seat-separator { justify-self: center !important; width: auto !important; text-align: center !important; } html body:not(.maintenance-mode) #roomLobby .room-seat-actions { left: 50% !important; right: auto !important; top: auto !important; bottom: 4px !important; transform: translate(-50%, 50%) !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby .room-seat-action.room-seat-action { width: 54px !important; min-width: 54px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; font-size: 11px !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: center !important; justify-items: center !important; gap: 5px !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #startGame { grid-column: auto !important; justify-self: stretch !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions button { width: 100% !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; padding: 0 4px !important; font-size: clamp(9px, 2.65vw, 11px) !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #startGame, html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #copyRoomLobby, html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #refreshRoomLobby, html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #showRulesRoomLobby, html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #leaveRoomLobby { aspect-ratio: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 3px !important; font-size: clamp(9px, 2.65vw, 11px) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo) .arena { grid-template-rows: auto minmax(0, 1fr) !important; gap: 6px !important; padding: max(6px, env(safe-area-inset-top)) 6px max(8px, env(safe-area-inset-bottom)) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo) .topbar { min-height: 0 !important; gap: 4px !important; padding: 0 2px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo) .topbar h1 { max-width: 100% !important; margin: 0 !important; font-size: clamp(17px, 5.2vw, 22px) !important; line-height: 1 !important; letter-spacing: 0.04em !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo) #subtitle, html body:not(.maintenance-mode) #appRoot.app:not(.solo) .room-pill { display: none !important; } html body:not(.maintenance-mode) #battle.battle { width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; display: grid !important; grid-template-rows: minmax(0, 1fr) auto auto auto !important; gap: 6px !important; padding: 0 !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .control-banner[hidden], html body:not(.maintenance-mode) #battle .team-board[hidden] { display: none !important; } html body:not(.maintenance-mode) #battle .fighters { --phone-vs: 28px; width: 100% !important; height: 100% !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) var(--phone-vs) minmax(0, 1fr) !important; gap: 4px !important; align-items: stretch !important; justify-items: stretch !important; padding: 4px !important; margin: 0 !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .combatant, html body:not(.maintenance-mode) #battle .opponent-combatant { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto !important; gap: 5px !important; padding: 6px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .combatant::before { inset: -7px -6px !important; opacity: 0.78 !important; } html body:not(.maintenance-mode) #battle .combatant::after { inset: 5px !important; } html body:not(.maintenance-mode) #battle .versus { align-self: center !important; justify-self: center !important; width: var(--phone-vs) !important; height: var(--phone-vs) !important; min-width: 0 !important; min-height: 0 !important; display: grid !important; place-items: center !important; margin: 0 !important; padding: 0 !important; border-radius: 999px !important; font-size: 11px !important; line-height: 1 !important; } html body:not(.maintenance-mode) #battle .fighter { width: 100% !important; height: 100% !important; min-height: 0 !important; grid-template-rows: auto minmax(0, 1fr) !important; gap: 4px !important; padding: 5px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .fighter-head { min-height: 24px !important; gap: 4px !important; padding: 3px 5px !important; font-size: 10px !important; } html body:not(.maintenance-mode) #battle .fighter-head strong { min-width: 0 !important; overflow: hidden !important; font-size: 12px !important; white-space: nowrap !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #battle .fighter-side { gap: 3px !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #battle .character-face { min-height: 0 !important; grid-template-rows: minmax(0, 1fr) auto !important; } html body:not(.maintenance-mode) #battle .avatar { min-height: 0 !important; background-size: var(--art-size, cover), cover, cover !important; background-position: var(--art-position, center 24%), center, center !important; } html body:not(.maintenance-mode) #battle .role-card { min-height: 34px !important; padding: 5px 6px !important; } html body:not(.maintenance-mode) #battle .role-card > span { display: -webkit-box !important; overflow: hidden !important; font-size: 9px !important; line-height: 1.22 !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } html body:not(.maintenance-mode) #battle .battle-card-inscription { right: 7px !important; bottom: 40px !important; width: 72px !important; gap: 4px !important; } html body:not(.maintenance-mode) #battle .battle-card-inscription small { max-width: 72px !important; padding: 3px 5px !important; font-size: 8px !important; white-space: normal !important; } html body:not(.maintenance-mode) #battle .battle-card-inscription strong { max-width: 72px !important; font-size: 15px !important; line-height: 0.98 !important; white-space: normal !important; } html body:not(.maintenance-mode) #battle .fighter-panel { width: 100% !important; height: 70px !important; min-height: 70px !important; max-height: 70px !important; display: grid !important; grid-template-rows: auto auto auto !important; gap: 3px !important; padding: 5px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .fighter-panel .status-bar, html body:not(.maintenance-mode) #battle .fighter-panel .equipment-slots, html body:not(.maintenance-mode) #battle .fighter-panel .choice { display: none !important; } html body:not(.maintenance-mode) #battle .fighter-panel .meter-row { grid-template-columns: 28px minmax(0, 1fr) 22px !important; gap: 4px !important; font-size: 9px !important; line-height: 1 !important; } html body:not(.maintenance-mode) #battle .fighter-panel .stat-label { font-size: 9px !important; } html body:not(.maintenance-mode) #battle .fighter-panel .energy, html body:not(.maintenance-mode) #battle .fighter-panel .fatigue, html body:not(.maintenance-mode) #battle .fighter-panel .laziness { min-height: 12px !important; height: 12px !important; } html body:not(.maintenance-mode) #battle #cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; padding: 0 4px !important; } html body:not(.maintenance-mode) #battle #cards .action-card { min-height: 50px !important; height: 50px !important; padding: 0 !important; } html body:not(.maintenance-mode) #battle #cards .action-card span { font-size: 12px !important; } html body:not(.maintenance-mode) #battle .battle-libraries, html body:not(.maintenance-mode) #battle .utility { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; padding: 0 4px !important; } html body:not(.maintenance-mode) #battle .battle-libraries .library-action, html body:not(.maintenance-mode) #battle .utility button { min-height: 34px !important; height: 34px !important; padding: 0 6px !important; font-size: 11px !important; line-height: 1 !important; } html body:not(.maintenance-mode) #battle .utility #leaveRoom { grid-column: auto !important; } } @media (max-width: 560px) { html body:not(.maintenance-mode) #roomLobby.room-lobby .room-lobby-actions > button#startGame.primary { inline-size: 100% !important; min-inline-size: 0 !important; max-inline-size: 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; aspect-ratio: auto !important; padding: 0 3px !important; font-size: clamp(9px, 2.65vw, 11px) !important; line-height: 1 !important; letter-spacing: 0 !important; justify-self: stretch !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"]:not([hidden]) #modeDialogName, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"]:not([hidden]) #modeDialogName, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"]:not([hidden]) #modeDialogName { position: absolute !important; left: clamp(30px, 7.4vw, 46px) !important; top: calc(clamp(168px, 21dvh, 188px) - 100dvh + 98px) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"]:not([hidden]) #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"]:not([hidden]) #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"]:not([hidden]) #modeDialogCharacter { position: absolute !important; left: clamp(30px, 7.4vw, 46px) !important; top: calc(clamp(168px, 21dvh, 188px) - 100dvh + 125px) !important; } } /* v1.22beta desktop room seats: center the label around the separator and pin actions under the center gem. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #roomLobby .room-seat { position: relative !important; display: grid !important; place-items: center !important; align-content: center !important; justify-content: center !important; overflow: visible !important; } html body:not(.maintenance-mode) #roomLobby .room-seat > .room-seat-identity { position: relative !important; z-index: 3 !important; width: clamp(148px, 13.8vw, 190px) !important; min-width: clamp(148px, 13.8vw, 190px) !important; max-width: calc(100% - clamp(54px, 5vw, 92px)) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(12px, 1.1vw, 16px) minmax(0, 1fr) !important; align-items: center !important; justify-content: center !important; justify-items: center !important; column-gap: clamp(6px, 0.58vw, 10px) !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; transform: translateY(-3px) !important; overflow: visible !important; color: #17324d !important; font-size: clamp(14px, 1.12vw, 16px) !important; line-height: 1.08 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-slot, html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-person, html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-person .player-name, html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-person .player-name-text { justify-self: center !important; justify-content: center !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; text-align: center !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: #17324d !important; font-size: clamp(14px, 1.12vw, 16px) !important; line-height: 1.08 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-slot { justify-self: end !important; text-align: right !important; } html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-person, html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-person .player-name, html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-person .player-name-text { justify-self: start !important; text-align: left !important; } html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-separator { justify-self: center !important; width: auto !important; min-width: 0 !important; text-align: center !important; transform: none !important; color: #b8892f !important; font-size: clamp(18px, 1.45vw, 22px) !important; line-height: 1 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) #roomLobby .room-seat-actions { position: absolute !important; z-index: 5 !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(7px, 0.72vw, 12px) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; transform: translateX(-50%) !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #roomLobby .room-seat-action { width: clamp(58px, 4.6vw, 76px) !important; min-width: clamp(58px, 4.6vw, 76px) !important; max-width: clamp(58px, 4.6vw, 76px) !important; height: clamp(24px, 2vw, 30px) !important; min-height: clamp(24px, 2vw, 30px) !important; max-height: clamp(24px, 2vw, 30px) !important; padding: 0 8px !important; font-size: clamp(10px, 0.82vw, 12px) !important; line-height: 1 !important; } } /* v1.22beta desktop character select: single painted frame, centered header, two complete rows on 16:9. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #characterSelect.character-select { --select-gap: clamp(12px, 1.8vh, 16px) !important; --select-frame-outset-x: clamp(10px, 1vw, 14px) !important; --select-frame-outset-y: clamp(10px, 1.35vh, 14px) !important; --select-card-h: clamp(224px, calc((100dvh - 236px) / 2), 250px) !important; --select-card-w: calc(var(--select-card-h) * 5 / 7) !important; --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important; --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important; width: min( calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3 + clamp(130px, 12vw, 170px)), calc(100vw - 52px), 1160px ) !important; height: min(740px, calc(100dvh - 28px)) !important; max-width: calc(100vw - 52px) !important; max-height: calc(100dvh - 28px) !important; align-self: center !important; justify-self: center !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: clamp(52px, 7vh, 58px) minmax(0, 1fr) auto !important; gap: clamp(12px, 1.7vh, 16px) !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.maintenance-mode) #characterSelect.character-select::before, html body:not(.maintenance-mode) #characterSelect.character-select::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #characterSelect .status-line { width: min(760px, 100%) !important; height: clamp(52px, 7vh, 58px) !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 clamp(12px, 1.8vw, 20px) !important; display: grid !important; grid-template-columns: minmax(130px, 1fr) minmax(0, 1.5fr) minmax(130px, 1fr) !important; align-items: center !important; justify-items: center !important; gap: 10px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(90deg, rgba(16, 44, 70, 0.78), rgba(22, 59, 88, 0.52) 50%, rgba(16, 44, 70, 0.78)), rgba(12, 34, 56, 0.66) !important; box-shadow: 0 12px 22px rgba(5, 28, 50, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important; transform: none !important; } html body:not(.maintenance-mode) #characterSelect .status-line span { justify-self: start !important; max-width: 100% !important; min-width: 0 !important; text-align: left !important; color: rgba(239, 248, 255, 0.88) !important; font-size: clamp(11px, 0.88vw, 13px) !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #characterSelect .status-line strong { justify-self: center !important; max-width: 100% !important; min-width: 0 !important; text-align: center !important; color: rgba(244, 251, 255, 0.96) !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(18px, 1.7vw, 24px) !important; line-height: 1.05 !important; white-space: nowrap !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34), 0 0 10px rgba(214, 234, 248, 0.18), 0 2px 5px rgba(5, 23, 40, 0.24) !important; } html body:not(.maintenance-mode) #characterSelect .status-line #leaveCharacterSelect { justify-self: end !important; width: clamp(116px, 9.8vw, 142px) !important; min-width: 0 !important; max-width: 100% !important; height: clamp(34px, 4.8vh, 42px) !important; min-height: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: 0 !important; clip-path: none !important; color: #153d5c !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(12px, 0.95vw, 14px) !important; line-height: 1 !important; background: url("assets/ui/room-action-button-crystal-glass-gpt2.png") center / contain no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 7px 12px rgba(5, 28, 50, 0.16)) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important; } html body:not(.maintenance-mode) #characterSelect .status-line #leaveCharacterSelect::before, html body:not(.maintenance-mode) #characterSelect .status-line #leaveCharacterSelect::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { position: relative !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; margin: 0 auto !important; padding: clamp(50px, 6.2vh, 60px) clamp(60px, 6.2vw, 82px) !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: url("assets/ui/character-select-panel-crystal-glass-gpt2.png") center / contain no-repeat !important; box-shadow: 0 24px 54px rgba(16, 52, 78, 0.2), 0 0 28px rgba(114, 207, 255, 0.12) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::before { content: "" !important; position: absolute !important; z-index: 0 !important; inset: clamp(50px, 6.2vh, 60px) clamp(60px, 6.2vw, 82px) !important; display: block !important; border: 1px solid rgba(216, 235, 247, 0.68) !important; border-radius: 6px !important; background: radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.72), transparent 50%), linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 250, 255, 0.82) 52%, rgba(229, 243, 252, 0.74)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -18px 34px rgba(139, 199, 231, 0.1) !important; opacity: 0.92 !important; pointer-events: none !important; filter: none !important; mask-image: none !important; -webkit-mask-image: none !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #characterSelect .character-scroll { position: relative !important; z-index: 2 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; padding: 0 !important; overflow-x: visible !important; overflow-y: auto !important; scrollbar-gutter: stable !important; } html body:not(.maintenance-mode) #characterSelect .character-options { width: 100% !important; min-height: 0 !important; display: grid !important; grid-template-columns: repeat(4, var(--select-card-outer-w)) !important; grid-auto-rows: var(--select-card-outer-h) !important; justify-content: center !important; justify-items: center !important; align-content: start !important; gap: var(--select-gap) !important; padding: 0 0 clamp(10px, 1.6vh, 14px) !important; margin: 0 auto !important; overflow: visible !important; } html body:not(.maintenance-mode) #characterSelect .character-option { width: var(--select-card-outer-w) !important; height: var(--select-card-outer-h) !important; min-width: 0 !important; min-height: 0 !important; padding: var(--select-frame-outset-y) var(--select-frame-outset-x) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #characterSelect .character-option::before, html body:not(.maintenance-mode) #characterSelect .character-option::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #characterSelect .character-option span { position: relative !important; width: var(--select-card-w) !important; height: var(--select-card-h) !important; aspect-ratio: auto !important; display: block !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 8px !important; background: rgba(10, 18, 28, 0.82) !important; box-shadow: 0 14px 28px rgba(6, 23, 40, 0.24) !important; } html body:not(.maintenance-mode) #characterSelect .character-option span::before { content: "" !important; position: absolute !important; z-index: 5 !important; inset: calc(var(--select-frame-outset-y) * -1) calc(var(--select-frame-outset-x) * -1) !important; display: block !important; border: 0 !important; background: var(--arcane-card-frame) center / contain no-repeat !important; opacity: 0.92 !important; filter: drop-shadow(0 0 6px rgba(99, 200, 255, 0.2)) drop-shadow(0 0 10px rgba(240, 223, 163, 0.14)) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #characterSelect .character-option span::after { content: "" !important; position: absolute !important; z-index: 1 !important; inset: 0 !important; border-radius: inherit !important; background: linear-gradient(180deg, transparent 18%, rgba(8, 26, 43, 0.06) 46%, rgba(7, 21, 36, 0.72) 100%), radial-gradient(circle at 50% 82%, rgba(99, 200, 255, 0.12), transparent 42%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #characterSelect .mini-art { position: absolute !important; z-index: 0 !important; inset: 0 !important; border-radius: 8px !important; background-position: center top !important; background-size: cover !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #characterSelect .card-inscription { z-index: 4 !important; right: clamp(8px, 0.8vw, 12px) !important; top: 50% !important; bottom: auto !important; width: clamp(90px, 8vw, 108px) !important; transform: translateY(-50%) !important; } html body:not(.maintenance-mode) #characterSelect .card-inscription small { max-width: 100% !important; font-size: clamp(10px, 0.92vw, 12px) !important; line-height: 1.05 !important; white-space: normal !important; } html body:not(.maintenance-mode) #characterSelect .card-inscription strong { max-width: 100% !important; font-size: clamp(20px, 1.9vw, 25px) !important; line-height: 0.98 !important; white-space: normal !important; } html body:not(.maintenance-mode) #characterSelect .character-option em { position: absolute !important; z-index: 6 !important; left: clamp(9px, 0.8vw, 12px) !important; right: auto !important; bottom: clamp(9px, 0.95vw, 13px) !important; width: min(72%, 142px) !important; min-height: 0 !important; display: grid !important; justify-items: start !important; align-content: end !important; gap: clamp(3px, 0.55vh, 5px) !important; padding: 0 !important; margin: 0 !important; transform: none !important; pointer-events: none !important; } html body:not(.maintenance-mode) #characterSelect .character-option .skill-tip, html body:not(.maintenance-mode) #characterSelect .character-option .mode-tip { max-width: 100% !important; width: fit-content !important; min-height: 0 !important; padding: 3px 8px 4px 7px !important; color: #ffd56b !important; font-size: clamp(11px, 0.92vw, 13px) !important; line-height: 1.08 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #characterSelect .character-option .mode-tip { color: #163047 !important; } html body:not(.maintenance-mode) #characterSelect .character-option.placeholder { opacity: 0.72 !important; } html body:not(.maintenance-mode) #characterSelect > .hint { margin: 0 !important; padding: 0 !important; min-height: 0 !important; } } /* v1.22beta Rhasta devour-world select-card crop and food-color skill badges. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #characterSelect .mini-art[data-character="Rhasta"][data-mode-active="devour-world"] { background-size: cover, cover, cover !important; background-position: 50% 100%, center, center !important; } html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Rhasta"] .mode-tip, html body:not(.maintenance-mode) #characterPreview[data-character="Rhasta"] #previewModeButton { color: #fff3bd !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(226, 168, 62, 0.88) !important; border-left: 3px solid rgba(45, 122, 95, 0.98) !important; background: radial-gradient(circle at 16% 0%, rgba(255, 248, 213, 0.54), transparent 46%), linear-gradient(90deg, rgba(45, 122, 95, 0.94), rgba(217, 155, 56, 0.92) 56%, rgba(82, 49, 15, 0.96)) !important; box-shadow: 0 8px 20px rgba(73, 55, 18, 0.28), 0 0 18px rgba(226, 168, 62, 0.22), inset 0 1px 0 rgba(255, 247, 204, 0.38) !important; text-shadow: 0 1px 3px rgba(34, 18, 5, 0.72), 0 0 10px rgba(255, 218, 116, 0.28) !important; } html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Rhasta"] .mode-tip.enabled, html body:not(.maintenance-mode) #characterPreview[data-character="Rhasta"] #previewModeButton.enabled { color: #fff8cf !important; border-color: rgba(255, 214, 104, 0.96) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 250, 221, 0.62), transparent 46%), linear-gradient(90deg, rgba(50, 137, 103, 0.98), rgba(224, 164, 57, 0.98) 50%, rgba(108, 65, 18, 0.98)) !important; box-shadow: 0 9px 24px rgba(78, 62, 22, 0.34), 0 0 24px rgba(226, 168, 62, 0.32), inset 0 1px 0 rgba(255, 244, 194, 0.42) !important; } } /* v1.22beta deploy polish: lock desktop select geometry and wrap special-mode portraits in colored light. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #characterSelect.character-select { position: relative !important; display: block !important; width: min(1120px, calc(100vw - 42px)) !important; height: min(740px, calc(100dvh - 28px)) !important; max-width: calc(100vw - 42px) !important; max-height: calc(100dvh - 28px) !important; margin: 14px auto !important; padding: 0 !important; overflow: visible !important; } html body:not(.maintenance-mode) #characterSelect .status-line { position: absolute !important; left: 50% !important; right: auto !important; top: 0 !important; bottom: auto !important; z-index: 12 !important; width: min(760px, calc(100% - 120px)) !important; min-height: clamp(52px, 7vh, 58px) !important; margin: 0 !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { position: absolute !important; left: 0 !important; right: 0 !important; top: calc(clamp(52px, 7vh, 58px) + clamp(12px, 1.7vh, 16px)) !important; bottom: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 auto !important; } html body:not(.maintenance-mode) #characterSelect .character-scroll { height: 100% !important; max-height: 100% !important; min-height: 0 !important; } html body:not(.maintenance-mode) #characterSelect .mini-art[data-character="Rhasta"][data-mode-active="devour-world"] { background-size: cover, cover, cover !important; background-position: 50% 100%, center, center !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-art, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art { position: relative !important; overflow: visible !important; isolation: isolate !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-art { box-shadow: 0 20px 42px rgba(73, 18, 24, 0.24), 0 0 26px rgba(255, 86, 82, 0.3), inset 0 0 0 1px rgba(255, 217, 201, 0.36) !important; filter: drop-shadow(0 0 18px rgba(255, 77, 83, 0.32)) drop-shadow(0 0 28px rgba(255, 176, 126, 0.2)) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art { box-shadow: 0 20px 42px rgba(45, 88, 55, 0.24), 0 0 26px rgba(226, 168, 62, 0.32), inset 0 0 0 1px rgba(255, 239, 179, 0.4) !important; filter: drop-shadow(0 0 18px rgba(226, 168, 62, 0.34)) drop-shadow(0 0 28px rgba(52, 142, 104, 0.22)) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-art::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-art::after, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art::after { content: "" !important; position: absolute !important; display: block !important; pointer-events: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-art::before { z-index: 2 !important; inset: -10px !important; border: 2px solid rgba(255, 119, 96, 0.86) !important; border-radius: 18px !important; background: linear-gradient(90deg, rgba(255, 74, 82, 0.86), transparent 20% 80%, rgba(255, 74, 82, 0.76)), linear-gradient(180deg, rgba(255, 224, 205, 0.82), transparent 17% 83%, rgba(255, 94, 77, 0.72)) !important; box-shadow: 0 0 16px rgba(255, 67, 79, 0.3), 0 0 30px rgba(255, 166, 106, 0.18), inset 0 0 18px rgba(255, 215, 194, 0.22) !important; mix-blend-mode: screen !important; opacity: 0.92 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art::before { z-index: 2 !important; inset: -10px !important; border: 2px solid rgba(230, 178, 70, 0.88) !important; border-radius: 18px !important; background: linear-gradient(90deg, rgba(47, 135, 101, 0.78), transparent 20% 80%, rgba(226, 168, 62, 0.78)), linear-gradient(180deg, rgba(255, 239, 179, 0.72), transparent 17% 83%, rgba(42, 122, 94, 0.68)) !important; box-shadow: 0 0 16px rgba(226, 168, 62, 0.32), 0 0 30px rgba(55, 148, 109, 0.18), inset 0 0 18px rgba(255, 239, 179, 0.24) !important; mix-blend-mode: screen !important; opacity: 0.94 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-art::after { z-index: 1 !important; inset: -20px !important; border-radius: 24px !important; background: radial-gradient(ellipse at 50% 18%, rgba(255, 215, 193, 0.32), transparent 42%), radial-gradient(ellipse at 50% 78%, rgba(255, 64, 86, 0.28), transparent 54%) !important; mix-blend-mode: screen !important; opacity: 0.76 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art::after { z-index: 1 !important; inset: -20px !important; border-radius: 24px !important; background: radial-gradient(ellipse at 50% 18%, rgba(255, 232, 164, 0.34), transparent 42%), radial-gradient(ellipse at 50% 78%, rgba(38, 135, 98, 0.26), transparent 54%) !important; mix-blend-mode: screen !important; opacity: 0.78 !important; } } /* v1.22beta deploy polish: lighter title treatment on cover and app chrome. */ html body:not(.maintenance-mode) .enter-gate { display: grid !important; place-content: center !important; place-items: center !important; text-align: center !important; text-shadow: 0 1px 3px rgba(5, 14, 32, 0.4), 0 0 10px rgba(246, 200, 95, 0.16) !important; } html body:not(.maintenance-mode) .enter-gate strong { place-self: center !important; width: clamp(300px, 32vw, 410px) !important; margin: 0 !important; background-position: center !important; filter: drop-shadow(0 1px 2px rgba(9, 22, 48, 0.2)) drop-shadow(0 0 8px rgba(246, 200, 95, 0.14)) !important; transform: translate(0, 0) !important; } html body:not(.maintenance-mode) #appRoot.app .topbar > div:first-child { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; } html body:not(.maintenance-mode) #appRoot.app .topbar h1 { width: fit-content !important; max-width: min(680px, calc(100vw - 34px)) !important; margin: 0 0 4px !important; color: transparent !important; -webkit-text-fill-color: transparent !important; background: linear-gradient(180deg, #fffdf0 0%, #ffe6a4 38%, #dba64b 64%, #78ecff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; font-weight: 950 !important; letter-spacing: 0 !important; line-height: 1.04 !important; text-shadow: none !important; filter: drop-shadow(0 1px 1px rgba(22, 40, 62, 0.22)) drop-shadow(0 0 10px rgba(255, 226, 144, 0.18)) !important; -webkit-text-stroke: 0 transparent !important; } html body:not(.maintenance-mode) #appRoot.app.solo .topbar h1 { font-size: clamp(28px, 3.2vw, 38px) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo) .topbar h1 { font-size: clamp(24px, 2.8vw, 34px) !important; } html body:not(.maintenance-mode) #appRoot.app #subtitle { color: rgba(249, 252, 255, 0.88) !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 2px rgba(13, 27, 45, 0.34), 0 0 8px rgba(255, 232, 164, 0.12) !important; filter: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) .enter-gate strong { width: clamp(148px, 41vw, 184px) !important; } html body:not(.maintenance-mode) #appRoot.app .topbar h1, html body:not(.maintenance-mode) #appRoot.app.solo .topbar h1, html body:not(.maintenance-mode) #appRoot.app:not(.solo) .topbar h1 { max-width: calc(100vw - 24px) !important; font-size: clamp(20px, 5.8vw, 26px) !important; line-height: 1.02 !important; white-space: nowrap !important; } } /* v1.22beta deploy polish: keep bottom-right utility controls frameless. */ html body:not(.maintenance-mode) .language-toggle, html body:not(.maintenance-mode) .music-toggle { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; appearance: none !important; -webkit-appearance: none !important; } html body:not(.maintenance-mode) .language-toggle::before, html body:not(.maintenance-mode) .language-toggle::after, html body:not(.maintenance-mode) .music-toggle::before, html body:not(.maintenance-mode) .music-toggle::after { content: none !important; display: none !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.maintenance-mode) .language-toggle:focus, html body:not(.maintenance-mode) .language-toggle:focus-visible, html body:not(.maintenance-mode) .music-toggle:focus, html body:not(.maintenance-mode) .music-toggle:focus-visible { outline: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) .language-toggle img, html body:not(.maintenance-mode) .music-toggle img { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.44)) drop-shadow(0 0 7px rgba(255, 232, 164, 0.12)) !important; } html body:not(.maintenance-mode) .language-code { right: 2px !important; bottom: 2px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: rgba(255, 248, 219, 0.92) !important; font-size: 10px !important; line-height: 1 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72), 0 0 5px rgba(255, 232, 164, 0.18) !important; } /* V1.27Beta lobby changelog plaque. */ html body:not(.maintenance-mode) .app.solo .lobby-copy { position: fixed !important; z-index: 8 !important; left: clamp(34px, 5.2vw, 78px) !important; top: clamp(190px, 28vh, 240px) !important; width: min(292px, 21vw) !important; min-width: 248px !important; max-width: calc(100vw - 760px) !important; display: block !important; padding: 0 !important; margin: 0 !important; pointer-events: none !important; } html body:not(.maintenance-mode) .app.solo .lobby-copy > span, html body:not(.maintenance-mode) .app.solo .lobby-copy > strong, html body:not(.maintenance-mode) .app.solo .lobby-badges { display: none !important; } html body:not(.maintenance-mode) .app.solo .version-notes { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-top: 0 !important; padding: clamp(12px, 1.5vw, 16px) clamp(14px, 1.8vw, 18px) !important; border: 1px solid rgba(255, 235, 174, 0.58) !important; border-radius: 8px !important; color: #fff8dd !important; background: radial-gradient(circle at 12% 0%, rgba(255, 247, 215, 0.18), transparent 46%), linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(80, 179, 206, 0.1) 46%, rgba(45, 72, 92, 0.18)), rgba(13, 33, 48, 0.34) !important; box-shadow: 0 14px 30px rgba(7, 20, 34, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 18px rgba(255, 232, 164, 0.08) !important; backdrop-filter: blur(8px) saturate(1.08) !important; -webkit-backdrop-filter: blur(8px) saturate(1.08) !important; } html body:not(.maintenance-mode) .app.solo .version-notes span, html body:not(.maintenance-mode) .app.solo .version-notes strong, html body:not(.maintenance-mode) .app.solo .version-notes p { display: block !important; margin: 0 !important; letter-spacing: 0 !important; text-align: left !important; } html body:not(.maintenance-mode) .app.solo .version-notes span { width: fit-content !important; padding: 2px 8px 3px !important; border: 1px solid rgba(255, 236, 179, 0.54) !important; border-radius: 999px !important; color: #3c2a10 !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(10px, 0.85vw, 12px) !important; font-weight: 950 !important; line-height: 1 !important; background: linear-gradient(180deg, rgba(255, 248, 220, 0.92), rgba(226, 176, 78, 0.88)) !important; box-shadow: 0 4px 10px rgba(76, 44, 10, 0.12) !important; text-shadow: 0 1px 0 rgba(255, 252, 232, 0.62) !important; } html body:not(.maintenance-mode) .app.solo .version-notes strong { margin-top: 8px !important; color: #fff7d7 !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(15px, 1.4vw, 18px) !important; font-weight: 950 !important; line-height: 1.12 !important; text-shadow: 0 1px 2px rgba(23, 38, 54, 0.34), 0 0 8px rgba(255, 232, 164, 0.14) !important; } html body:not(.maintenance-mode) .app.solo .version-notes p { margin-top: 7px !important; max-width: 38em !important; color: rgba(245, 252, 255, 0.9) !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(12px, 1.05vw, 14px) !important; font-weight: 760 !important; line-height: 1.48 !important; text-shadow: 0 1px 2px rgba(12, 26, 42, 0.34) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) .app.solo .lobby-copy { position: static !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; order: -1 !important; margin: 0 0 8px !important; pointer-events: none !important; } html body:not(.maintenance-mode) .app.solo .version-notes { width: 100% !important; margin-top: 10px !important; padding: 10px 12px !important; } html body:not(.maintenance-mode) .app.solo .version-notes p { font-size: 12px !important; line-height: 1.35 !important; } } @media (min-width: 721px) and (max-width: 1180px) { html body:not(.maintenance-mode) .app.solo .lobby-copy { display: none !important; } } /* V1.27Beta desktop room placement: keep the room page visible and centered under the topbar. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena { position: relative !important; grid-template-rows: auto minmax(0, 1fr) !important; align-items: stretch !important; justify-items: stretch !important; overflow: hidden !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) { position: absolute !important; z-index: 4 !important; left: 50% !important; top: calc(50% + 34px) !important; width: min(1260px, calc(100vw - 52px)) !important; max-width: calc(100vw - 52px) !important; max-height: calc(100dvh - 126px) !important; margin: 0 !important; transform: translate(-50%, -50%) !important; align-self: auto !important; justify-self: auto !important; align-content: center !important; overflow: visible !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-head { margin-bottom: clamp(10px, 1.5vh, 16px) !important; } html body:not(.maintenance-mode) #roomLobby .room-seat-grid { max-height: calc(100dvh - 260px) !important; overflow: visible !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions { margin-top: clamp(10px, 1.5vh, 16px) !important; } html body:not(.maintenance-mode) #roomLobby .room-team-versus { width: clamp(58px, 5vw, 78px) !important; height: clamp(58px, 5vw, 78px) !important; min-width: 0 !important; display: grid !important; place-items: center !important; align-self: center !important; justify-self: center !important; border: 0 !important; border-radius: 999px !important; color: #fff7d8 !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(22px, 2vw, 30px) !important; font-weight: 950 !important; line-height: 1 !important; background: radial-gradient(circle at 50% 36%, rgba(255, 247, 216, 0.36), transparent 44%), linear-gradient(180deg, rgba(40, 105, 139, 0.82), rgba(20, 54, 83, 0.92)) !important; box-shadow: 0 12px 26px rgba(16, 42, 72, 0.18), inset 0 0 0 1px rgba(255, 247, 216, 0.22) !important; text-shadow: 0 1px 2px rgba(9, 24, 42, 0.62), 0 0 10px rgba(255, 232, 164, 0.22) !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="1v1"] .room-seat-grid { grid-template-columns: minmax(300px, 360px) clamp(66px, 7vw, 92px) minmax(300px, 360px) !important; grid-template-rows: minmax(108px, auto) !important; gap: clamp(14px, 1.8vw, 28px) !important; max-width: 900px !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="1v1"] .room-seat { width: clamp(300px, 26vw, 360px) !important; height: auto !important; aspect-ratio: 2048 / 767 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="2v2"] .room-seat-grid { grid-template-columns: minmax(270px, 320px) clamp(66px, 7vw, 90px) minmax(270px, 320px) !important; grid-template-rows: repeat(2, minmax(98px, auto)) !important; gap: clamp(10px, 1.4vw, 18px) clamp(14px, 1.8vw, 26px) !important; max-width: 780px !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="2v2"] .room-seat { width: clamp(270px, 23vw, 320px) !important; height: auto !important; aspect-ratio: 2048 / 767 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="2v2"] .room-seat:nth-child(1) { grid-area: 1 / 1 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="2v2"] .room-seat:nth-child(2) { grid-area: 2 / 1 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="2v2"] .room-team-versus { grid-area: 1 / 2 / 3 / 3 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="2v2"] .room-seat:nth-child(4) { grid-area: 1 / 3 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="2v2"] .room-seat:nth-child(5) { grid-area: 2 / 3 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat-grid { grid-template-columns: repeat(2, minmax(238px, 260px)) clamp(60px, 6vw, 78px) repeat(2, minmax(238px, 260px)) !important; grid-template-rows: repeat(2, minmax(88px, auto)) !important; gap: clamp(10px, 1.15vw, 16px) clamp(8px, 1vw, 14px) !important; max-width: 1120px !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat { width: clamp(238px, 19vw, 260px) !important; height: auto !important; aspect-ratio: 2048 / 767 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat:nth-child(1) { grid-area: 1 / 1 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat:nth-child(2) { grid-area: 2 / 1 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat:nth-child(3) { grid-area: 1 / 2 / 3 / 3 !important; align-self: center !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-team-versus { grid-area: 1 / 3 / 3 / 4 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat:nth-child(5) { grid-area: 1 / 4 / 3 / 5 !important; align-self: center !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat:nth-child(6) { grid-area: 1 / 5 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat:nth-child(7) { grid-area: 2 / 5 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat-grid { grid-template-columns: repeat(5, minmax(190px, 218px)) !important; grid-template-rows: repeat(2, minmax(72px, auto)) !important; gap: clamp(9px, 1vw, 14px) !important; max-width: 1130px !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat { width: clamp(190px, 16vw, 218px) !important; height: auto !important; aspect-ratio: 2048 / 767 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat > .room-seat-identity { width: calc(100% - 22px) !important; min-width: 0 !important; max-width: calc(100% - 22px) !important; font-size: clamp(12px, 0.95vw, 14px) !important; } } /* V1.27Beta character select: use the viewport instead of inheriting old grid rows. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) { position: fixed !important; z-index: 18 !important; left: 50% !important; top: 14px !important; width: min(1120px, calc(100vw - 42px)) !important; height: min(740px, calc(100dvh - 28px)) !important; max-width: calc(100vw - 42px) !important; max-height: calc(100dvh - 28px) !important; margin: 0 !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app .topbar { visibility: hidden !important; pointer-events: none !important; } } /* V1.27Beta: final action, character select, mode glow, and battle fit overrides. */ body:not(.maintenance-mode) #cards[data-attack-style="rogue"] .action-card.attack, body:not(.maintenance-mode) #cards[data-attack-style="assassination-rogue"] .action-card.attack { --action-solid: #d8e7ff; --action-panel-art: url("assets/ui/action_buttons/v125/attack/rogue/assassination.png?v=V1.27Beta-action-alpha-seamfix2"); background: linear-gradient(90deg, rgba(3, 7, 13, 0.1), rgba(9, 17, 27, 0.02) 48%, rgba(3, 7, 13, 0.14)), var(--action-panel-art) center / contain no-repeat, #0c121a !important; border: 0 !important; box-shadow: 0 10px 20px rgba(4, 12, 22, 0.24), 0 0 14px rgba(205, 226, 255, 0.12) !important; } body:not(.maintenance-mode) #cards[data-attack-style="rogue"] .action-card.attack::before, body:not(.maintenance-mode) #cards[data-attack-style="rogue"] .action-card.attack::after, body:not(.maintenance-mode) #cards[data-attack-style="assassination-rogue"] .action-card.attack::before, body:not(.maintenance-mode) #cards[data-attack-style="assassination-rogue"] .action-card.attack::after { content: none !important; display: none !important; } body:not(.maintenance-mode) #cards .action-card.defend, body:not(.maintenance-mode) #cards .action-card.charge { --action-panel-art: none !important; border-color: color-mix(in srgb, var(--action-solid) 34%, rgba(255, 255, 255, 0.16)) !important; background: radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--action-solid) 16%, transparent) 0 16%, transparent 31%), linear-gradient(90deg, rgba(7, 16, 24, 0.88), rgba(12, 25, 36, 0.78) 44%, rgba(5, 12, 20, 0.92)), linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 36%, color-mix(in srgb, var(--action-solid) 10%, rgba(0, 0, 0, 0.24))) !important; } body:not(.maintenance-mode) #cards .action-card.defend::before, body:not(.maintenance-mode) #cards .action-card.charge::before { content: none !important; display: none !important; } body:not(.maintenance-mode) #cards .action-card.defend::after, body:not(.maintenance-mode) #cards .action-card.charge::after { left: 8.2% !important; width: 23% !important; max-width: 42px !important; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.68)) drop-shadow(0 0 8px color-mix(in srgb, var(--action-solid) 36%, transparent)) !important; } body:not(.maintenance-mode) #cards[data-attack-style="rogue"] .action-card.attack span, body:not(.maintenance-mode) #cards[data-attack-style="assassination-rogue"] .action-card.attack span { color: #f8fbff !important; text-shadow: 0 1px 2px rgba(2, 8, 15, 0.9), 0 0 8px rgba(216, 231, 255, 0.28) !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #characterSelect.character-select, html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) { --select-gap: clamp(14px, 1.8vh, 18px) !important; --select-frame-outset-x: clamp(17px, 1.2vw, 22px) !important; --select-frame-outset-y: clamp(25px, 2.55vh, 30px) !important; --select-card-h: clamp(210px, calc((100dvh - 366px) / 2), 300px) !important; --select-card-w: calc(var(--select-card-h) * 5 / 7) !important; --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important; --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important; --select-shell-pad-y: clamp(48px, 5.8vh, 63px) !important; --select-shell-pad-x: clamp(58px, 5vw, 76px) !important; position: fixed !important; z-index: 18 !important; left: 50% !important; top: 9px !important; width: min(1500px, calc(100vw - 24px)) !important; height: min(930px, calc(100dvh - 18px)) !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 18px) !important; margin: 0 !important; transform: translateX(-50%) !important; display: grid !important; grid-template-rows: clamp(52px, 6.2vh, 58px) minmax(0, 1fr) auto !important; gap: clamp(10px, 1.35vh, 16px) !important; overflow: visible !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { top: calc(clamp(52px, 6.2vh, 58px) + clamp(10px, 1.35vh, 16px)) !important; padding: var(--select-shell-pad-y) var(--select-shell-pad-x) !important; background: url("assets/ui/character-select-panel-crystal-glass-gpt2.png?v=V1.27Beta") center / contain no-repeat !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::before { inset: var(--select-shell-pad-y) var(--select-shell-pad-x) !important; border-radius: 7px !important; opacity: 0.96 !important; } html body:not(.maintenance-mode) #characterSelect .character-scroll { overflow-x: visible !important; overflow-y: auto !important; padding: 0 !important; } html body:not(.maintenance-mode) #characterSelect .character-options { grid-template-columns: repeat(4, var(--select-card-outer-w)) !important; grid-auto-rows: var(--select-card-outer-h) !important; gap: var(--select-gap) !important; align-content: center !important; justify-content: center !important; padding: 0 !important; } html body:not(.maintenance-mode) #characterSelect .character-option { width: var(--select-card-outer-w) !important; height: var(--select-card-outer-h) !important; padding: var(--select-frame-outset-y) var(--select-frame-outset-x) !important; } html body:not(.maintenance-mode) #characterSelect .character-option span { width: var(--select-card-w) !important; height: var(--select-card-h) !important; overflow: visible !important; } html body:not(.maintenance-mode) #characterSelect .character-option span::before { inset: calc(var(--select-frame-outset-y) * -1) calc(var(--select-frame-outset-x) * -1) !important; background-size: contain !important; } html body:not(.maintenance-mode) #characterSelect .character-option .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #characterPreview .preview-skill > #previewSkill.preview-skill-tip { color: #1c3853 !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(207, 228, 241, 0.78) !important; border-left: 3px solid rgba(85, 151, 195, 0.92) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(226, 243, 252, 0.88)), rgba(241, 249, 255, 0.92) !important; box-shadow: 0 6px 14px rgba(23, 61, 88, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important; } html body:not(.maintenance-mode) #characterSelect .character-option .skill-tip:not(.mode-tip) .skill-inline-text, html body:not(.maintenance-mode) #characterPreview .preview-skill > #previewSkill.preview-skill-tip .skill-inline-text { color: #1c3853 !important; -webkit-text-fill-color: currentColor !important; } html body:not(.maintenance-mode) #characterPreview:not([hidden]) { position: fixed !important; z-index: 40 !important; left: 50vw !important; top: 50dvh !important; width: min(980px, calc(100vw - 72px)) !important; max-height: calc(100dvh - 72px) !important; margin: 0 !important; transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #characterPreview:not([hidden]):hover, html body:not(.maintenance-mode) #characterPreview:not([hidden]):focus-within { transform: translate(-50%, -50%) !important; } } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-art, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-art, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art { position: relative !important; isolation: isolate !important; overflow: visible !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art { background-position: 50% 100% !important; background-size: cover !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="false"] .mode-dialog-art { filter: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="false"] .mode-dialog-art::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="false"] .mode-dialog-art::after, html body:not(.maintenance-mode) #modeDialog.mode-dialog[hidden] .mode-dialog-art::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[hidden] .mode-dialog-art::after { content: none !important; display: none !important; opacity: 0 !important; animation: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="storm"] .mode-dialog-art::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="magic-assassin"] .mode-dialog-art::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="devour-world"] .mode-dialog-art::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="storm"] .mode-dialog-art::after, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="magic-assassin"] .mode-dialog-art::after, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="devour-world"] .mode-dialog-art::after { content: "" !important; display: block !important; position: absolute !important; pointer-events: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="storm"] .mode-dialog-art::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="magic-assassin"] .mode-dialog-art::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="devour-world"] .mode-dialog-art::before { z-index: 2 !important; inset: -10px !important; border: 2px solid var(--mode-glow-line, rgba(255, 220, 180, 0.86)) !important; border-radius: 18px !important; box-shadow: 0 0 16px var(--mode-glow-strong, rgba(255, 150, 110, 0.32)), 0 0 30px var(--mode-glow-soft, rgba(255, 200, 160, 0.18)), inset 0 0 18px rgba(255, 255, 255, 0.18) !important; mix-blend-mode: screen !important; opacity: 0.92 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="storm"] .mode-dialog-art::after, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="magic-assassin"] .mode-dialog-art::after, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="devour-world"] .mode-dialog-art::after { z-index: 1 !important; inset: -22px !important; border-radius: 24px !important; background: radial-gradient(ellipse at 50% 18%, var(--mode-glow-soft, rgba(255, 215, 193, 0.28)), transparent 42%), radial-gradient(ellipse at 50% 78%, var(--mode-glow-strong, rgba(255, 64, 86, 0.22)), transparent 54%) !important; mix-blend-mode: screen !important; opacity: 0.78 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="storm"] { --mode-glow-line: rgba(255, 119, 96, 0.86); --mode-glow-strong: rgba(255, 67, 79, 0.34); --mode-glow-soft: rgba(255, 177, 126, 0.25); } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="magic-assassin"] { --mode-glow-line: rgba(255, 146, 214, 0.9); --mode-glow-strong: rgba(255, 84, 191, 0.36); --mode-glow-soft: rgba(180, 217, 255, 0.26); } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="devour-world"] { --mode-glow-line: rgba(230, 178, 70, 0.88); --mode-glow-strong: rgba(226, 168, 62, 0.34); --mode-glow-soft: rgba(55, 148, 109, 0.24); } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app) .arena { min-height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; align-content: start !important; padding-top: clamp(2px, 0.5vh, 6px) !important; } html body:not(.maintenance-mode) #battle.battle:not([hidden]) { align-self: start !important; width: min(1160px, calc(100vw - 32px)) !important; max-height: calc(100dvh - 88px) !important; margin-top: 0 !important; padding-top: 0 !important; gap: clamp(8px, 1vh, 12px) !important; overflow: visible !important; transform: translateY(clamp(-34px, -3.1vh, -18px)) !important; } html body:not(.maintenance-mode) #battle .fighters { margin-top: 0 !important; margin-bottom: clamp(-18px, -1.7vh, -8px) !important; transform: translateY(clamp(-10px, -1vh, -4px)) !important; } html body:not(.maintenance-mode) #battle #cards { margin-top: clamp(-18px, -1.6vh, -8px) !important; } html body:not(.maintenance-mode) #battle .battle-libraries, html body:not(.maintenance-mode) #battle .utility { margin-top: clamp(-10px, -0.9vh, -4px) !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #characterPreview:not([hidden]) { position: fixed !important; z-index: 40 !important; left: 50vw !important; top: 50dvh !important; width: min(96vw, 520px) !important; max-height: calc(100dvh - 18px) !important; margin: 0 !important; transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app) .arena { overflow: hidden !important; } html body:not(.maintenance-mode) #battle.battle:not([hidden]) { gap: 4px !important; transform: translateY(-6px) !important; } } /* V1.27Beta final asset rule: Bitmap backgrounds, weapon art, and UI frame paintings must keep their original aspect ratio. Use cover/contain with intentional cropping or letterboxing; do not stretch new bitmap art with 100% 100%. */ :root { --home-mode-1v1-art: url("assets/ui/mode-1v1-cover-crystal-clean-gpt2.png?v=V1.27Beta"); --home-mode-2v2-art: url("assets/ui/mode-2v2-cover-crystal-clean-gpt2.png?v=V1.27Beta"); --home-mode-3v3-art: url("assets/ui/mode-3v3-cover-crystal-clean-gpt2.png?v=V1.27Beta"); --home-mode-identity-art: url("assets/ui/mode-identity-cover-crystal-clean-gpt2.png?v=V1.27Beta"); --room-mode-bg-1v1: url("assets/ui/mode-1v1-cover-crystal-clean-gpt2.png?v=V1.27Beta"); --room-mode-bg-2v2: url("assets/ui/mode-2v2-cover-crystal-clean-gpt2.png?v=V1.27Beta"); --room-mode-bg-3v3: url("assets/ui/mode-3v3-cover-crystal-clean-gpt2.png?v=V1.27Beta"); --room-mode-bg-identity: url("assets/ui/mode-identity-cover-crystal-clean-gpt2.png?v=V1.27Beta"); --battle-combatant-frame-art: url("assets/ui/battle-combatant-frame-crystal-vertical-gpt2.png?v=V1.27Beta"); --artifact-rivendare-restored-art: url("assets/artifacts/rivendare-sword-restored-gpt2.png?v=V1.27Beta"); --artifact-ghost-vapor-art: url("assets/artifacts/ghost-soul-blades-vapor-glass-gpt2.png?v=V1.27Beta"); } html body:not(.maintenance-mode) #appRoot.app[data-room-mode="1v1"], html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="1v1"] { --room-mode-wallpaper: var(--room-mode-bg-1v1) !important; --room-lobby-wallpaper: var(--room-mode-bg-1v1) !important; } html body:not(.maintenance-mode) #appRoot.app, html body:not(.maintenance-mode) #appRoot .arena { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app .arena::before, html body:not(.maintenance-mode) #appRoot.app.identity-select-app .arena::before, html body:not(.maintenance-mode) #appRoot.app.team-battle-app .arena::before, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app .arena::before { inset: 0 !important; background: radial-gradient(ellipse at 50% 44%, rgba(255, 255, 255, 0.18), transparent 52%), var(--room-mode-wallpaper, var(--room-lobby-wallpaper, var(--luminary-home-bg))) center center / cover no-repeat, linear-gradient(180deg, #07152a, #0d203c) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .arena { align-content: center !important; align-items: center !important; justify-items: center !important; } html body:not(.maintenance-mode) .enter-gate { transform: translateY(1.2vh) !important; } html body:not(.maintenance-mode) .enter-gate:hover, html body:not(.maintenance-mode) .enter-gate:focus-visible { transform: translateY(calc(1.2vh - 2px)) scale(1.01) !important; } html body:not(.maintenance-mode) .enter-gate strong { background-position: 50% 54% !important; transform: translateY(2px) !important; } html body:not(.maintenance-mode) #appRoot.app .topbar > div:first-child { background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app .topbar > div:first-child::before, html body:not(.maintenance-mode) #appRoot.app .topbar > div:first-child::after, html body:not(.maintenance-mode) #appRoot.app .topbar h1::before, html body:not(.maintenance-mode) #appRoot.app .topbar h1::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app .topbar h1, html body:not(.maintenance-mode) #appRoot.app.solo .topbar h1, html body:not(.maintenance-mode) #appRoot.app:not(.solo) .topbar h1 { width: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; color: rgba(248, 252, 255, 0.9) !important; -webkit-text-fill-color: currentColor !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; font-family: inherit !important; font-size: clamp(15px, 1.1vw, 18px) !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-shadow: 0 1px 2px rgba(9, 25, 45, 0.48), 0 0 12px rgba(219, 239, 255, 0.2) !important; filter: none !important; -webkit-text-stroke: 0 transparent !important; } html body:not(.maintenance-mode) #appRoot.app .topbar p { color: rgba(220, 237, 250, 0.76) !important; text-shadow: 0 1px 2px rgba(9, 25, 45, 0.48), 0 0 10px rgba(219, 239, 255, 0.14) !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) .app.solo .lobby { width: 100% !important; min-height: calc(100dvh - 118px) !important; display: grid !important; place-items: center !important; } html body:not(.maintenance-mode) .app.solo .lobby-shell { width: min(1180px, calc(100vw - 52px)) !important; max-width: calc(100vw - 52px) !important; margin: 0 auto !important; display: grid !important; place-items: center !important; transform: none !important; } html body:not(.maintenance-mode) .app.solo .lobby-panel { width: min(1080px, calc(100vw - 72px)) !important; max-width: calc(100vw - 72px) !important; margin: 0 auto !important; padding: clamp(34px, 4vh, 52px) clamp(38px, 4.5vw, 62px) !important; transform: none !important; } html body:not(.maintenance-mode) .app.solo .mode-select { gap: clamp(16px, 1.6vw, 24px) !important; } html body:not(.maintenance-mode) .app.solo .mode-select button { min-height: clamp(122px, 14.2vh, 164px) !important; background-size: cover !important; background-position: center center !important; } html body:not(.maintenance-mode) .app.solo .lobby-actions { gap: clamp(18px, 2vw, 28px) !important; } html body:not(.maintenance-mode) .app.solo .lobby-actions button { min-height: clamp(88px, 10vh, 118px) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; } html body:not(.maintenance-mode) .app.solo .join-row { min-height: clamp(58px, 6.2vh, 68px) !important; } html body:not(.maintenance-mode) .app.solo .join-row input, html body:not(.maintenance-mode) .app.solo .join-row #joinRoom { min-height: clamp(50px, 5.6vh, 60px) !important; } } html body:not(.maintenance-mode) :is( #joinRoom, #createBotRoom, #showRules, #startGame, #copyRoomLobby, #refreshRoomLobby, #showRulesRoomLobby, #leaveRoomLobby, #leaveCharacterSelect, #modeClose, #modeLockCharacter, #modeAccept, #modeReject, #lockCharacter, #leaveRoom, #showRulesBattle, #rematch, #copyRoom, #showOpportunityLibraryBattle, #showArtifactLibraryBattle, #closeRules, #closeArtifactLibrary, #closeOpportunityLibrary, #closeCharacterCodex, #closeSkillInspect, .room-seat-action, .rule-library-button, .identity-confirm, .utility button, .battle-libraries .library-action ) { display: inline-grid !important; place-items: center !important; align-content: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; letter-spacing: 0 !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; } html body:not(.maintenance-mode) :is( #joinRoom, #createBotRoom, #showRules, #startGame, #copyRoomLobby, #refreshRoomLobby, #showRulesRoomLobby, #leaveRoomLobby, #leaveCharacterSelect, #modeClose, #modeLockCharacter, #modeAccept, #modeReject, #lockCharacter, #leaveRoom, #showRulesBattle, #rematch, #copyRoom, #showOpportunityLibraryBattle, #showArtifactLibraryBattle, #closeRules, #closeArtifactLibrary, #closeOpportunityLibrary, #closeCharacterCodex, #closeSkillInspect, .room-seat-action, .rule-library-button, .identity-confirm, .utility button, .battle-libraries .library-action ) > :is(span, small, strong, b) { display: block !important; width: auto !important; margin: 0 !important; line-height: 1.08 !important; transform: none !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #characterSelect.character-select, html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) { --select-gap: clamp(15px, 1.55vh, 18px) !important; --select-frame-outset-x: clamp(23px, 1.55vw, 28px) !important; --select-frame-outset-y: clamp(34px, 3.2vh, 40px) !important; --select-card-h: clamp(278px, 32vh, 348px) !important; --select-card-w: clamp(185px, 21.3vh, 232px) !important; --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important; --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important; --select-shell-pad-y: clamp(58px, 6.4vh, 74px) !important; --select-shell-pad-x: clamp(74px, 5.8vw, 96px) !important; left: 50% !important; top: 7px !important; width: min(1540px, calc(100vw - 24px)) !important; height: min(1000px, calc(100dvh - 14px)) !important; transform: translateX(-50%) !important; place-items: stretch center !important; } html body:not(.maintenance-mode) #characterSelect .status-line { justify-self: center !important; width: min(860px, calc(100% - 180px)) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { justify-self: center !important; align-self: center !important; width: min(1502px, calc(100vw - 34px)) !important; max-width: 100% !important; height: min(995px, calc(100dvh - 112px)) !important; max-height: calc(100dvh - 112px) !important; margin: 0 auto !important; padding: var(--select-shell-pad-y) var(--select-shell-pad-x) !important; background: url("assets/ui/character-select-panel-crystal-glass-gpt2.png?v=V1.27Beta") center / contain no-repeat !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::before { inset: clamp(70px, 8%, 90px) clamp(76px, 7.4%, 100px) !important; background: radial-gradient(ellipse at 50% 10%, rgba(255, 255, 255, 0.76), transparent 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(242, 249, 254, 0.84) 54%, rgba(224, 242, 252, 0.75)) !important; opacity: 0.95 !important; } html body:not(.maintenance-mode) #characterSelect .character-scroll { display: grid !important; align-items: start !important; justify-items: center !important; overflow-x: visible !important; overflow-y: auto !important; } html body:not(.maintenance-mode) #characterSelect .character-options { align-content: start !important; justify-content: center !important; justify-items: center !important; padding: 0 !important; } html body:not(.maintenance-mode) #characterSelect .character-option span { border-radius: 10px !important; background: #08101d !important; } html body:not(.maintenance-mode) #characterSelect .character-option span::before { inset: calc(var(--select-frame-outset-y) * -1) calc(var(--select-frame-outset-x) * -1) !important; background: var(--arcane-card-frame) center / contain no-repeat !important; opacity: 0.98 !important; } html body:not(.maintenance-mode) #characterSelect .mini-art { inset: clamp(4px, 1.4%, 7px) clamp(6px, 2.2%, 10px) !important; border-radius: 8px !important; background-size: cover !important; background-position: center top !important; } html body:not(.maintenance-mode) #characterSelect .character-option .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #characterPreview .preview-skill > #previewSkill.preview-skill-tip { color: #17344d !important; -webkit-text-fill-color: currentColor !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(225, 242, 252, 0.9)), rgba(241, 249, 255, 0.94) !important; border-color: rgba(194, 220, 238, 0.88) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.74) !important; } } @media (min-width: 721px) and (max-height: 800px) { html body:not(.maintenance-mode) #characterSelect.character-select, html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) { --select-gap: clamp(12px, 1.25vh, 15px) !important; --select-frame-outset-x: clamp(18px, 1.25vw, 23px) !important; --select-frame-outset-y: clamp(25px, 2.6vh, 31px) !important; --select-card-h: clamp(190px, 26vh, 220px) !important; --select-card-w: clamp(126px, 17.3vh, 146px) !important; --select-shell-pad-y: clamp(40px, 5.2vh, 48px) !important; --select-shell-pad-x: clamp(58px, 5vw, 72px) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { height: min(995px, calc(100dvh - 104px)) !important; max-height: calc(100dvh - 104px) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::before { inset: clamp(50px, 7%, 64px) clamp(62px, 7%, 82px) !important; } } html body:not(.maintenance-mode) #characterSelect.preview-open .character-preview-backdrop { z-index: 34 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #characterPreview.character-preview:not([hidden]) { z-index: 88 !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #characterPreview #previewModeButton { display: none !important; } html body:not(.maintenance-mode) #characterPreview #previewModeSkill:not([hidden]) { position: relative !important; z-index: 96 !important; display: inline-grid !important; place-items: center !important; width: fit-content !important; min-width: clamp(104px, 9vw, 132px) !important; min-height: clamp(28px, 3vh, 34px) !important; margin: 0 0 4px !important; } html body:not(.maintenance-mode) #characterPreview #previewSkill { position: relative !important; z-index: 94 !important; } html body:not(.maintenance-mode) #characterSelect .mini-art[data-character="Rhasta"][data-mode-active="devour-world"], html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art { background-size: cover !important; background-position: 50% 100% !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[hidden] .mode-dialog-art, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="false"] .mode-dialog-art { filter: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[hidden] .mode-dialog-art::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[hidden] .mode-dialog-art::after, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="false"] .mode-dialog-art::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="false"] .mode-dialog-art::after { content: none !important; display: none !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #battle.battle:not([hidden]) { width: min(1300px, calc(100vw - 28px)) !important; max-height: calc(100dvh - 72px) !important; padding: clamp(8px, 1vh, 14px) !important; gap: clamp(5px, 0.7vh, 9px) !important; transform: translateY(clamp(-54px, -5vh, -30px)) !important; } html body:not(.maintenance-mode) #battle .fighters { min-height: clamp(360px, 51vh, 560px) !important; padding: clamp(8px, 1.1vw, 16px) !important; margin-bottom: clamp(-26px, -2.3vh, -12px) !important; transform: translateY(clamp(-16px, -1.6vh, -8px)) !important; } html body:not(.maintenance-mode) #battle #cards { margin-top: clamp(-26px, -2.2vh, -12px) !important; } html body:not(.maintenance-mode) #battle .battle-libraries, html body:not(.maintenance-mode) #battle .utility { margin-top: clamp(-14px, -1.2vh, -6px) !important; } } html body:not(.maintenance-mode) #battle .combatant, html body:not(.maintenance-mode) #battle .opponent-combatant { border: 0 !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(2, 13, 30, 0.24), rgba(3, 16, 34, 0.18)), var(--battle-combatant-frame-art) center center / cover no-repeat !important; box-shadow: 0 18px 42px rgba(2, 10, 23, 0.28), 0 0 22px rgba(126, 201, 255, 0.14) !important; } html body:not(.maintenance-mode) #battle .combatant::before, html body:not(.maintenance-mode) #battle .combatant::after, html body:not(.maintenance-mode) #battle .opponent-combatant::before, html body:not(.maintenance-mode) #battle .opponent-combatant::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #battle .combatant > *, html body:not(.maintenance-mode) #battle .opponent-combatant > * { position: relative !important; z-index: 1 !important; } html body:not(.maintenance-mode) #battle .fighter, html body:not(.maintenance-mode) #battle .fighter-panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(225, 242, 252, 0.36)), rgba(235, 247, 255, 0.24) !important; } html body:not(.maintenance-mode) #battle .fighter-panel .equipment-slots, html body:not(.maintenance-mode) #battle .team-equipment.equipment-slots { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; min-height: clamp(28px, 3.1vh, 36px) !important; padding: 4px !important; overflow: visible !important; } html body:not(.maintenance-mode) #battle .equipment-slot { position: relative !important; min-width: 0 !important; min-height: clamp(24px, 2.7vh, 32px) !important; display: grid !important; place-items: center !important; overflow: hidden !important; color: rgba(22, 49, 75, 0.7) !important; border-color: rgba(176, 213, 238, 0.62) !important; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.9), rgba(201, 230, 247, 0.32) 58%, rgba(13, 45, 78, 0.22)), rgba(235, 247, 255, 0.42) !important; } html body:not(.maintenance-mode) #battle .equipment-slot.filled { color: transparent !important; text-shadow: none !important; } html body:not(.maintenance-mode) #battle .equipment-slot.filled::before { content: "" !important; position: absolute !important; z-index: 1 !important; inset: 2px !important; border-radius: inherit !important; background: var(--equipment-art) center center / contain no-repeat !important; filter: drop-shadow(0 2px 4px rgba(2, 12, 25, 0.34)) drop-shadow(0 0 6px rgba(114, 205, 255, 0.18)) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #battle .equipment-slot .equipment-cd { position: relative !important; z-index: 2 !important; color: #fff8d5 !important; text-shadow: 0 1px 3px rgba(2, 8, 18, 0.9) !important; } html body:not(.maintenance-mode) .artifact-card[data-card-id="rivendare_sword"] .opportunity-art, html body:not(.maintenance-mode) .artifact-card[data-id="rivendare_sword"] .opportunity-art { background-image: var(--artifact-rivendare-restored-art) !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) .artifact-card[data-card-id="ghost_soul_blades"] .opportunity-art, html body:not(.maintenance-mode) .artifact-card[data-id="ghost_soul_blades"] .opportunity-art { background-image: var(--artifact-ghost-vapor-art) !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) .enter-gate { transform: translateY(1vh) !important; } html body:not(.maintenance-mode) .app.solo .lobby-shell { width: min(96vw, 560px) !important; margin: 0 auto !important; } html body:not(.maintenance-mode) .app.solo .lobby-panel { width: min(94vw, 540px) !important; margin: 0 auto !important; } html body:not(.maintenance-mode) .app.solo .mode-select button { background-size: cover !important; background-position: center center !important; } html body:not(.maintenance-mode) #battle .fighter-panel { height: 82px !important; min-height: 82px !important; max-height: 82px !important; grid-template-rows: auto auto auto auto !important; } html body:not(.maintenance-mode) #battle .fighter-panel .equipment-slots { display: grid !important; min-height: 18px !important; height: 18px !important; padding: 1px !important; gap: 2px !important; } html body:not(.maintenance-mode) #battle .equipment-slot { min-height: 16px !important; height: 16px !important; } html body:not(.maintenance-mode) #battle.battle:not([hidden]) { transform: translateY(-10px) !important; } } /* V1.27Beta room-page absolute overrides: background, centered seat copy, and centered actions. */ html body:not(.maintenance-mode) #appRoot.app[data-room-mode="1v1"] { --room-mode-wallpaper: var(--room-mode-bg-1v1) !important; --room-lobby-wallpaper: var(--room-mode-bg-1v1) !important; } html body:not(.maintenance-mode) #appRoot.app[data-room-mode="2v2"] { --room-mode-wallpaper: var(--room-mode-bg-2v2) !important; --room-lobby-wallpaper: var(--room-mode-bg-2v2) !important; } html body:not(.maintenance-mode) #appRoot.app[data-room-mode="3v3"] { --room-mode-wallpaper: var(--room-mode-bg-3v3) !important; --room-lobby-wallpaper: var(--room-mode-bg-3v3) !important; } html body:not(.maintenance-mode) #appRoot.app[data-room-mode="identity"] { --room-mode-wallpaper: var(--room-mode-bg-identity) !important; --room-lobby-wallpaper: var(--room-mode-bg-identity) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena, html body:not(.maintenance-mode) #appRoot.app.character-select-app .arena, html body:not(.maintenance-mode) #appRoot.app.identity-select-app .arena, html body:not(.maintenance-mode) #appRoot.app.team-battle-app .arena, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app .arena { background: radial-gradient(ellipse at 50% 44%, rgba(255, 255, 255, 0.14), transparent 54%), linear-gradient(180deg, rgba(1, 8, 18, 0.08), rgba(1, 8, 18, 0.22)), var(--room-mode-wallpaper, var(--room-lobby-wallpaper, var(--luminary-home-bg))) center center / cover no-repeat, #07152a !important; background-size: auto, auto, cover, auto !important; background-position: center center !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app .arena::before, html body:not(.maintenance-mode) #appRoot.app.identity-select-app .arena::before, html body:not(.maintenance-mode) #appRoot.app.team-battle-app .arena::before, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app .arena::before { inset: -2px !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #roomLobby .room-seat { text-align: center !important; } html body:not(.maintenance-mode) #roomLobby .room-seat > .room-seat-identity { position: absolute !important; left: 50% !important; top: 48% !important; width: min(82%, 260px) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; align-items: center !important; justify-items: center !important; column-gap: clamp(5px, 0.8vw, 9px) !important; text-align: center !important; transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-slot, html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-person, html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-person .player-name, html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-person .player-name-text, html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-separator { display: block !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; white-space: nowrap !important; text-align: center !important; transform: none !important; } html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-slot { justify-self: end !important; } html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-person { justify-self: start !important; } html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-separator { justify-self: center !important; opacity: 0.9 !important; } html body:not(.maintenance-mode) #roomLobby .room-seat-actions { position: absolute !important; left: 50% !important; right: auto !important; bottom: clamp(6px, 0.8vh, 10px) !important; top: auto !important; display: grid !important; place-items: center !important; margin: 0 !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #roomLobby .room-seat-action { min-width: clamp(72px, 7vw, 92px) !important; min-height: clamp(26px, 3vh, 32px) !important; padding: 0 12px 1px !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions { width: min(900px, 100%) !important; margin-left: auto !important; margin-right: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: clamp(9px, 1vw, 14px) !important; text-align: center !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #startGame, html body:not(.maintenance-mode) #roomLobby .room-lobby-actions button { flex: 0 0 auto !important; width: clamp(126px, 11vw, 154px) !important; min-width: clamp(126px, 11vw, 154px) !important; max-width: clamp(126px, 11vw, 154px) !important; height: clamp(38px, 4.8vh, 46px) !important; min-height: clamp(38px, 4.8vh, 46px) !important; margin: 0 !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #startGame { width: clamp(150px, 13vw, 178px) !important; min-width: clamp(150px, 13vw, 178px) !important; max-width: clamp(150px, 13vw, 178px) !important; } /* V1.27Beta: lobby mode art is full-bleed; utility buttons keep the compact join-button proportions. */ html body:not(.maintenance-mode) .app.solo .mode-select button { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) .app.solo .lobby-actions { width: min(660px, 100%) !important; margin-left: auto !important; margin-right: auto !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, clamp(220px, 22vw, 300px))) !important; align-items: center !important; justify-content: center !important; justify-items: center !important; gap: clamp(14px, 1.6vw, 22px) !important; } html body:not(.maintenance-mode) .app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) .app.solo .lobby-actions > #showRules { width: clamp(220px, 22vw, 300px) !important; min-width: 0 !important; max-width: clamp(220px, 22vw, 300px) !important; min-height: clamp(66px, 7.4vh, 88px) !important; padding: 0 clamp(18px, 2vw, 28px) 2px !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; display: grid !important; align-content: center !important; justify-items: center !important; text-align: center !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) .app.solo .lobby-actions { width: min(92vw, 460px) !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(8px, 2.4vw, 12px) !important; } html body:not(.maintenance-mode) .app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) .app.solo .lobby-actions > #showRules { width: 100% !important; max-width: 214px !important; min-height: clamp(58px, 7.2vh, 70px) !important; padding-left: 12px !important; padding-right: 12px !important; } } /* V1.27Beta room toolbar pass: Desktop room buttons live in the top corners, while seat labels are centered in the painted seat frame. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) { top: calc(50% + 16px) !important; height: min(690px, calc(100dvh - 92px)) !important; max-height: calc(100dvh - 92px) !important; padding: clamp(118px, 14vh, 136px) clamp(18px, 2.2vw, 28px) clamp(16px, 2vh, 24px) !important; display: grid !important; grid-template-rows: minmax(0, 1fr) !important; align-items: center !important; justify-items: center !important; overflow: visible !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-head { position: absolute !important; z-index: 7 !important; left: 50% !important; top: clamp(50px, 6.2vh, 64px) !important; width: min(460px, 42vw) !important; margin: 0 !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-head strong { font-size: clamp(24px, 2.4vw, 32px) !important; line-height: 1.08 !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-head small { font-size: clamp(11px, 0.9vw, 13px) !important; line-height: 1.25 !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions { position: absolute !important; z-index: 8 !important; left: 0 !important; right: 0 !important; top: 0 !important; width: 100% !important; height: clamp(50px, 6.3vh, 62px) !important; margin: 0 !important; padding: 0 clamp(8px, 1vw, 14px) !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: clamp(8px, 0.8vw, 12px) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #leaveRoomLobby { order: -1 !important; margin-right: auto !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #startGame { order: 1 !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #copyRoomLobby { order: 2 !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #refreshRoomLobby { order: 3 !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #showRulesRoomLobby { order: 4 !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #startGame, html body:not(.maintenance-mode) #roomLobby .room-lobby-actions button { pointer-events: auto !important; flex: 0 0 auto !important; width: clamp(134px, 10.8vw, 164px) !important; min-width: clamp(134px, 10.8vw, 164px) !important; max-width: clamp(134px, 10.8vw, 164px) !important; height: clamp(44px, 5.4vh, 54px) !important; min-height: clamp(44px, 5.4vh, 54px) !important; padding: 0 clamp(12px, 1vw, 18px) 2px !important; border: 0 !important; border-radius: 0 !important; background: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") center / contain no-repeat !important; box-shadow: none !important; color: #153d5c !important; -webkit-text-fill-color: currentColor !important; line-height: 1 !important; text-align: center !important; display: grid !important; place-items: center !important; filter: drop-shadow(0 8px 13px rgba(5, 28, 50, 0.16)) !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #startGame { width: clamp(158px, 12.6vw, 198px) !important; min-width: clamp(158px, 12.6vw, 198px) !important; max-width: clamp(158px, 12.6vw, 198px) !important; } html body:not(.maintenance-mode) #roomLobby .room-seat-grid { align-self: center !important; justify-self: center !important; margin: 0 !important; } html body:not(.maintenance-mode) #roomLobby .room-seat { position: relative !important; display: block !important; text-align: center !important; } html body:not(.maintenance-mode) #roomLobby .room-seat > .room-seat-identity, html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat > .room-seat-identity { position: absolute !important; left: 50% !important; top: 50% !important; width: calc(100% - clamp(34px, 3.4vw, 48px)) !important; max-width: calc(100% - clamp(34px, 3.4vw, 48px)) !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; align-items: center !important; justify-items: center !important; column-gap: clamp(5px, 0.65vw, 8px) !important; transform: translate(-50%, -50%) !important; text-align: center !important; pointer-events: none !important; } html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-slot { justify-self: end !important; text-align: right !important; } html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-person { justify-self: start !important; text-align: left !important; } html body:not(.maintenance-mode) #roomLobby .room-seat .room-seat-separator { justify-self: center !important; text-align: center !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat .room-seat-slot, html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat .room-seat-person, html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] .room-seat .room-seat-separator { font-size: clamp(13px, 1vw, 15px) !important; line-height: 1 !important; } html body:not(.maintenance-mode) #roomLobby .room-seat-actions { pointer-events: auto !important; bottom: clamp(3px, 0.45vh, 6px) !important; } html body:not(.maintenance-mode) #roomLobby .room-seat-action { min-width: clamp(78px, 7.4vw, 98px) !important; min-height: clamp(30px, 3.5vh, 36px) !important; height: clamp(30px, 3.5vh, 36px) !important; padding: 0 12px 1px !important; display: grid !important; place-items: center !important; line-height: 1 !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } } /* V1.27Beta preview card pass: Enlarged character cards must fit inside the viewport; copy areas wrap instead of scaling or stretching. */ html body:not(.maintenance-mode) #characterPreview.character-preview:not([hidden]) { --preview-safe-w: min(440px, calc(100vw - 92px), calc((100dvh - 172px) * 0.714)); position: fixed !important; z-index: 88 !important; left: 50vw !important; top: 50dvh !important; width: min(max(292px, 26vw), var(--preview-safe-w)) !important; max-width: calc(100vw - 92px) !important; max-height: calc(100dvh - 58px) !important; margin: 0 !important; transform: translate(-50%, -50%) !important; overflow: visible !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #characterPreview.character-preview:not([hidden]):hover, html body:not(.maintenance-mode) #characterPreview.character-preview:not([hidden]):focus-within { transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #characterPreview .preview-art { width: 100% !important; aspect-ratio: 5 / 7 !important; max-height: calc(100dvh - 78px) !important; background-size: var(--art-size, cover), cover, cover !important; background-position: var(--art-position, center top), center center, center center !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #characterPreview .preview-copy { left: clamp(14px, 1.9vh, 20px) !important; right: clamp(14px, 1.9vh, 20px) !important; bottom: clamp(12px, 1.7vh, 17px) !important; max-height: min(214px, calc(100dvh - 420px)) !important; min-height: 0 !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; align-content: end !important; gap: clamp(4px, 0.65vh, 7px) !important; padding: clamp(8px, 1vh, 11px) !important; overflow: hidden !important; transform: none !important; } html body:not(.maintenance-mode) #characterPreview .preview-skill { min-width: 0 !important; min-height: 0 !important; display: grid !important; gap: clamp(4px, 0.65vh, 6px) !important; align-content: end !important; transform: none !important; } html body:not(.maintenance-mode) #characterPreview .preview-skill > .preview-skill-tip, html body:not(.maintenance-mode) #characterPreview #previewModeSkill:not([hidden]), html body:not(.maintenance-mode) #characterPreview #previewSkill { box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important; width: fit-content !important; min-height: clamp(28px, 3.3vh, 34px) !important; padding: 5px 10px 6px 9px !important; display: inline-grid !important; grid-auto-flow: column !important; grid-auto-columns: max-content !important; align-items: center !important; justify-content: start !important; justify-self: start !important; gap: 5px !important; line-height: 1.08 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; clip-path: none !important; border-radius: 5px !important; } html body:not(.maintenance-mode) #characterPreview .preview-skill > .preview-skill-tip .skill-inline-text, html body:not(.maintenance-mode) #characterPreview #previewModeSkill .skill-inline-text, html body:not(.maintenance-mode) #characterPreview #previewSkill .skill-inline-text { display: block !important; min-width: 0 !important; max-width: min(100%, 210px) !important; line-height: 1.08 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; } html body:not(.maintenance-mode) #characterPreview .preview-skill > #previewDescription { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: clamp(64px, 8.2vh, 84px) !important; max-height: min(112px, 16vh) !important; padding: 9px 11px 10px !important; display: block !important; line-height: 1.42 !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; text-overflow: clip !important; overflow: auto !important; transform: none !important; } html body:not(.maintenance-mode) #characterPreview .preview-skill > #previewDescription *, html body:not(.maintenance-mode) #characterPreview .preview-skill > #previewDescription strong { max-width: 100% !important; white-space: normal !important; transform: none !important; } @media (max-height: 760px) and (min-width: 721px) { html body:not(.maintenance-mode) #characterPreview.character-preview:not([hidden]) { --preview-safe-w: min(390px, calc(100vw - 86px), calc((100dvh - 142px) * 0.714)); } html body:not(.maintenance-mode) #characterPreview .preview-copy { max-height: min(188px, calc(100dvh - 360px)) !important; } html body:not(.maintenance-mode) #characterPreview .preview-skill > #previewDescription { min-height: clamp(54px, 7.8vh, 70px) !important; max-height: min(92px, 14.5vh) !important; font-size: clamp(10px, 1.35vh, 11.5px) !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #characterPreview.character-preview:not([hidden]) { --preview-safe-w: min(88vw, calc((100dvh - 132px) * 0.714)); width: min(max(260px, 82vw), var(--preview-safe-w)) !important; max-width: 92vw !important; max-height: calc(100dvh - 18px) !important; } html body:not(.maintenance-mode) #characterPreview .preview-copy { max-height: min(190px, 31dvh) !important; } html body:not(.maintenance-mode) #characterPreview .preview-skill > #previewDescription { min-height: 54px !important; max-height: min(104px, 18dvh) !important; } } /* V1.27Beta no-stretch button override: bitmap button art keeps its aspect ratio everywhere. */ html body:not(.maintenance-mode) #roomLobby.room-lobby .room-lobby-actions > button, html body:not(.maintenance-mode) #roomLobby.room-lobby .room-lobby-actions > button.primary, html body:not(.maintenance-mode) #roomLobby.room-lobby .room-seat-action, html body:not(.maintenance-mode) #characterSelect.character-select #leaveCharacterSelect, html body:not(.maintenance-mode) #characterPreview.character-preview #lockCharacter { background-image: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } /* V1.27Beta select-card badge nudge: keep skill/mode names clear of the lower art frame. */ html body:not(.maintenance-mode) #characterSelect .character-option em { bottom: clamp(15px, 1.18vw, 19px) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #characterSelect .character-option em { bottom: clamp(12px, 3.1vw, 16px) !important; } } html body:not(.maintenance-mode) #roomLobby.room-lobby .room-lobby-actions :is( #startGame, #copyRoomLobby, #refreshRoomLobby, #showRulesRoomLobby, #leaveRoomLobby ) { background-image: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } /* V1.27Beta codex/frame hotfix: Full-screen backgrounds use cover; character select uses transparent frame art; action buttons use icon-only glyphs. */ :root { --home-mode-1v1-art: url("assets/ui/mode-1v1-cover-crystal-clean-v2-gpt2.png?v=V1.27Beta-codex1"); --room-mode-bg-1v1: url("assets/ui/mode-1v1-cover-crystal-clean-v2-gpt2.png?v=V1.27Beta-codex1"); --character-select-frame-only-art: url("assets/ui/character-select-panel-crystal-frame-only-gpt2.png?v=V1.27Beta-codex1"); --codex-card-characters-art: url("assets/ui/codex-card-characters-crystal-archive-gpt2.png?v=V1.27Beta-codex1"); --codex-card-identity-art: url("assets/ui/codex-card-identity-crystal-council-gpt2.png?v=V1.27Beta-codex1"); --codex-card-opportunity-art: url("assets/ui/codex-card-opportunity-fatecards-gpt2.png?v=V1.27Beta-codex1"); --codex-card-artifact-art: url("assets/ui/codex-card-artifact-relicvault-gpt2.png?v=V1.27Beta-codex1"); --action-icon-rogue-clean-art: url("assets/ui/action-icon-rogue-silver-daggers-clean.png?v=V1.27Beta-codex1"); --action-icon-defend-clean-art: url("assets/ui/action-icon-defend-silver-clean-gpt2.png?v=V1.27Beta-codex1"); --action-icon-charge-clean-art: url("assets/ui/action-icon-charge-silver-clean-gpt2.png?v=V1.27Beta-codex1"); } html body:not(.maintenance-mode), html body:not(.maintenance-mode) #appRoot.app { width: 100vw !important; height: 100dvh !important; min-width: 100vw !important; min-height: 100dvh !important; max-width: none !important; overflow: hidden !important; background-color: #edf8ff !important; } html body:not(.maintenance-mode) #appRoot.app, html body:not(.maintenance-mode) #appRoot.app.solo, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app, html body:not(.maintenance-mode) #appRoot.app.character-select-app, html body:not(.maintenance-mode) #appRoot.app.identity-select-app, html body:not(.maintenance-mode) #appRoot.app.team-battle-app, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app { position: fixed !important; inset: 0 !important; margin: 0 !important; padding: 0 !important; } html body:not(.maintenance-mode) #appRoot.app .arena, html body:not(.maintenance-mode) #appRoot.app.solo .arena, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena, html body:not(.maintenance-mode) #appRoot.app.character-select-app .arena, html body:not(.maintenance-mode) #appRoot.app.identity-select-app .arena, html body:not(.maintenance-mode) #appRoot.app.team-battle-app .arena, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app .arena { width: 100vw !important; height: 100dvh !important; min-width: 100vw !important; min-height: 100dvh !important; max-width: none !important; margin: 0 !important; overflow: hidden !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.solo .arena { background: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.08), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(6, 18, 34, 0.1) 56%, rgba(3, 9, 20, 0.24) 100%), var(--luminary-home-bg) center center / cover no-repeat, #edf8ff !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena, html body:not(.maintenance-mode) #appRoot.app.character-select-app .arena, html body:not(.maintenance-mode) #appRoot.app.identity-select-app .arena, html body:not(.maintenance-mode) #appRoot.app.team-battle-app .arena, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app .arena { background: radial-gradient(ellipse at 50% 44%, rgba(255, 255, 255, 0.1), transparent 54%), linear-gradient(180deg, rgba(1, 8, 18, 0.04), rgba(1, 8, 18, 0.18)), var(--room-mode-wallpaper, var(--room-lobby-wallpaper, var(--luminary-home-bg))) center center / cover no-repeat, #edf8ff !important; } html body:not(.maintenance-mode) #appRoot.app .arena::before, html body:not(.maintenance-mode) #appRoot.app .arena::after { inset: 0 !important; max-width: none !important; } html body:not(.maintenance-mode) #appRoot.app[data-room-mode="1v1"], html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="1v1"] { --room-mode-wallpaper: var(--room-mode-bg-1v1) !important; --room-lobby-wallpaper: var(--room-mode-bg-1v1) !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) .app.solo .lobby-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) .app.solo .lobby-actions > button, html body:not(.maintenance-mode) .app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) .app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) .app.solo .lobby-actions > #showGameCodex { min-height: clamp(78px, 8.5vh, 104px) !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #characterSelect.character-select, html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) { --select-gap: clamp(12px, 1.55vh, 18px) !important; --select-frame-outset-x: clamp(17px, 1.2vw, 22px) !important; --select-frame-outset-y: clamp(23px, 2.35vh, 30px) !important; --select-card-h: clamp(186px, calc((100dvh - 352px) / 2), 282px) !important; --select-card-w: calc(var(--select-card-h) * 5 / 7) !important; --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important; --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important; --select-shell-pad-y: clamp(42px, 5.2vh, 64px) !important; --select-shell-pad-x: clamp(54px, 5.5vw, 88px) !important; top: 4px !important; width: calc(100vw - 10px) !important; height: calc(100dvh - 8px) !important; max-width: calc(100vw - 10px) !important; max-height: calc(100dvh - 8px) !important; grid-template-rows: clamp(50px, 6vh, 58px) minmax(0, 1fr) auto !important; gap: clamp(7px, 1vh, 12px) !important; overflow: visible !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { justify-self: center !important; align-self: center !important; aspect-ratio: 1502 / 995 !important; width: min(1560px, calc(100vw - 14px), calc((100dvh - 78px) * 1502 / 995)) !important; height: auto !important; max-height: calc(100dvh - 78px) !important; margin: 0 auto !important; padding: var(--select-shell-pad-y) var(--select-shell-pad-x) !important; display: grid !important; grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important; overflow: visible !important; background: var(--character-select-frame-only-art) center center / contain no-repeat !important; border: 0 !important; box-shadow: 0 18px 42px rgba(20, 66, 98, 0.14), 0 0 22px rgba(107, 202, 255, 0.1) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::before, html body:not(.maintenance-mode) #characterSelect .character-select-layout::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #characterSelect .character-scroll { z-index: 2 !important; width: 100% !important; height: 100% !important; max-height: none !important; min-height: 0 !important; padding: 0 !important; overflow-x: visible !important; overflow-y: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; scrollbar-gutter: stable !important; } html body:not(.maintenance-mode) #characterSelect .character-options { width: 100% !important; min-height: 100% !important; grid-template-columns: repeat(4, var(--select-card-outer-w)) !important; grid-auto-rows: var(--select-card-outer-h) !important; gap: var(--select-gap) !important; align-content: center !important; justify-content: center !important; justify-items: center !important; padding: 0 !important; } html body:not(.maintenance-mode) #characterSelect .character-option em { bottom: clamp(18px, 1.35vw, 22px) !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) .app.solo .lobby-actions { grid-template-columns: 1fr !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { background: var(--character-select-frame-only-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::before, html body:not(.maintenance-mode) #characterSelect .character-select-layout::after { content: none !important; display: none !important; } } html body:not(.maintenance-mode) #characterSelect .character-option .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #characterPreview .preview-skill > #previewSkill.preview-skill-tip { color: #18334b !important; -webkit-text-fill-color: currentColor !important; border-color: rgba(197, 220, 237, 0.9) !important; border-left-color: rgba(76, 141, 185, 0.94) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 243, 252, 0.92)), rgba(241, 249, 255, 0.95) !important; box-shadow: 0 6px 14px rgba(18, 52, 78, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important; } html body:not(.maintenance-mode) #characterSelect .character-option .skill-tip:not(.mode-tip) .skill-inline-text, html body:not(.maintenance-mode) #characterPreview .preview-skill > #previewSkill.preview-skill-tip .skill-inline-text { color: #18334b !important; -webkit-text-fill-color: currentColor !important; } html body:not(.maintenance-mode) #characterPreview .preview-art, html body:not(.maintenance-mode) #skillInspectBox .preview-art { background-color: transparent !important; background-size: var(--art-size, cover), cover, cover !important; background-position: var(--art-position, center top), center center, center center !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #characterPreview[data-character="Rhasta"][data-mode-active="true"] .preview-art { --art-size: cover !important; --art-position: 50% 100% !important; } html body:not(.maintenance-mode) #characterPreview[data-character="Xiaoyang"][data-mode-active="true"] .preview-art, html body:not(.maintenance-mode) #characterPreview[data-character="Lollipopz"][data-mode-active="true"] .preview-art { --art-size: cover !important; --art-position: 50% 18% !important; } html body:not(.maintenance-mode) #cards[data-attack-style="rogue"] .action-card.attack, html body:not(.maintenance-mode) #cards[data-attack-style="assassination-rogue"] .action-card.attack, html body:not(.maintenance-mode) #cards .action-card.defend, html body:not(.maintenance-mode) #cards .action-card.charge { border-radius: 8px !important; background: radial-gradient(circle at 13% 50%, color-mix(in srgb, var(--action-solid) 18%, transparent) 0 14%, transparent 30%), linear-gradient(90deg, rgba(7, 16, 24, 0.88), rgba(12, 25, 36, 0.78) 44%, rgba(5, 12, 20, 0.92)), linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 36%, color-mix(in srgb, var(--action-solid) 10%, rgba(0, 0, 0, 0.24))) !important; border: 1px solid color-mix(in srgb, var(--action-solid) 34%, rgba(255, 255, 255, 0.16)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -10px 22px rgba(0, 0, 0, 0.34), 0 10px 20px rgba(4, 12, 22, 0.22) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="rogue"] .action-card.attack, html body:not(.maintenance-mode) #cards[data-attack-style="assassination-rogue"] .action-card.attack { --action-solid: #d8e7ff !important; --action-icon-image: var(--action-icon-rogue-clean-art); } html body:not(.maintenance-mode) #cards .action-card.defend { --action-solid: #78ecf0 !important; --action-icon-image: var(--action-icon-defend-clean-art); } html body:not(.maintenance-mode) #cards .action-card.charge { --action-solid: #ffd978 !important; --action-icon-image: var(--action-icon-charge-clean-art); } html body:not(.maintenance-mode) #cards[data-attack-style="rogue"] .action-card.attack::before, html body:not(.maintenance-mode) #cards[data-attack-style="assassination-rogue"] .action-card.attack::before, html body:not(.maintenance-mode) #cards .action-card.defend::before, html body:not(.maintenance-mode) #cards .action-card.charge::before { content: none !important; display: none !important; } html body:not(.maintenance-mode) #cards[data-attack-style="rogue"] .action-card.attack::after, html body:not(.maintenance-mode) #cards[data-attack-style="assassination-rogue"] .action-card.attack::after, html body:not(.maintenance-mode) #cards .action-card.defend::after, html body:not(.maintenance-mode) #cards .action-card.charge::after { content: "" !important; display: block !important; position: absolute !important; left: 5.4% !important; top: 50% !important; z-index: 2 !important; width: clamp(46px, 26%, 66px) !important; max-width: 66px !important; height: auto !important; aspect-ratio: 1 !important; transform: translateY(-50%) !important; background: var(--action-icon-image) center center / contain no-repeat !important; -webkit-mask: none !important; mask: none !important; opacity: 1 !important; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 8px color-mix(in srgb, var(--action-solid) 32%, transparent)) !important; } .game-codex-dialog { z-index: 120 !important; } .game-codex-box { width: min(1120px, calc(100vw - 42px)) !important; max-height: min(780px, calc(100dvh - 42px)) !important; overflow: auto !important; background: linear-gradient(180deg, rgba(245, 251, 255, 0.92), rgba(224, 241, 252, 0.86)), rgba(240, 249, 255, 0.92) !important; } .game-codex-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(14px, 2vw, 22px) !important; } .game-codex-card { position: relative !important; min-height: clamp(166px, 22vh, 244px) !important; aspect-ratio: 16 / 9 !important; display: grid !important; align-content: end !important; justify-items: start !important; padding: clamp(18px, 2.2vw, 28px) !important; overflow: hidden !important; border: 1px solid rgba(219, 235, 248, 0.82) !important; border-radius: 8px !important; background: linear-gradient(180deg, transparent 32%, rgba(8, 20, 36, 0.64)), var(--codex-card-art) center center / cover no-repeat !important; box-shadow: 0 12px 28px rgba(29, 73, 108, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.34) !important; } .game-codex-card::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, rgba(3, 17, 34, 0.34), transparent 48%), radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.2), transparent 28%) !important; pointer-events: none !important; } .game-codex-card span, .game-codex-card small { position: relative !important; z-index: 2 !important; color: #fffaf0 !important; text-shadow: 0 2px 4px rgba(3, 12, 24, 0.84), 0 0 14px rgba(133, 208, 255, 0.34) !important; } .game-codex-card span { font-size: clamp(24px, 2.6vw, 36px) !important; font-weight: 900 !important; line-height: 1.05 !important; } .game-codex-card small { margin-top: 6px !important; font-size: clamp(12px, 1.15vw, 15px) !important; font-weight: 800 !important; } .game-codex-characters { --codex-card-art: var(--codex-card-characters-art); } .game-codex-identity { --codex-card-art: var(--codex-card-identity-art); } .game-codex-opportunity { --codex-card-art: var(--codex-card-opportunity-art); } .game-codex-artifact { --codex-card-art: var(--codex-card-artifact-art); } @media (max-width: 720px) { .game-codex-box { width: min(94vw, 420px) !important; max-height: calc(100dvh - 28px) !important; } .game-codex-grid { grid-template-columns: 1fr !important; } .game-codex-card { min-height: 136px !important; } } /* V1.27Beta final lobby pass: keep the changelog readable without covering the playable panel. */ html body:not(.maintenance-mode) .app.solo .lobby-copy { position: fixed !important; left: clamp(14px, 2vw, 28px) !important; top: clamp(420px, 56vh, 470px) !important; width: clamp(156px, 12vw, 184px) !important; max-width: clamp(156px, 12vw, 184px) !important; z-index: 3 !important; pointer-events: none !important; } html body:not(.maintenance-mode) .app.solo .version-notes { padding: clamp(10px, 1.15vw, 14px) clamp(11px, 1.25vw, 15px) !important; border-radius: 8px !important; background: linear-gradient(180deg, rgba(42, 70, 86, 0.68), rgba(18, 36, 50, 0.52)), rgba(14, 31, 46, 0.56) !important; box-shadow: 0 8px 20px rgba(6, 18, 32, 0.22), inset 0 0 0 1px rgba(229, 242, 255, 0.24) !important; backdrop-filter: blur(4px) saturate(1.05) !important; } html body:not(.maintenance-mode) .app.solo .version-notes strong { margin-top: 7px !important; font-size: clamp(12px, 0.94vw, 14px) !important; line-height: 1.18 !important; } html body:not(.maintenance-mode) .app.solo .version-notes p { margin-top: 6px !important; font-size: clamp(9px, 0.72vw, 11px) !important; line-height: 1.36 !important; } html body:not(.maintenance-mode) .app.solo .lobby-panel, html body:not(.maintenance-mode) .app.solo .lobby-actions, html body:not(.maintenance-mode) .app.solo .join-row { position: relative !important; z-index: 5 !important; } html body:not(.maintenance-mode) .app.solo .lobby-actions > button, html body:not(.maintenance-mode) .app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) .app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) .app.solo .lobby-actions > #showGameCodex { display: grid !important; place-items: center !important; align-content: center !important; justify-content: center !important; justify-items: center !important; text-align: center !important; padding: 0 clamp(16px, 1.8vw, 24px) !important; } html body:not(.maintenance-mode) .app.solo .lobby-actions > button span, html body:not(.maintenance-mode) .app.solo .lobby-actions > button small { display: block !important; width: 100% !important; text-align: center !important; } @media (min-width: 721px) and (max-width: 1480px) { html body:not(.maintenance-mode) .app.solo .lobby-shell { width: min(1080px, calc(100vw - 86px)) !important; transform: none !important; } } @media (min-width: 721px) { html body:not(.maintenance-mode) .app.solo .lobby-actions { width: min(900px, 100%) !important; grid-template-columns: repeat(3, minmax(220px, 300px)) !important; justify-content: center !important; justify-items: center !important; } html body:not(.maintenance-mode) .app.solo .lobby-actions > button, html body:not(.maintenance-mode) .app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) .app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) .app.solo .lobby-actions > #showGameCodex { width: clamp(220px, 21vw, 300px) !important; min-width: clamp(220px, 21vw, 300px) !important; max-width: clamp(220px, 21vw, 300px) !important; height: clamp(78px, 8.5vh, 104px) !important; min-height: clamp(78px, 8.5vh, 104px) !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) .app.solo .lobby-copy { position: static !important; width: 100% !important; max-width: 100% !important; pointer-events: auto !important; } } /* V1.27Beta-codex3 final pass: lobby controls, room toolbar, codex cards, and special-mode pages share one stable template. */ :root { --lobby-bot-practice-crystal-v2-art: url("assets/ui/lobby-bot-practice-crystal-v2-gpt2.png?v=V1.27Beta-codex3"); --lobby-rules-crystal-v2-art: url("assets/ui/lobby-rules-crystal-v2-gpt2.png?v=V1.27Beta-codex3"); --lobby-codex-crystal-v2-art: url("assets/ui/lobby-codex-crystal-v2-gpt2.png?v=V1.27Beta-codex3"); --codex-card-characters-art: url("assets/ui/codex-card-characters-luminary-cast-v4-gpt2.png?v=V1.27Beta-preload"); --codex-card-identity-art: url("assets/ui/codex-card-identity-council-v2-gpt2.png?v=V1.27Beta-codex3"); --codex-card-opportunity-art: url("assets/ui/codex-card-opportunity-fatecards-v3-gpt2.png?v=V1.27Beta-codex3"); --codex-card-artifact-art: url("assets/ui/codex-card-artifact-relicvault-actual-artifacts-v1.png?v=V1.27Beta-preload"); --mode-magic-assassin-bg-v2: url("assets/ui/mode-magic-assassin-background-starpink-v2-gpt2.png?v=V1.27Beta-codex3"); --mode-devour-world-bg-v2: url("assets/ui/mode-devour-world-background-feast-v2-gpt2.png?v=V1.27Beta-codex3"); } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar { position: fixed !important; left: clamp(18px, 2.4vw, 40px) !important; top: clamp(18px, 2.4vh, 32px) !important; width: min(780px, calc(100vw - 48px)) !important; max-width: min(780px, calc(100vw - 48px)) !important; margin: 0 !important; padding: 0 !important; z-index: 12 !important; display: block !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar > div:first-child { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar h1 { max-width: 100% !important; margin: 0 !important; font-size: clamp(50px, 5.8vw, 84px) !important; line-height: 0.94 !important; letter-spacing: 0 !important; text-align: left !important; color: #f8fdff !important; -webkit-text-fill-color: currentColor !important; -webkit-text-stroke: 0 transparent !important; background: none !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58), 0 6px 16px rgba(42, 99, 132, 0.22), 0 0 18px rgba(255, 245, 198, 0.2) !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #subtitle { max-width: min(700px, calc(100vw - 48px)) !important; margin: 9px 0 0 !important; font-size: clamp(15px, 1.55vw, 21px) !important; line-height: 1.32 !important; letter-spacing: 0 !important; text-align: left !important; color: rgba(238, 249, 255, 0.94) !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36), 0 4px 11px rgba(20, 65, 96, 0.24) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby { min-height: 100dvh !important; padding: clamp(128px, 17vh, 172px) clamp(18px, 3vw, 46px) clamp(76px, 9vh, 112px) !important; display: grid !important; place-items: center !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-shell { width: min(940px, calc(100vw - 72px)) !important; max-width: min(940px, calc(100vw - 72px)) !important; margin: 0 auto !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-panel { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(250px, 330px) minmax(260px, 340px) !important; grid-template-areas: "name join" "modes modes" "actions actions" !important; align-items: center !important; justify-content: center !important; gap: clamp(12px, 1.5vw, 18px) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-panel label { grid-area: name !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 9px !important; color: #edfaff !important; -webkit-text-fill-color: currentColor !important; font-size: 14px !important; font-weight: 900 !important; letter-spacing: 0 !important; text-shadow: 0 2px 6px rgba(16, 48, 76, 0.36) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo #nameInput, html body:not(.maintenance-mode) #appRoot.app.solo #joinCode { height: 48px !important; min-height: 48px !important; padding: 0 16px !important; border: 0 !important; border-radius: 0 !important; color: #17415f !important; -webkit-text-fill-color: currentColor !important; font-size: 15px !important; font-weight: 800 !important; line-height: 48px !important; background: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") center / 100% 100% no-repeat !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .join-row { grid-area: join !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(112px, 155px) minmax(124px, 154px) !important; align-items: center !important; justify-content: end !important; gap: 8px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .join-row #joinRoom { width: 100% !important; height: 48px !important; min-height: 48px !important; padding: 0 16px 1px !important; display: grid !important; place-items: center !important; color: #153d5c !important; -webkit-text-fill-color: currentColor !important; font-size: 15px !important; font-weight: 900 !important; line-height: 1 !important; white-space: nowrap !important; border: 0 !important; background: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") center / 100% 100% no-repeat !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .mode-select { grid-area: modes !important; width: 100% !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(10px, 1.15vw, 14px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button { min-height: clamp(92px, 11.2vh, 126px) !important; padding: 14px 16px !important; border-radius: 8px !important; border: 1px solid rgba(202, 231, 249, 0.7) !important; overflow: hidden !important; color: #fff7dc !important; -webkit-text-fill-color: currentColor !important; background: linear-gradient(90deg, rgba(3, 12, 24, 0.64), rgba(3, 12, 24, 0.18) 52%, rgba(3, 12, 24, 0.06)), radial-gradient(circle at 76% 50%, rgba(255, 255, 255, 0.28), transparent 38%), var(--mode-art) center center / auto 86% no-repeat, linear-gradient(180deg, rgba(235, 248, 255, 0.88), rgba(194, 225, 246, 0.6)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 12px 22px rgba(20, 54, 82, 0.18) !important; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.76), 0 0 12px rgba(246, 200, 95, 0.26) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button[data-mode="1v1"], html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button[data-mode="2v2"] { background-size: auto, auto, auto 78%, auto !important; } html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button span { font-size: clamp(24px, 2.25vw, 34px) !important; line-height: 1.05 !important; } html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button small { font-size: clamp(10px, 0.92vw, 13px) !important; color: rgba(255, 248, 219, 0.92) !important; -webkit-text-fill-color: currentColor !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions { grid-area: actions !important; width: min(760px, 100%) !important; margin: 0 auto !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(10px, 1.25vw, 16px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { width: 100% !important; min-width: 0 !important; max-width: none !important; height: clamp(68px, 7.4vh, 84px) !important; min-height: clamp(68px, 7.4vh, 84px) !important; padding: 0 clamp(12px, 1.4vw, 18px) 1px !important; display: grid !important; place-items: center !important; text-align: center !important; border: 0 !important; border-radius: 0 !important; color: #173e5d !important; -webkit-text-fill-color: currentColor !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.12) 58%, transparent), var(--lobby-action-art) center / 100% 100% no-repeat !important; box-shadow: none !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom { --lobby-action-art: var(--lobby-bot-practice-crystal-v2-art) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules { --lobby-action-art: var(--lobby-rules-crystal-v2-art) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { --lobby-action-art: var(--lobby-codex-crystal-v2-art) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-copy { position: fixed !important; left: clamp(14px, 1.8vw, 26px) !important; right: auto !important; top: auto !important; bottom: clamp(14px, 1.8vh, 24px) !important; width: clamp(128px, 11vw, 164px) !important; max-width: clamp(128px, 11vw, 164px) !important; z-index: 14 !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-copy > span, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-copy > strong, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-badges { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes { width: 100% !important; padding: 9px 10px !important; overflow: hidden !important; cursor: default !important; background: linear-gradient(180deg, rgba(18, 38, 56, 0.74), rgba(8, 22, 38, 0.68)), rgba(12, 30, 48, 0.68) !important; border: 1px solid rgba(196, 228, 250, 0.32) !important; border-radius: 8px !important; box-shadow: 0 8px 20px rgba(4, 15, 30, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes span { display: block !important; font-size: clamp(12px, 0.92vw, 14px) !important; line-height: 1 !important; color: #f8fbff !important; -webkit-text-fill-color: currentColor !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes p { max-height: 0 !important; margin-top: 0 !important; opacity: 0 !important; overflow: hidden !important; transition: max-height 160ms ease, opacity 160ms ease, margin-top 160ms ease !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within { width: clamp(240px, 21vw, 320px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within strong { max-height: 48px !important; margin-top: 8px !important; opacity: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within p { max-height: 180px !important; margin-top: 6px !important; opacity: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena { background: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.08), transparent 50%), linear-gradient(180deg, rgba(238, 250, 255, 0.1), rgba(3, 13, 26, 0.12)), var(--room-mode-wallpaper, var(--room-lobby-wallpaper, var(--luminary-home-bg))) center center / contain no-repeat, var(--room-mode-wallpaper, var(--room-lobby-wallpaper, var(--luminary-home-bg))) center center / cover no-repeat, #edf8ff !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .topbar { position: fixed !important; left: clamp(18px, 2.2vw, 34px) !important; top: clamp(14px, 1.8vh, 24px) !important; width: min(560px, 44vw) !important; margin: 0 !important; padding: 0 !important; z-index: 28 !important; display: block !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .topbar h1 { font-size: clamp(36px, 3.6vw, 56px) !important; line-height: 0.95 !important; letter-spacing: 0 !important; text-align: left !important; color: #f8fdff !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 5px 14px rgba(18, 59, 88, 0.26) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #subtitle { max-width: 460px !important; margin-top: 6px !important; font-size: clamp(12px, 1.05vw, 15px) !important; line-height: 1.28 !important; color: rgba(239, 250, 255, 0.92) !important; -webkit-text-fill-color: currentColor !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .room-pill { position: fixed !important; right: clamp(18px, 2.2vw, 32px) !important; top: clamp(16px, 1.8vh, 24px) !important; z-index: 30 !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: hidden !important; background: transparent !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-head { position: fixed !important; left: 50% !important; top: clamp(72px, 9vh, 96px) !important; width: min(520px, 44vw) !important; margin: 0 !important; padding: 10px 16px 12px !important; transform: translateX(-50%) !important; z-index: 22 !important; border-radius: 8px !important; background: linear-gradient(180deg, rgba(238, 250, 255, 0.7), rgba(215, 239, 251, 0.48)) !important; box-shadow: 0 12px 28px rgba(22, 62, 92, 0.16) !important; } html body:not(.maintenance-mode) #roomLobby .room-seat-grid { position: fixed !important; left: 50% !important; top: 56% !important; width: min(1120px, calc(100vw - 86px)) !important; max-width: min(1120px, calc(100vw - 86px)) !important; margin: 0 !important; transform: translate(-50%, -50%) !important; z-index: 18 !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions { position: fixed !important; top: clamp(16px, 2vh, 24px) !important; right: clamp(18px, 2.2vw, 32px) !important; left: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; z-index: 32 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: clamp(18px, 2.2vw, 34px) !important; top: clamp(94px, 12vh, 118px) !important; margin: 0 !important; order: 0 !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #startGame, html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #copyRoomLobby, html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #refreshRoomLobby, html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #showRulesRoomLobby, html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #leaveRoomLobby { pointer-events: auto !important; width: clamp(130px, 9.4vw, 158px) !important; min-width: clamp(130px, 9.4vw, 158px) !important; max-width: clamp(130px, 9.4vw, 158px) !important; height: clamp(46px, 5.1vh, 56px) !important; min-height: clamp(46px, 5.1vh, 56px) !important; padding: 0 14px 1px !important; display: grid !important; place-items: center !important; text-align: center !important; line-height: 1 !important; white-space: nowrap !important; border: 0 !important; border-radius: 0 !important; color: #153d5c !important; -webkit-text-fill-color: currentColor !important; background: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") center / 100% 100% no-repeat !important; box-shadow: none !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #startGame { width: clamp(150px, 10.8vw, 190px) !important; min-width: clamp(150px, 10.8vw, 190px) !important; } } .game-codex-box { width: min(1020px, calc(100vw - 48px)) !important; max-height: min(760px, calc(100dvh - 48px)) !important; } .game-codex-grid { gap: clamp(12px, 1.6vw, 18px) !important; } .game-codex-card { min-height: clamp(150px, 20vh, 218px) !important; border: 0 !important; border-radius: 8px !important; background: linear-gradient(180deg, transparent 24%, rgba(2, 12, 24, 0.68)), linear-gradient(90deg, rgba(3, 16, 32, 0.38), transparent 54%), var(--codex-card-art) center center / cover no-repeat !important; box-shadow: 0 12px 26px rgba(24, 67, 100, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important; } .game-codex-card::before { background: radial-gradient(circle at 83% 18%, rgba(255, 255, 255, 0.18), transparent 26%), linear-gradient(90deg, rgba(0, 10, 23, 0.22), transparent 54%) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] { --special-mode-bg: var(--mode-magic-assassin-bg-v2); --special-mode-art-size: cover; --special-mode-art-position: 50% 18%; --special-mode-title-a: #fff9fe; --special-mode-title-b: #ff96cf; --special-mode-title-c: #b9e8ff; --special-mode-skill-a: #fff8fd; --special-mode-skill-b: #ff77c4; --special-mode-skill-c: #80d8ff; --special-mode-copy-bg: linear-gradient(180deg, rgba(45, 18, 40, 0.78), rgba(13, 8, 22, 0.88)); } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] { --special-mode-bg: var(--mode-devour-world-bg-v2); --special-mode-art-size: 100% auto; --special-mode-art-position: 50% 64%; --special-mode-title-a: #fff8cc; --special-mode-title-b: #e5a948; --special-mode-title-c: #347e63; --special-mode-skill-a: #fff8d9; --special-mode-skill-b: #e7aa42; --special-mode-skill-c: #2e8a67; --special-mode-copy-bg: linear-gradient(180deg, rgba(255, 250, 229, 0.86), rgba(255, 232, 176, 0.78)); } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] { --special-mode-bg: url("assets/ui/mode-storm-panel-softred-gpt2.png?v=v1.21Beta-storm-softred-bg"); --special-mode-art-size: 126% auto; --special-mode-art-position: 50% 18%; --special-mode-skill-a: #fffefa; --special-mode-skill-b: #8feeff; --special-mode-skill-c: #ff6e68; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-panel, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-panel, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-panel { width: min(1160px, calc(100vw - 56px)) !important; min-height: min(680px, calc(100dvh - 62px)) !important; max-height: calc(100dvh - 62px) !important; padding: clamp(30px, 3vw, 44px) clamp(34px, 3.4vw, 52px) !important; display: grid !important; grid-template-columns: minmax(360px, 0.92fr) minmax(360px, 1fr) !important; gap: clamp(28px, 3vw, 46px) !important; align-items: stretch !important; overflow: hidden !important; border: 0 !important; border-radius: 8px !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 46%, rgba(0, 10, 20, 0.18)), var(--special-mode-bg) center center / cover no-repeat !important; box-shadow: 0 24px 58px rgba(4, 14, 28, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-art, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-art, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art { width: 100% !important; height: 100% !important; min-height: clamp(500px, 63vh, 620px) !important; align-self: stretch !important; border: 0 !important; border-radius: 8px !important; overflow: visible !important; background-size: var(--special-mode-art-size) !important; background-position: var(--special-mode-art-position) !important; background-repeat: no-repeat !important; box-shadow: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-copy, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-copy, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-copy { min-height: 100% !important; padding: clamp(22px, 2.4vw, 34px) !important; display: grid !important; grid-template-rows: auto auto auto minmax(104px, auto) minmax(76px, 1fr) auto auto !important; align-content: stretch !important; gap: clamp(10px, 1.25vh, 15px) !important; border-radius: 8px !important; background: var(--special-mode-copy-bg) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 18px 38px rgba(3, 15, 28, 0.18) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-copy { color: #39290c !important; -webkit-text-fill-color: currentColor !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogName, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogName, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogName { width: 100% !important; margin: 0 !important; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", sans-serif !important; font-size: clamp(38px, 4vw, 58px) !important; font-weight: 950 !important; line-height: 1.02 !important; letter-spacing: 0 !important; text-align: left !important; color: transparent !important; -webkit-text-fill-color: transparent !important; background: linear-gradient(180deg, var(--special-mode-title-a), var(--special-mode-title-b) 48%, var(--special-mode-title-c)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-stroke: 0 transparent !important; text-shadow: none !important; filter: drop-shadow(0 4px 10px rgba(0, 12, 24, 0.28)) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogCharacter { display: inline-flex !important; width: fit-content !important; max-width: 100% !important; margin: 0 !important; padding: 4px 11px 5px !important; justify-self: start !important; border-radius: 999px !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogSkill, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogSkill, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogSkill { width: fit-content !important; max-width: 100% !important; min-height: 42px !important; padding: 6px 14px 7px 10px !important; display: inline-grid !important; grid-auto-flow: column !important; grid-auto-columns: max-content !important; align-items: center !important; justify-content: start !important; justify-self: start !important; gap: 9px !important; border-radius: 6px !important; font-size: clamp(18px, 1.7vw, 25px) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; color: transparent !important; -webkit-text-fill-color: transparent !important; background: linear-gradient(180deg, var(--special-mode-skill-a), var(--special-mode-skill-b) 52%, var(--special-mode-skill-c)), rgba(255, 255, 255, 0.06) !important; -webkit-background-clip: text, border-box !important; background-clip: text, border-box !important; text-shadow: none !important; filter: drop-shadow(0 3px 8px rgba(0, 12, 24, 0.32)) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog #modeDialogSkill .skill-inline-icon { width: clamp(30px, 2.6vw, 40px) !important; height: clamp(30px, 2.6vw, 40px) !important; border-radius: 7px !important; object-fit: contain !important; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.36)) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog #modeDialogSkill .skill-inline-text { display: block !important; min-width: 0 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogDescription, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogDescription, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogDescription, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-story, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-story, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-story { margin: 0 !important; padding: 0 !important; font-size: clamp(13px, 1.12vw, 16px) !important; line-height: 1.56 !important; letter-spacing: 0 !important; overflow-wrap: anywhere !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-close, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-close, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-close, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-lock, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-lock, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-lock, html body:not(.maintenance-mode) #modeDialog.mode-dialog .mode-dialog-actions button, html body:not(.maintenance-mode) .rules-head button { min-width: 118px !important; height: 46px !important; min-height: 46px !important; padding: 0 14px 1px !important; display: grid !important; place-items: center !important; text-align: center !important; line-height: 1 !important; white-space: nowrap !important; word-break: keep-all !important; border: 0 !important; border-radius: 0 !important; color: #153d5c !important; -webkit-text-fill-color: currentColor !important; background: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") center / 100% 100% no-repeat !important; box-shadow: none !important; } html body:not(.maintenance-mode) #characterPreview[data-character="Rhasta"][data-mode-active="true"] .preview-art, html body:not(.maintenance-mode) #characterSelect .mini-art[data-character="Rhasta"][data-mode-active="devour-world"], html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art { --art-size: 100% auto !important; --art-position: 50% 64% !important; background-size: 100% auto !important; background-position: 50% 64% !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar { left: 14px !important; top: 14px !important; width: calc(100vw - 28px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar h1 { font-size: clamp(32px, 9vw, 44px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #subtitle { font-size: clamp(12px, 3.5vw, 15px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby { padding: 112px 12px 76px !important; overflow-y: auto !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-shell { width: min(94vw, 520px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-panel { grid-template-columns: 1fr !important; grid-template-areas: "name" "join" "modes" "actions" !important; gap: 10px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .mode-select { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button { min-height: 76px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions { grid-template-columns: 1fr !important; width: min(310px, 100%) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .join-row { grid-template-columns: minmax(0, 1fr) minmax(118px, 142px) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-panel, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-panel, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-panel { width: min(94vw, 430px) !important; min-height: calc(100dvh - 28px) !important; max-height: calc(100dvh - 28px) !important; padding: 16px !important; grid-template-columns: 1fr !important; grid-template-rows: minmax(300px, 48dvh) minmax(0, 1fr) !important; gap: 12px !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-art, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-art, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art { min-height: 300px !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-copy, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-copy, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-copy { min-height: 0 !important; padding: 15px !important; grid-template-rows: auto auto auto minmax(72px, auto) minmax(42px, 1fr) auto auto !important; gap: 7px !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogName, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogName, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogName { font-size: clamp(31px, 8.6vw, 40px) !important; } } /* V1.27Beta-codex5 final lobby mode image override. Keep the mode paintings clear: 2x2 layout, cover fill, no white veil or white edge. */ /* V1.27Beta-codex11 mobile character-select white frame lock. Phone character cards must live inside the white painted frame, with real top/bottom breathing room. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app .arena { min-height: 100dvh !important; max-height: 100dvh !important; padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)) !important; overflow: hidden !important; align-content: stretch !important; justify-items: center !important; } html body:not(.maintenance-mode) #characterSelect.character-select, html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) { position: fixed !important; inset: max(8px, env(safe-area-inset-top)) 6px max(8px, env(safe-area-inset-bottom)) 6px !important; z-index: 24 !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-rows: 42px minmax(0, 1fr) 18px !important; gap: 6px !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #characterSelect .status-line { position: relative !important; z-index: 5 !important; width: min(100%, 560px) !important; height: 42px !important; min-height: 42px !important; margin: 0 auto !important; padding: 0 7px !important; display: grid !important; grid-template-columns: minmax(68px, 0.8fr) minmax(0, 1.35fr) minmax(78px, 0.8fr) !important; align-items: center !important; justify-items: center !important; gap: 5px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(226, 242, 252, 0.74)), rgba(243, 250, 255, 0.88) !important; box-shadow: 0 8px 18px rgba(26, 66, 98, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important; } html body:not(.maintenance-mode) #characterSelect .status-line span, html body:not(.maintenance-mode) #characterSelect .status-line strong { max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; color: #183d5d !important; -webkit-text-fill-color: currentColor !important; white-space: nowrap !important; text-overflow: ellipsis !important; text-align: center !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important; } html body:not(.maintenance-mode) #characterSelect .status-line span { justify-self: start !important; font-size: 10px !important; } html body:not(.maintenance-mode) #characterSelect .status-line strong { justify-self: center !important; font-size: clamp(13px, 3.6vw, 16px) !important; line-height: 1 !important; } html body:not(.maintenance-mode) #characterSelect .status-line #leaveCharacterSelect { justify-self: end !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 31px !important; min-height: 31px !important; padding: 0 8px 1px !important; display: grid !important; place-items: center !important; color: #183d5d !important; -webkit-text-fill-color: currentColor !important; font-size: 11px !important; line-height: 1 !important; white-space: nowrap !important; border: 0 !important; border-radius: 0 !important; background: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") center / contain no-repeat !important; box-shadow: none !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { position: relative !important; z-index: 2 !important; width: min(100%, 560px) !important; height: 100% !important; min-height: 0 !important; max-width: 560px !important; max-height: 100% !important; margin: 0 auto !important; padding: clamp(30px, 7.5vw, 40px) clamp(17px, 4.6vw, 24px) clamp(40px, 9vw, 52px) !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; overflow: hidden !important; border: 0 !important; border-radius: 10px !important; background: radial-gradient(ellipse at 50% 9%, rgba(255, 255, 255, 0.98), transparent 56%), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.96) 44%, rgba(238, 248, 255, 0.94)) !important; box-shadow: 0 18px 38px rgba(28, 70, 104, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.86) !important; isolation: isolate !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::before { content: "" !important; position: absolute !important; z-index: 4 !important; inset: 0 !important; display: block !important; background-image: url("assets/ui/character-select-panel-crystal-frame-only-gpt2.png?v=V1.27Beta-codex11"), url("assets/ui/character-select-panel-crystal-frame-only-gpt2.png?v=V1.27Beta-codex11") !important; background-position: center top, center bottom !important; background-size: 100% auto, 100% auto !important; background-repeat: no-repeat, no-repeat !important; filter: drop-shadow(0 0 10px rgba(142, 210, 255, 0.16)) drop-shadow(0 8px 18px rgba(18, 62, 94, 0.12)) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::after { content: "" !important; position: absolute !important; z-index: 0 !important; inset: clamp(24px, 6.2vw, 34px) clamp(13px, 3.8vw, 21px) clamp(32px, 7.8vw, 44px) !important; display: block !important; border: 1px solid rgba(202, 228, 244, 0.74) !important; border-radius: 8px !important; background: radial-gradient(ellipse at 50% 16%, rgba(255, 255, 255, 0.96), transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 252, 255, 0.92) 50%, rgba(236, 247, 255, 0.9)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -16px 30px rgba(141, 196, 226, 0.1) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #characterSelect .character-scroll { position: relative !important; z-index: 2 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: stable both-edges !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overscroll-behavior: contain !important; } html body:not(.maintenance-mode) #characterSelect .character-options { width: 100% !important; min-height: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: clamp(218px, calc((100dvh - 174px) / 2.18), 352px) !important; justify-content: center !important; justify-items: stretch !important; align-content: start !important; gap: clamp(9px, 2.6vw, 12px) !important; padding: clamp(10px, 2.8vw, 15px) 0 clamp(30px, 7vw, 40px) !important; margin: 0 auto !important; box-sizing: border-box !important; overflow: visible !important; } html body:not(.maintenance-mode) #characterSelect .character-option { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: clamp(10px, 2.6vw, 14px) clamp(7px, 2vw, 10px) !important; box-sizing: border-box !important; overflow: visible !important; } html body:not(.maintenance-mode) #characterSelect .character-option span { width: 100% !important; height: 100% !important; min-height: 0 !important; border-radius: 8px !important; overflow: visible !important; } html body:not(.maintenance-mode) #characterSelect .character-option span::before { inset: calc(clamp(10px, 2.6vw, 14px) * -1) calc(clamp(7px, 2vw, 10px) * -1) !important; background-size: contain !important; } html body:not(.maintenance-mode) #characterSelect .mini-art { border-radius: 8px !important; } html body:not(.maintenance-mode) #characterSelect > .hint { position: relative !important; z-index: 5 !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; color: rgba(238, 248, 255, 0.9) !important; font-size: 10px !important; line-height: 18px !important; text-align: center !important; text-shadow: 0 1px 3px rgba(10, 38, 62, 0.42) !important; } } /* V1.27Beta-codex8 final mobile battle touch rescue. Keep the report compact and out of the action hit-area; keep portraits square-cropped. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .arena { grid-template-rows: auto minmax(0, 1fr) !important; gap: 4px !important; padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)) !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle.battle:not([hidden]) { position: relative !important; z-index: 30 !important; width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; height: calc(100dvh - 20px) !important; max-height: calc(100dvh - 20px) !important; margin: 0 auto !important; padding: 0 0 calc(100px + env(safe-area-inset-bottom)) !important; box-sizing: border-box !important; display: grid !important; grid-template-rows: minmax(0, 1fr) 54px 38px 72px !important; gap: 5px !important; overflow: hidden !important; transform: none !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #battle .fighters { --phone-vs: 28px; min-height: 0 !important; height: 100% !important; max-height: none !important; align-items: start !important; justify-items: stretch !important; padding: 4px !important; gap: 4px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .combatant, html body:not(.maintenance-mode) #battle .opponent-combatant { align-self: start !important; width: 100% !important; height: auto !important; max-height: 100% !important; min-height: 0 !important; align-content: start !important; grid-template-rows: auto auto !important; gap: 5px !important; padding: 6px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .fighter { width: 100% !important; min-height: 0 !important; height: auto !important; grid-template-rows: auto auto !important; align-content: start !important; gap: 4px !important; padding: 5px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .character-face { position: relative !important; width: 100% !important; max-width: min(38vw, 156px) !important; aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; max-height: min(38vw, 156px) !important; justify-self: center !important; align-self: start !important; display: block !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .avatar { width: 100% !important; height: 100% !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; background-size: var(--art-size, cover), cover, cover !important; background-position: var(--art-position, center 12%), center, center !important; } html body:not(.maintenance-mode) #battle .role-card { position: absolute !important; left: 5px !important; right: 5px !important; bottom: 5px !important; min-height: 32px !important; max-height: 45px !important; padding: 4px 5px !important; overflow: hidden !important; z-index: 3 !important; } html body:not(.maintenance-mode) #battle .role-card > span { -webkit-line-clamp: 1 !important; } html body:not(.maintenance-mode) #battle .fighter-panel { height: 58px !important; min-height: 58px !important; max-height: 58px !important; padding: 5px !important; } html body:not(.maintenance-mode) #battle #cards, html body:not(.maintenance-mode) #battle .battle-libraries, html body:not(.maintenance-mode) #battle .utility { position: relative !important; z-index: 60 !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #battle #cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; padding: 0 4px !important; } html body:not(.maintenance-mode) #battle #cards .action-card { height: 54px !important; min-height: 54px !important; max-height: 54px !important; touch-action: manipulation !important; } html body:not(.maintenance-mode) #battle .battle-libraries, html body:not(.maintenance-mode) #battle .utility { gap: 5px !important; padding: 0 4px !important; } html body:not(.maintenance-mode) #battle .battle-libraries .library-action, html body:not(.maintenance-mode) #battle .utility button { height: 36px !important; min-height: 36px !important; max-height: 36px !important; touch-action: manipulation !important; } html body:not(.maintenance-mode) #sidePanel.side { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; z-index: 12 !important; width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; height: 86px !important; min-height: 0 !important; max-height: 86px !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: hidden !important; pointer-events: none !important; } html body:not(.maintenance-mode) #sidePanel.side section:first-child { width: 100% !important; height: 86px !important; min-height: 0 !important; max-height: 86px !important; margin: 0 !important; padding: 6px 8px !important; display: grid !important; grid-template-rows: 24px minmax(0, 1fr) !important; gap: 4px !important; overflow: hidden !important; border-radius: 10px !important; background: linear-gradient(180deg, rgba(5, 18, 36, 0.82), rgba(5, 15, 30, 0.72)), rgba(10, 30, 52, 0.68) !important; box-shadow: 0 10px 24px rgba(2, 10, 22, 0.24), inset 0 0 0 1px rgba(198, 229, 255, 0.18) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #sidePanel.side .rules, html body:not(.maintenance-mode) #sidePanel.side section:first-child > h2 { display: none !important; } html body:not(.maintenance-mode) #sidePanel.side .battle-status { min-height: 0 !important; height: 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 0 2px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #sidePanel.side .battle-status span, html body:not(.maintenance-mode) #sidePanel.side .battle-status strong { font-size: 11px !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #sidePanel.side #log { height: 46px !important; max-height: 46px !important; min-height: 0 !important; display: grid !important; grid-auto-rows: minmax(0, 1fr) !important; gap: 3px !important; overflow: hidden !important; padding: 0 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #sidePanel.side #log article { min-height: 0 !important; padding: 3px 6px !important; display: none !important; overflow: hidden !important; border-radius: 6px !important; } html body:not(.maintenance-mode) #sidePanel.side #log article:nth-child(-n + 2) { display: block !important; } html body:not(.maintenance-mode) #sidePanel.side #log article strong, html body:not(.maintenance-mode) #sidePanel.side #log article small { font-size: 9px !important; line-height: 1.08 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* V1.27Beta-codex7 final mobile lobby title/action row override. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar { left: 0 !important; right: 0 !important; top: clamp(16px, 3vh, 28px) !important; width: 100vw !important; max-width: 100vw !important; padding: 0 18px !important; justify-content: center !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar > div:first-child { width: min(92vw, 620px) !important; margin: 0 auto !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar h1 { margin-inline: auto !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #subtitle { max-width: min(92vw, 620px) !important; margin: 8px auto 0 !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions { width: min(94vw, 560px) !important; max-width: 560px !important; margin-inline: auto !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(6px, 1.8vw, 10px) !important; align-items: stretch !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > button, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { width: 100% !important; max-width: none !important; min-width: 0 !important; height: clamp(58px, 8.2vh, 72px) !important; min-height: clamp(58px, 8.2vh, 72px) !important; padding: 0 6px 1px !important; display: grid !important; align-content: center !important; justify-items: center !important; gap: 1px !important; text-align: center !important; line-height: 1.08 !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > button span { width: 100% !important; font-size: clamp(15px, 4.3vw, 20px) !important; line-height: 1.06 !important; white-space: nowrap !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > button small { width: 100% !important; font-size: clamp(8px, 2.45vw, 11px) !important; line-height: 1.08 !important; white-space: nowrap !important; text-align: center !important; } } :root { --home-mode-1v1-art: url("assets/ui/mode-1v1-cover-crystal-clear-v3-button-gpt2.png?v=V1.27Beta-codex5"); --home-mode-2v2-art: url("assets/ui/mode-2v2-cover-crystal-clear-v3-button-gpt2.png?v=V1.27Beta-codex5"); --home-mode-3v3-art: url("assets/ui/mode-3v3-cover-crystal-clear-v3-button-gpt2.png?v=V1.27Beta-codex5"); --home-mode-identity-art: url("assets/ui/mode-identity-cover-crystal-clear-v3-button-gpt2.png?v=V1.27Beta-codex5"); --room-mode-bg-1v1: url("assets/ui/mode-1v1-cover-crystal-clear-v3-full-gpt2.png?v=V1.27Beta-codex5"); --room-mode-bg-2v2: url("assets/ui/mode-2v2-cover-crystal-clear-v3-full-gpt2.png?v=V1.27Beta-codex5"); --room-mode-bg-3v3: url("assets/ui/mode-3v3-cover-crystal-clear-v3-full-gpt2.png?v=V1.27Beta-codex5"); --room-mode-bg-identity: url("assets/ui/mode-identity-cover-crystal-clear-v3-full-gpt2.png?v=V1.27Beta-codex5"); } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .arena { background: linear-gradient(180deg, rgba(3, 10, 20, 0.04), rgba(3, 10, 20, 0.16) 100%), var(--luminary-home-bg) center center / cover no-repeat !important; background-color: #061425 !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .arena::before, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .arena::after, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby::before, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby::after, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-shell::before, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-shell::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select { width: min(960px, 100%) !important; margin: 0 auto !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: clamp(128px, 16vh, 174px) !important; gap: clamp(12px, 1.4vw, 18px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="1v1"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="2v2"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="3v3"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="identity"] { width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; padding: clamp(14px, 1.4vw, 20px) !important; display: grid !important; align-content: center !important; justify-items: start !important; overflow: hidden !important; border: 0 !important; border-radius: 8px !important; background-image: linear-gradient(90deg, rgba(0, 9, 18, 0.54) 0%, rgba(0, 9, 18, 0.3) 38%, rgba(0, 9, 18, 0.06) 78%), var(--mode-art) !important; background-size: cover, cover !important; background-position: center center, center center !important; background-repeat: no-repeat, no-repeat !important; background-color: #061425 !important; box-shadow: 0 14px 28px rgba(4, 18, 34, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; filter: saturate(1.1) contrast(1.08) brightness(0.98) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button::before, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button:hover, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button:focus-visible { filter: saturate(1.18) contrast(1.12) brightness(1.02) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button.selected { box-shadow: 0 16px 30px rgba(4, 18, 34, 0.32), 0 0 0 2px rgba(238, 187, 82, 0.58), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: clamp(86px, 17vw, 116px) !important; gap: 9px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button { padding: 12px !important; } } /* V1.27Beta-codex6 final lobby input alignment override. */ html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-panel label { gap: clamp(12px, 1.25vw, 18px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo #nameInput { padding-left: clamp(34px, 3.2vw, 48px) !important; padding-right: clamp(18px, 2vw, 26px) !important; text-indent: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.solo #joinCode { padding-left: clamp(24px, 2.3vw, 34px) !important; padding-right: clamp(14px, 1.8vw, 22px) !important; text-indent: 0 !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo #nameInput { padding-left: 42px !important; padding-right: 18px !important; } html body:not(.maintenance-mode) #appRoot.app.solo #joinCode { padding-left: 28px !important; padding-right: 16px !important; } } /* V1.27Beta-codex22 true final lobby action fit and version button override. */ html body:not(.maintenance-mode) #appRoot.app.solo .lobby-copy { width: auto !important; max-width: none !important; min-width: 0 !important; height: 34px !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded { width: 104px !important; min-width: 104px !important; max-width: 104px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 11px !important; display: grid !important; place-items: center !important; overflow: hidden !important; cursor: pointer !important; pointer-events: auto !important; border: 1px solid rgba(226, 239, 250, 0.56) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(250, 254, 255, 0.88), rgba(203, 225, 244, 0.74)), linear-gradient(135deg, rgba(92, 155, 214, 0.34), rgba(255, 244, 197, 0.28)) !important; box-shadow: 0 8px 18px rgba(3, 19, 36, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(102, 151, 190, 0.22) !important; backdrop-filter: blur(4px) saturate(1.06) !important; -webkit-backdrop-filter: blur(4px) saturate(1.06) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes::before, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded span { display: block !important; max-height: 32px !important; margin: 0 !important; opacity: 1 !important; transform: none !important; font-size: 12px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; color: #173a58 !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within p, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded strong, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded p { display: none !important; max-height: 0 !important; margin: 0 !important; opacity: 0 !important; overflow: hidden !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { overflow: visible !important; clip-path: none !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1) 56%, transparent), var(--lobby-action-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom::after, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules::after, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex::after { content: none !important; display: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo .lobby-copy { left: 12px !important; bottom: 10px !important; height: 32px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded { width: 94px !important; min-width: 94px !important; max-width: 94px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes span { font-size: 11px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions { width: min(92vw, 540px) !important; gap: clamp(4px, 1.2vw, 7px) !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { height: clamp(62px, 9.2vh, 82px) !important; min-height: clamp(62px, 9.2vh, 82px) !important; padding: 0 5px 1px !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 58%, transparent), var(--lobby-action-art) center center / contain no-repeat !important; } } /* V1.27Beta-codex23 mobile home edge unclipping EOF lock. Removes the inherited 8px mobile shell inset that clipped the cover and action art. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) { width: 100vw !important; max-width: 100vw !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; overflow-x: clip !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .arena { width: 100vw !important; max-width: 100vw !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; overflow-x: clip !important; background: linear-gradient(180deg, rgba(3, 10, 20, 0.03), rgba(3, 10, 20, 0.13) 100%), var(--luminary-home-bg) center center / contain no-repeat, var(--luminary-home-bg) center center / cover no-repeat, #eaf7ff !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby { width: 100vw !important; max-width: 100vw !important; min-height: 100dvh !important; padding: 112px max(12px, env(safe-area-inset-right)) 76px max(12px, env(safe-area-inset-left)) !important; overflow-x: visible !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions { width: min(calc(100vw - 20px), 540px) !important; max-width: calc(100vw - 20px) !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07) 58%, transparent), var(--lobby-action-art) center center / calc(100% - 8px) auto no-repeat !important; background-origin: border-box !important; background-clip: border-box !important; } } /* V1.27Beta-codex24 home action image buttons. The three lobby utility actions are standalone clickable art, not glass panels. */ html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions { background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { aspect-ratio: 2.3 / 1 !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 clamp(10px, 1.2vw, 16px) 1px !important; border: 0 !important; border-radius: 0 !important; outline-offset: 2px !important; overflow: visible !important; clip-path: none !important; background: var(--lobby-action-art) center center / contain no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 10px 16px rgba(6, 24, 42, 0.2)) drop-shadow(0 0 10px rgba(126, 217, 255, 0.12)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom::after, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules::after, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex::before, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom:hover, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules:hover, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex:hover, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom:focus-visible, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules:focus-visible, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex:focus-visible { transform: translateY(-1px) !important; filter: drop-shadow(0 12px 18px rgba(6, 24, 42, 0.24)) drop-shadow(0 0 14px rgba(126, 217, 255, 0.18)) saturate(1.04) brightness(1.02) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules, html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { aspect-ratio: 2.3 / 1 !important; height: auto !important; min-height: 0 !important; padding: 0 6px 1px !important; background: var(--lobby-action-art) center center / contain no-repeat !important; } } /* V1.27Beta-codex25 home action solid art. Use standalone button artwork instead of the translucent crystal panels. */ html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom { --lobby-action-art: url("assets/ui/lobby-bot-practice-solid-fast.webp?v=V1.27Beta-codex25") !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules { --lobby-action-art: url("assets/ui/lobby-rules-solid-gpt2.png?v=V1.27Beta-preload") !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { --lobby-action-art: url("assets/ui/character-codex-button-gpt2.png?v=V1.27Beta-codex25") !important; } /* V1.27Beta-codex26 latest portrait lobby actions and plastic input strips. */ html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom { --lobby-action-art: url("assets/ui/home-action-bot-practice-portrait-v2.png?v=V1.27Beta-codex26") !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules { --lobby-action-art: url("assets/ui/home-action-rules-portrait-v2.png?v=V1.27Beta-codex26") !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { --lobby-action-art: url("assets/ui/home-action-codex-portrait-v2.png?v=V1.27Beta-codex26") !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-panel label { grid-template-columns: 54px minmax(0, 1fr) !important; gap: 10px !important; align-items: center !important; justify-items: center !important; min-height: 48px !important; padding-left: 6px !important; color: #f5fbff !important; -webkit-text-fill-color: currentColor !important; font-size: 17px !important; font-weight: 950 !important; line-height: 48px !important; text-align: center !important; text-shadow: 0 2px 6px rgba(8, 35, 64, 0.48), 0 0 12px rgba(126, 217, 255, 0.22) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .join-row { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo #nameInput, html body:not(.maintenance-mode) #appRoot.app.solo #joinCode { justify-self: stretch !important; height: 48px !important; min-height: 48px !important; padding: 0 20px 0 22px !important; border: 1px solid rgba(101, 154, 196, 0.58) !important; border-radius: 999px !important; color: #153d5c !important; -webkit-text-fill-color: currentColor !important; font-size: 15px !important; font-weight: 850 !important; line-height: 48px !important; text-indent: 0 !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(217, 239, 255, 0.82) 58%, rgba(188, 222, 246, 0.82)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -8px 14px rgba(84, 142, 185, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.34) !important; } html body:not(.maintenance-mode) #appRoot.app.solo #nameInput { padding-left: 24px !important; } html body:not(.maintenance-mode) #appRoot.app.solo #joinCode { padding-left: 24px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(219, 240, 255, 0.86) 58%, rgba(189, 224, 248, 0.86)) !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.solo .join-row { grid-template-columns: 168px 154px !important; gap: 10px !important; justify-content: end !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo .lobby-panel label { grid-template-columns: 58px minmax(0, 1fr) !important; gap: 8px !important; padding-left: 2px !important; font-size: 16px !important; } html body:not(.maintenance-mode) #appRoot.app.solo #nameInput, html body:not(.maintenance-mode) #appRoot.app.solo #joinCode { padding-left: 22px !important; padding-right: 18px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .join-row { grid-template-columns: minmax(0, 1fr) minmax(118px, 142px) !important; gap: 8px !important; } } /* V1.27Beta-codex27 nickname strip refinement. The name label and name input now share one plastic strip aligned to the mode cards. */ html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom { --lobby-action-art: url("assets/ui/home-action-bot-practice-portrait-v2.png?v=V1.27Beta-codex27") !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules { --lobby-action-art: url("assets/ui/home-action-rules-portrait-v2.png?v=V1.27Beta-codex27") !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { --lobby-action-art: url("assets/ui/home-action-codex-portrait-v2.png?v=V1.27Beta-codex27") !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-panel label { grid-template-columns: 70px minmax(0, 1fr) !important; gap: 0 !important; width: 100% !important; height: 48px !important; min-height: 48px !important; padding: 0 14px 0 18px !important; border: 1px solid rgba(101, 154, 196, 0.58) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(217, 239, 255, 0.82) 58%, rgba(188, 222, 246, 0.82)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -8px 14px rgba(84, 142, 185, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.34) !important; color: #153d5c !important; -webkit-text-fill-color: currentColor !important; font-size: 17px !important; font-weight: 950 !important; line-height: 48px !important; text-align: center !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important; } html body:not(.maintenance-mode) #appRoot.app.solo #nameInput { height: 46px !important; min-height: 46px !important; padding: 0 10px 0 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; line-height: 46px !important; } html body:not(.maintenance-mode) #appRoot.app.solo #joinCode { border-radius: 999px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(219, 240, 255, 0.86) 58%, rgba(189, 224, 248, 0.86)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -8px 14px rgba(84, 142, 185, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.34) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo .lobby-panel label { grid-template-columns: 64px minmax(0, 1fr) !important; padding: 0 12px 0 14px !important; font-size: 16px !important; } html body:not(.maintenance-mode) #appRoot.app.solo #nameInput { padding-left: 12px !important; padding-right: 8px !important; } } /* V1.27Beta-codex28 desktop select-frame, special-mode dialog, and lobby title pass. */ html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #createBotRoom { --lobby-action-art: url("assets/ui/lobby-bot-practice-crystal-v2-gpt2.png?v=V1.27Beta-codex30") !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showRules { --lobby-action-art: url("assets/ui/lobby-rules-crystal-v2-gpt2.png?v=V1.27Beta-codex30") !important; } html body:not(.maintenance-mode) #appRoot.app.solo .lobby-actions > #showGameCodex { --lobby-action-art: url("assets/ui/lobby-codex-crystal-v2-gpt2.png?v=V1.27Beta-codex30") !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar h1, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar h1::after { font-size: clamp(20px, 1.55vw, 30px) !important; line-height: 1.02 !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar > div:first-child { max-width: min(360px, 38vw) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #subtitle { font-size: clamp(10px, 0.85vw, 13px) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar h1, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar h1::after { font-size: clamp(18px, 5.4vw, 24px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar > div:first-child { max-width: min(270px, 74vw) !important; } } html body:not(.maintenance-mode) #characterSelect .character-option em { bottom: clamp(23px, 1.65vw, 28px) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #characterSelect .character-option em { bottom: clamp(17px, 4.8vw, 23px) !important; } } @media (min-width: 721px) { html body:not(.maintenance-mode) #characterSelect.character-select, html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) { --select-visible-pad-y: clamp(8px, 1vh, 12px) !important; grid-template-rows: clamp(42px, 5.2vh, 50px) minmax(0, 1fr) auto !important; } html body:not(.maintenance-mode) #characterSelect .status-line { min-height: 0 !important; height: clamp(42px, 5.2vh, 50px) !important; padding: 0 clamp(12px, 1.2vw, 18px) !important; } html body:not(.maintenance-mode) #characterSelect .status-line strong { font-size: clamp(20px, 1.5vw, 28px) !important; line-height: 1 !important; } html body:not(.maintenance-mode) #characterSelect .status-line #leaveCharacterSelect { height: clamp(34px, 4.2vh, 42px) !important; min-height: 0 !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { position: relative !important; isolation: isolate !important; overflow: visible !important; background: radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0.86) 43%, transparent 66%), linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 250, 255, 0.94) 52%, rgba(224, 242, 255, 0.88)) !important; box-shadow: 0 18px 42px rgba(20, 66, 98, 0.14), 0 0 22px rgba(107, 202, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::before { content: "" !important; position: absolute !important; z-index: 7 !important; inset: clamp(-24px, -2vh, -14px) clamp(-8px, -0.45vw, -2px) clamp(-10px, -1vh, -5px) !important; display: block !important; pointer-events: none !important; background: var(--character-select-frame-only-art) center / 100% 100% no-repeat !important; filter: drop-shadow(0 0 14px rgba(151, 219, 255, 0.18)) drop-shadow(0 10px 18px rgba(18, 62, 94, 0.12)) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::after { content: "" !important; position: absolute !important; z-index: 0 !important; inset: clamp(52px, 5.8vh, 68px) clamp(68px, 5.9vw, 92px) clamp(54px, 5.8vh, 72px) !important; display: block !important; pointer-events: none !important; border-radius: 12px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 253, 255, 0.91) 55%, rgba(232, 245, 255, 0.88)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78), 0 10px 26px rgba(37, 86, 124, 0.12) !important; } html body:not(.maintenance-mode) #characterSelect .character-scroll { position: relative !important; z-index: 2 !important; box-sizing: border-box !important; align-self: center !important; justify-self: center !important; width: 100% !important; height: min(100%, calc(var(--select-card-outer-h) * 2 + var(--select-gap) + var(--select-visible-pad-y) * 2)) !important; max-height: calc(var(--select-card-outer-h) * 2 + var(--select-gap) + var(--select-visible-pad-y) * 2) !important; min-height: 0 !important; padding: var(--select-visible-pad-y) 0 !important; overflow-x: clip !important; overflow-y: auto !important; scrollbar-gutter: stable both-edges !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #characterSelect .character-options { min-height: 0 !important; height: auto !important; align-content: start !important; justify-content: center !important; padding: 0 !important; margin: 0 auto !important; } } html body:not(.maintenance-mode) #characterPreview #previewModeButton:not([hidden]) { display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: start !important; width: fit-content !important; min-width: 0 !important; max-width: calc(100% - 12px) !important; min-height: 0 !important; height: auto !important; padding: 3px 10px 4px 8px !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%) !important; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", sans-serif !important; font-size: clamp(14px, 1.9vh, 16px) !important; font-weight: 950 !important; line-height: 1.05 !important; letter-spacing: 0 !important; white-space: nowrap !important; transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body:not(.maintenance-mode) #characterPreview #previewModeButton::before, html body:not(.maintenance-mode) #characterPreview #previewModeButton::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip, html body:not(.maintenance-mode) #characterPreview[data-character="Xiaoyang"] #previewModeButton { color: #fff2e9 !important; border: 1px solid rgba(255, 118, 106, 0.88) !important; border-left: 3px solid rgba(255, 70, 74, 0.98) !important; background: radial-gradient(circle at 16% 0%, rgba(255, 233, 219, 0.54), transparent 46%), linear-gradient(90deg, rgba(255, 74, 74, 0.94), rgba(142, 18, 24, 0.94) 54%, rgba(38, 5, 9, 0.96)) !important; box-shadow: 0 8px 20px rgba(123, 10, 18, 0.34), inset 0 1px 0 rgba(255, 220, 196, 0.3) !important; text-shadow: 0 1px 3px rgba(65, 4, 10, 0.86), 0 0 9px rgba(255, 75, 84, 0.34) !important; } html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip.enabled, html body:not(.maintenance-mode) #characterPreview[data-character="Xiaoyang"] #previewModeButton.enabled { color: #fff8e8 !important; border-color: rgba(255, 178, 109, 0.96) !important; border-left-color: rgba(255, 70, 74, 0.98) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 244, 210, 0.62), transparent 46%), linear-gradient(90deg, rgba(255, 94, 74, 0.98), rgba(164, 24, 25, 0.96) 48%, rgba(68, 6, 10, 0.98)) !important; } html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Lollipopz"] .mode-tip, html body:not(.maintenance-mode) #characterPreview[data-character="Lollipopz"] #previewModeButton { color: #f08fc4 !important; border: 1px solid rgba(255, 184, 220, 0.9) !important; border-left: 3px solid rgba(255, 142, 198, 0.96) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 48%), linear-gradient(90deg, rgba(255, 244, 251, 0.96), rgba(255, 202, 229, 0.78) 52%, rgba(219, 237, 255, 0.58)) !important; box-shadow: 0 7px 18px rgba(170, 60, 120, 0.16), 0 0 18px rgba(255, 178, 220, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88), 0 0 10px rgba(255, 188, 224, 0.42) !important; } html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Rhasta"] .mode-tip, html body:not(.maintenance-mode) #characterPreview[data-character="Rhasta"] #previewModeButton { color: #fff3bd !important; border: 1px solid rgba(226, 168, 62, 0.88) !important; border-left: 3px solid rgba(45, 122, 95, 0.98) !important; background: radial-gradient(circle at 16% 0%, rgba(255, 248, 213, 0.54), transparent 46%), linear-gradient(90deg, rgba(45, 122, 95, 0.94), rgba(217, 155, 56, 0.92) 56%, rgba(82, 49, 15, 0.96)) !important; box-shadow: 0 8px 20px rgba(73, 55, 18, 0.28), 0 0 18px rgba(226, 168, 62, 0.22), inset 0 1px 0 rgba(255, 247, 204, 0.38) !important; text-shadow: 0 1px 3px rgba(34, 18, 5, 0.72), 0 0 10px rgba(255, 218, 116, 0.28) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] { --special-mode-title-a: #ffffff; --special-mode-title-b: #ccefff; --special-mode-title-c: #4d8fd7; --special-mode-skill-a: #ffffff; --special-mode-skill-b: #9ee6ff; --special-mode-skill-c: #f1ca73; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"]:not([hidden]), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"]:not([hidden]), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"]:not([hidden]) { position: fixed !important; inset: 0 !important; z-index: 60000 !important; display: grid !important; place-items: center !important; width: 100vw !important; height: 100dvh !important; padding: clamp(18px, 3vw, 34px) !important; overflow: hidden !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[hidden] { display: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-shell, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-shell, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-shell { position: relative !important; left: auto !important; top: auto !important; width: min(1160px, calc(100vw - 56px)) !important; height: min(720px, calc(100dvh - 56px)) !important; max-width: calc(100vw - 56px) !important; max-height: calc(100dvh - 56px) !important; margin: 0 !important; overflow: visible !important; transform: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-panel, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-panel, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-panel { box-sizing: border-box !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: clamp(48px, 4.6vw, 64px) clamp(34px, 3.4vw, 52px) clamp(30px, 3vw, 44px) !important; display: grid !important; grid-template-columns: minmax(360px, 0.92fr) minmax(360px, 1fr) !important; gap: clamp(28px, 3vw, 46px) !important; align-items: stretch !important; overflow: hidden !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-close, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-close, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-close { position: absolute !important; top: clamp(12px, 1.5vw, 18px) !important; right: clamp(14px, 1.6vw, 22px) !important; left: auto !important; z-index: 12 !important; transform: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-lock, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-lock, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-lock { position: absolute !important; top: clamp(12px, 1.5vw, 18px) !important; left: 50% !important; right: auto !important; z-index: 12 !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-lock:hover, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-lock:hover, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-lock:hover { transform: translateX(-50%) translateY(-1px) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogName { background: linear-gradient(180deg, #ffffff 0%, #d9f8ff 24%, #8edcff 45%, #3f83d4 68%, #f0cb74 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 0.35px rgba(232, 250, 255, 0.72) !important; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.46)) drop-shadow(0 0 12px rgba(116, 220, 255, 0.46)) drop-shadow(0 0 14px rgba(71, 131, 214, 0.26)) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"]:not([hidden]), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"]:not([hidden]), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"]:not([hidden]) { padding: 8px !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-shell, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-shell, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-shell { width: calc(100vw - 16px) !important; height: calc(100dvh - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-panel, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-panel, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-panel { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; padding: 52px 12px 12px !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) clamp(210px, 26.6dvh, 225px) !important; gap: 8px !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-close, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-close, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-close { top: 12px !important; right: 14px !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-lock, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-lock, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-lock { top: 12px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; } } /* V1.27Beta-codex28b: final desktop select panel position lock. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #characterSelect.character-select, html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) { --select-layout-top: clamp(58px, 7.2vh, 76px) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { position: absolute !important; left: 50% !important; top: var(--select-layout-top) !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important; width: min(1560px, calc(100vw - 14px), calc((100dvh - var(--select-layout-top) - 12px) * 1502 / 995)) !important; height: auto !important; max-height: calc(100dvh - var(--select-layout-top) - 12px) !important; margin: 0 !important; } } /* V1.27Beta-codex29: keep enlarged-card special form entry single and card-like. */ html body:not(.maintenance-mode) #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill { display: none !important; } /* V1.27Beta-codex31: white crystal room-code strip only; keep nickname strip unchanged. */ html body:not(.maintenance-mode) #appRoot.app.solo .join-row { box-sizing: border-box !important; width: 100% !important; min-height: 54px !important; padding: 5px 6px !important; display: grid !important; grid-template-columns: minmax(152px, 1fr) minmax(124px, 150px) !important; gap: 8px !important; align-items: center !important; border: 1px solid rgba(119, 178, 218, 0.58) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(230, 246, 255, 0.78) 56%, rgba(205, 233, 252, 0.74)), linear-gradient(90deg, rgba(255, 255, 255, 0.62), rgba(147, 211, 255, 0.2)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(89, 147, 189, 0.18), 0 10px 22px rgba(28, 79, 116, 0.14) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .join-row #joinCode { box-sizing: border-box !important; width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 0 20px 0 22px !important; border: 1px solid rgba(133, 186, 224, 0.52) !important; border-radius: 999px !important; color: #163f5f !important; -webkit-text-fill-color: currentColor !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 248, 255, 0.92) 54%, rgba(216, 239, 255, 0.88)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 0 rgba(96, 153, 195, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.38) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .join-row #joinCode::placeholder { color: rgba(42, 82, 112, 0.64) !important; -webkit-text-fill-color: rgba(42, 82, 112, 0.64) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .join-row #joinRoom { width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 0 16px 1px !important; border: 0 !important; border-radius: 0 !important; color: #143d5c !important; -webkit-text-fill-color: currentColor !important; background: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta-codex31") center / 100% 100% no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 7px 12px rgba(19, 72, 112, 0.14)) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.84) !important; white-space: nowrap !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo .join-row { grid-template-columns: minmax(0, 1fr) minmax(106px, 132px) !important; gap: 6px !important; min-height: 52px !important; padding: 5px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .join-row #joinCode, html body:not(.maintenance-mode) #appRoot.app.solo .join-row #joinRoom { height: 42px !important; min-height: 42px !important; } } @media (max-width: 380px) { html body:not(.maintenance-mode) #appRoot.app.solo .join-row { grid-template-columns: minmax(0, 1fr) 104px !important; } } /* V1.27Beta-codex32: codex storytelling cards and less-cropped home mode art. */ html body:not(.maintenance-mode) #gameCodexDialog .rules-head { justify-content: flex-end !important; } html body:not(.maintenance-mode) #gameCodexTitle { display: none !important; } html body:not(.maintenance-mode) #gameCodexDialog .game-codex-card { min-height: clamp(172px, 23vh, 250px) !important; } html body:not(.maintenance-mode) #gameCodexDialog .game-codex-card small { max-width: min(520px, 92%) !important; font-size: clamp(13px, 1.16vw, 16px) !important; line-height: 1.32 !important; font-weight: 800 !important; } html body:not(.maintenance-mode) #gameCodexDialog .game-codex-characters { --codex-card-art: url("assets/ui/codex-card-characters-existing-cast-v5-gpt2.png?v=V1.27Beta-codex42") !important; } html body:not(.maintenance-mode) #gameCodexDialog .game-codex-artifact { --codex-card-art: url("assets/ui/codex-card-artifact-relicvault-actual-artifacts-v1.png?v=V1.27Beta-preload") !important; } html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button { background: linear-gradient(90deg, rgba(5, 19, 38, 0.72), rgba(5, 19, 38, 0.32) 58%, rgba(5, 19, 38, 0.08)), linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(6, 20, 36, 0.18)), var(--mode-art) center center / 88% auto no-repeat !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #gameCodexDialog .game-codex-card { min-height: 150px !important; } html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button { background: linear-gradient(90deg, rgba(5, 19, 38, 0.72), rgba(5, 19, 38, 0.32) 58%, rgba(5, 19, 38, 0.08)), linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(6, 20, 36, 0.18)), var(--mode-art) center center / 82% auto no-repeat !important; } } /* V1.27Beta-codex33: existing-cast identity art, unified top-left title, and two-row select frame. */ html body:not(.maintenance-mode) { --character-select-frame-two-row-art: url("assets/ui/character-select-panel-crystal-frame-two-row-v1.png?v=V1.27Beta-codex33"); } html body:not(.maintenance-mode) #gameCodexDialog .game-codex-identity { --codex-card-art: url("assets/ui/codex-card-identity-existing-cast-v2-gpt2.png?v=V1.27Beta-codex42") !important; } html body:not(.maintenance-mode) #appRoot.app.solo .topbar { left: clamp(28px, 2.75vw, 50px) !important; top: clamp(18px, 2.4vh, 32px) !important; right: auto !important; transform: none !important; width: auto !important; min-width: 0 !important; max-width: min(360px, 38vw) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .topbar > div:first-child { max-width: min(360px, 38vw) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .topbar h1, html body:not(.maintenance-mode) #appRoot.app.solo .topbar h1::after { font-size: clamp(20px, 1.55vw, 30px) !important; line-height: 1.02 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.solo .topbar p, html body:not(.maintenance-mode) #appRoot.app.solo #subtitle { font-size: clamp(10px, 0.85vw, 13px) !important; line-height: 1.18 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app .topbar { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button[data-mode] { background: linear-gradient(90deg, rgba(5, 19, 38, 0.72), rgba(5, 19, 38, 0.32) 58%, rgba(5, 19, 38, 0.08)), linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(6, 20, 36, 0.18)), var(--mode-art) center center / 90% auto no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button[data-mode="1v1"], html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button[data-mode="2v2"], html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button[data-mode="3v3"], html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button[data-mode="identity"] { background: linear-gradient(90deg, rgba(5, 19, 38, 0.72), rgba(5, 19, 38, 0.32) 58%, rgba(5, 19, 38, 0.08)), linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(6, 20, 36, 0.18)), var(--mode-art) center center / 90% auto no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="1v1"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="2v2"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="3v3"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="identity"] { background: linear-gradient(90deg, rgba(5, 19, 38, 0.72), rgba(5, 19, 38, 0.32) 58%, rgba(5, 19, 38, 0.08)), linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(6, 20, 36, 0.18)), var(--mode-art) center center / 90% auto no-repeat !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #characterSelect.character-select, html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) { --select-layout-top: clamp(58px, 7.2vh, 80px) !important; --select-visible-pad-y: clamp(8px, 1vh, 12px) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { position: absolute !important; left: 50% !important; top: var(--select-layout-top) !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important; width: min(1560px, calc(100vw - 14px), calc((100dvh - var(--select-layout-top) - 8px) * 1502 / 1120)) !important; height: auto !important; max-height: calc(100dvh - var(--select-layout-top) - 8px) !important; aspect-ratio: 1502 / 1120 !important; margin: 0 !important; isolation: isolate !important; overflow: visible !important; background: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::before { content: "" !important; position: absolute !important; z-index: 7 !important; inset: 0 !important; display: block !important; pointer-events: none !important; background: var(--character-select-frame-two-row-art) center / 100% 100% no-repeat !important; filter: drop-shadow(0 0 14px rgba(151, 219, 255, 0.16)) drop-shadow(0 10px 18px rgba(18, 62, 94, 0.1)) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::after { content: "" !important; position: absolute !important; z-index: 0 !important; inset: clamp(62px, 6.3vh, 78px) clamp(72px, 5.8vw, 104px) clamp(64px, 6.3vh, 82px) !important; display: block !important; pointer-events: none !important; border-radius: 18px !important; background: radial-gradient(ellipse at 50% 6%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9) 46%, rgba(234, 247, 255, 0.84)), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 250, 255, 0.9)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82), inset 0 0 38px rgba(130, 207, 255, 0.14), 0 10px 26px rgba(37, 86, 124, 0.1) !important; } html body:not(.maintenance-mode) #characterSelect .character-scroll { position: relative !important; z-index: 2 !important; align-self: center !important; justify-self: center !important; width: 100% !important; height: min(100%, calc(var(--select-card-outer-h) * 2 + var(--select-gap) + var(--select-visible-pad-y) * 2)) !important; max-height: calc(var(--select-card-outer-h) * 2 + var(--select-gap) + var(--select-visible-pad-y) * 2) !important; padding: var(--select-visible-pad-y) 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow-x: clip !important; overflow-y: auto !important; scrollbar-gutter: stable both-edges !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo .topbar { left: clamp(18px, 5.2vw, 28px) !important; top: clamp(14px, 3.4vh, 22px) !important; right: auto !important; max-width: min(270px, 74vw) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .topbar > div:first-child { max-width: min(270px, 74vw) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .topbar h1, html body:not(.maintenance-mode) #appRoot.app.solo .topbar h1::after { font-size: clamp(18px, 5.4vw, 24px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button[data-mode] { background: linear-gradient(90deg, rgba(5, 19, 38, 0.72), rgba(5, 19, 38, 0.32) 58%, rgba(5, 19, 38, 0.08)), linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(6, 20, 36, 0.18)), var(--mode-art) center center / 84% auto no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button[data-mode="1v1"], html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button[data-mode="2v2"], html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button[data-mode="3v3"], html body:not(.maintenance-mode) #appRoot.app.solo .mode-select button[data-mode="identity"] { background: linear-gradient(90deg, rgba(5, 19, 38, 0.72), rgba(5, 19, 38, 0.32) 58%, rgba(5, 19, 38, 0.08)), linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(6, 20, 36, 0.18)), var(--mode-art) center center / 84% auto no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="1v1"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="2v2"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="3v3"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="identity"] { background: linear-gradient(90deg, rgba(5, 19, 38, 0.72), rgba(5, 19, 38, 0.32) 58%, rgba(5, 19, 38, 0.08)), linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(6, 20, 36, 0.18)), var(--mode-art) center center / 84% auto no-repeat !important; } } /* V1.27Beta-codex34: restore the wide white character-select panel and center the two-row card matrix. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #characterSelect.character-select, html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) { --select-layout-top: clamp(58px, 7.2vh, 76px) !important; --select-visible-pad-y: clamp(8px, 1vh, 12px) !important; grid-template-rows: clamp(42px, 5.2vh, 50px) minmax(0, 1fr) auto !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { position: absolute !important; left: 50% !important; top: var(--select-layout-top) !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important; width: min(1560px, calc(100vw - 14px), calc((100dvh - var(--select-layout-top) - 12px) * 1502 / 995)) !important; height: auto !important; max-height: calc(100dvh - var(--select-layout-top) - 12px) !important; aspect-ratio: 1502 / 995 !important; margin: 0 !important; isolation: isolate !important; overflow: visible !important; background: radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0.88) 43%, transparent 66%), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 255, 0.95) 52%, rgba(224, 242, 255, 0.9)) !important; box-shadow: 0 18px 42px rgba(20, 66, 98, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.74) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::before { content: "" !important; position: absolute !important; z-index: 7 !important; inset: clamp(-24px, -2vh, -14px) clamp(-8px, -0.45vw, -2px) clamp(-10px, -1vh, -5px) !important; display: block !important; pointer-events: none !important; background: var(--character-select-frame-only-art) center / 100% 100% no-repeat !important; filter: drop-shadow(0 0 14px rgba(151, 219, 255, 0.18)) drop-shadow(0 10px 18px rgba(18, 62, 94, 0.12)) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #characterSelect .character-scroll { position: relative !important; z-index: 2 !important; box-sizing: border-box !important; align-self: center !important; justify-self: center !important; width: 100% !important; height: min(100%, calc(var(--select-card-outer-h) * 2 + var(--select-gap) + var(--select-visible-pad-y) * 2)) !important; max-height: calc(var(--select-card-outer-h) * 2 + var(--select-gap) + var(--select-visible-pad-y) * 2) !important; min-height: 0 !important; padding: var(--select-visible-pad-y) 0 !important; overflow-x: clip !important; overflow-y: auto !important; scrollbar-gutter: stable both-edges !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #characterSelect .character-options { width: max-content !important; min-height: 0 !important; height: auto !important; align-content: start !important; justify-content: center !important; padding: 0 !important; margin-inline: auto !important; } } /* V1.27Beta-codex44 true EOF lock: room start screen exit button bottom-center. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions { left: 0 !important; right: 0 !important; width: 100vw !important; max-width: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(20px, 3.2vh, 34px) !important; z-index: 60 !important; transform: translateX(-50%) !important; } } /* V1.27Beta-codex45 true EOF lock: overrides older character-frame and room-button locks above. */ html body:not(.maintenance-mode) { --special-mode-plastic-button-bg: radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, 0.92), transparent 43%), linear-gradient(180deg, rgba(239, 250, 255, 0.96), rgba(148, 219, 255, 0.9) 42%, rgba(49, 111, 182, 0.9) 74%, rgba(244, 205, 118, 0.88)); --special-mode-plastic-button-shadow: 0 10px 18px rgba(20, 65, 112, 0.22), 0 0 18px rgba(142, 225, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(28, 74, 129, 0.28); --special-mode-title-gradient: linear-gradient(180deg, #ffffff 0%, #d9f8ff 24%, #8edcff 45%, #3f83d4 68%, #f0cb74 100%); } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-panel .join-row { justify-self: end !important; width: min(333px, 100%) !important; max-width: min(333px, 100%) !important; grid-template-columns: minmax(0, 175px) 150px !important; gap: 8px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-panel .join-row #joinCode { width: 100% !important; min-width: 0 !important; justify-self: stretch !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-panel .join-row { width: calc(100% - 8px) !important; max-width: calc(100% - 8px) !important; grid-template-columns: minmax(0, 1fr) minmax(104px, 31%) !important; } } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(74px, 9vh, 100px) !important; z-index: 76 !important; width: max-content !important; max-width: calc(100vw - 56px) !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: clamp(10px, 1vw, 14px) !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions > button, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) .room-lobby-actions > button { pointer-events: auto !important; position: relative !important; inset: auto !important; transform: none !important; width: clamp(132px, 10.2vw, 160px) !important; min-width: clamp(132px, 10.2vw, 160px) !important; max-width: clamp(132px, 10.2vw, 160px) !important; height: clamp(44px, 5.1vh, 54px) !important; min-height: clamp(44px, 5.1vh, 54px) !important; max-height: clamp(44px, 5.1vh, 54px) !important; margin: 0 !important; padding: 0 12px 2px !important; display: grid !important; place-items: center !important; background-image: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 7px 12px rgba(5, 28, 50, 0.16)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(20px, 3.2vh, 34px) !important; z-index: 92 !important; width: clamp(148px, 10.8vw, 184px) !important; min-width: clamp(148px, 10.8vw, 184px) !important; max-width: clamp(148px, 10.8vw, 184px) !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(20px, 3.2vh, 34px) !important; z-index: 76 !important; width: max-content !important; max-width: calc(100vw - 56px) !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: clamp(8px, 0.8vw, 12px) !important; transform: translateX(-50%) !important; pointer-events: none !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(58px, calc(env(safe-area-inset-bottom) + 54px)) !important; z-index: 76 !important; width: min(430px, calc(100vw - 18px)) !important; max-width: min(430px, calc(100vw - 18px)) !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) .room-lobby-actions { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions > button, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) .room-lobby-actions > button { pointer-events: auto !important; position: relative !important; inset: auto !important; transform: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 3px 1px !important; display: grid !important; place-items: center !important; font-size: clamp(9px, 2.55vw, 11px) !important; line-height: 1 !important; white-space: nowrap !important; background-image: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 5px 8px rgba(5, 28, 50, 0.14)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px)) !important; z-index: 92 !important; width: min(174px, 48vw) !important; min-width: min(174px, 48vw) !important; max-width: min(174px, 48vw) !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; transform: translateX(-50%) !important; } } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) { --select-frame-inner-x: clamp(46px, 3.7vw, 58px) !important; --select-frame-inner-y: clamp(52px, 7.7vh, 62px) !important; --select-matrix-w: calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3) !important; --select-matrix-h: calc(var(--select-card-outer-h) * 2 + var(--select-gap)) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { position: fixed !important; left: 50vw !important; top: 50dvh !important; width: min(calc(var(--select-matrix-w) + var(--select-frame-inner-x) * 2), calc(100vw - 14px)) !important; height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 54px)) !important; max-width: calc(100vw - 14px) !important; max-height: calc(100dvh - 54px) !important; aspect-ratio: auto !important; padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important; margin: 0 !important; display: grid !important; place-items: center !important; transform: translate(-50%, -50%) !important; overflow: visible !important; isolation: isolate !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::after { content: "" !important; position: absolute !important; z-index: 0 !important; inset: var(--select-frame-inner-y) var(--select-frame-inner-x) !important; display: block !important; pointer-events: none !important; border-radius: clamp(12px, 1vw, 18px) !important; background: radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.93) 42%, rgba(235, 248, 255, 0.88) 80%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 250, 255, 0.9)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82), inset 0 0 36px rgba(130, 207, 255, 0.12), 0 10px 24px rgba(37, 86, 124, 0.08) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::before { content: "" !important; position: absolute !important; z-index: 8 !important; inset: 0 !important; display: block !important; pointer-events: none !important; background: var(--character-select-frame-two-row-art) center / 100% 100% no-repeat !important; filter: drop-shadow(0 0 14px rgba(151, 219, 255, 0.18)) drop-shadow(0 10px 18px rgba(18, 62, 94, 0.12)) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll { position: relative !important; z-index: 4 !important; align-self: center !important; justify-self: center !important; width: var(--select-matrix-w) !important; max-width: var(--select-matrix-w) !important; height: var(--select-matrix-h) !important; max-height: var(--select-matrix-h) !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { width: var(--select-matrix-w) !important; max-width: var(--select-matrix-w) !important; min-height: 0 !important; height: auto !important; grid-template-columns: repeat(4, var(--select-card-outer-w)) !important; grid-auto-rows: var(--select-card-outer-h) !important; gap: var(--select-gap) !important; align-content: start !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; } } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]) { position: fixed !important; left: 50vw !important; top: 50dvh !important; z-index: 120 !important; transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]):hover, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]):focus-within { transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #characterPreview #previewModeButton { display: none !important; } html body:not(.maintenance-mode) #characterPreview .preview-skill { display: grid !important; grid-template-rows: auto auto minmax(0, 1fr) !important; align-content: end !important; gap: clamp(5px, 0.7vh, 7px) !important; } html body:not(.maintenance-mode) #characterPreview #previewModeSkill:not([hidden]) { order: 1 !important; position: relative !important; z-index: 3 !important; justify-self: start !important; margin: 0 0 1px !important; clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%) !important; } html body:not(.maintenance-mode) #characterPreview #previewSkill { order: 2 !important; position: relative !important; z-index: 2 !important; justify-self: start !important; margin: 0 !important; } html body:not(.maintenance-mode) #characterPreview #previewDescription { order: 3 !important; position: relative !important; z-index: 1 !important; margin: 0 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogSkill .skill-inline-text, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogSkill .skill-inline-text, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogSkill .skill-inline-text { background: var(--special-mode-title-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.44)) drop-shadow(0 0 10px rgba(116, 220, 255, 0.42)) drop-shadow(0 0 12px rgba(71, 131, 214, 0.22)) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject) { min-width: clamp(106px, 9vw, 136px) !important; height: clamp(34px, 4.3vh, 42px) !important; min-height: clamp(34px, 4.3vh, 42px) !important; padding: 0 18px 2px !important; border: 1px solid rgba(222, 246, 255, 0.82) !important; border-left: 3px solid rgba(118, 219, 255, 0.92) !important; border-right: 3px solid rgba(238, 201, 112, 0.86) !important; border-radius: 0 !important; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%) !important; color: #123755 !important; -webkit-text-fill-color: currentColor !important; font-weight: 950 !important; letter-spacing: 0 !important; line-height: 1 !important; display: inline-grid !important; place-items: center !important; background: var(--special-mode-plastic-button-bg) !important; box-shadow: var(--special-mode-plastic-button-shadow) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::after, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::after, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::after { content: none !important; display: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject) { min-width: 88px !important; height: 34px !important; min-height: 34px !important; padding: 0 12px 1px !important; font-size: 12px !important; } } /* V1.27Beta-codex47 viewport correction: do not let the select screen wrapper offset fixed children. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; transform: none !important; overflow: hidden !important; } /* V1.27Beta-codex47 preview correction: the enlarged card is centered inside the centered select frame. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]) { position: absolute !important; left: 50% !important; top: 50% !important; z-index: 120 !important; transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]):hover, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]):focus-within { transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Xiaoyang"] #previewModeSkill:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Lollipopz"] #previewModeSkill:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Rhasta"] #previewModeSkill:not([hidden]) { display: inline-grid !important; place-items: center !important; width: fit-content !important; min-width: clamp(104px, 9vw, 132px) !important; min-height: clamp(28px, 3vh, 34px) !important; order: 1 !important; position: relative !important; z-index: 4 !important; justify-self: start !important; margin: 0 0 4px !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions { left: 0 !important; right: 0 !important; width: 100vw !important; max-width: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px)) !important; z-index: 60 !important; transform: translateX(-50%) !important; } } /* V1.27Beta-codex45 final alignment pass: home join strip, room buttons, character grid, and mode cards. */ html body:not(.maintenance-mode) { --special-mode-plastic-button-bg: radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, 0.92), transparent 43%), linear-gradient(180deg, rgba(239, 250, 255, 0.96), rgba(148, 219, 255, 0.9) 42%, rgba(49, 111, 182, 0.9) 74%, rgba(244, 205, 118, 0.88)); --special-mode-plastic-button-shadow: 0 10px 18px rgba(20, 65, 112, 0.22), 0 0 18px rgba(142, 225, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(28, 74, 129, 0.28); --special-mode-title-gradient: linear-gradient(180deg, #ffffff 0%, #d9f8ff 24%, #8edcff 45%, #3f83d4 68%, #f0cb74 100%); } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .join-row { justify-self: end !important; width: min(333px, 100%) !important; max-width: min(333px, 100%) !important; grid-template-columns: minmax(0, 175px) 150px !important; gap: 8px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .join-row #joinCode { width: 100% !important; min-width: 0 !important; justify-self: stretch !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .join-row { width: calc(100% - 8px) !important; max-width: calc(100% - 8px) !important; grid-template-columns: minmax(0, 1fr) minmax(104px, 31%) !important; } } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(74px, 9vh, 100px) !important; z-index: 76 !important; width: max-content !important; max-width: calc(100vw - 56px) !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: clamp(10px, 1vw, 14px) !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions > button { pointer-events: auto !important; position: relative !important; inset: auto !important; transform: none !important; width: clamp(132px, 10.2vw, 160px) !important; min-width: clamp(132px, 10.2vw, 160px) !important; max-width: clamp(132px, 10.2vw, 160px) !important; height: clamp(44px, 5.1vh, 54px) !important; min-height: clamp(44px, 5.1vh, 54px) !important; max-height: clamp(44px, 5.1vh, 54px) !important; margin: 0 !important; padding: 0 12px 2px !important; display: grid !important; place-items: center !important; background-image: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 7px 12px rgba(5, 28, 50, 0.16)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(20px, 3.2vh, 34px) !important; z-index: 92 !important; width: clamp(148px, 10.8vw, 184px) !important; min-width: clamp(148px, 10.8vw, 184px) !important; max-width: clamp(148px, 10.8vw, 184px) !important; transform: translateX(-50%) !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(58px, calc(env(safe-area-inset-bottom) + 54px)) !important; z-index: 76 !important; width: min(430px, calc(100vw - 18px)) !important; max-width: min(430px, calc(100vw - 18px)) !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions > button { pointer-events: auto !important; position: relative !important; inset: auto !important; transform: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 3px 1px !important; display: grid !important; place-items: center !important; font-size: clamp(9px, 2.55vw, 11px) !important; line-height: 1 !important; white-space: nowrap !important; background-image: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 5px 8px rgba(5, 28, 50, 0.14)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px)) !important; z-index: 92 !important; width: min(174px, 48vw) !important; min-width: min(174px, 48vw) !important; max-width: min(174px, 48vw) !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; transform: translateX(-50%) !important; } } @media (min-width: 721px) { html body:not(.maintenance-mode) #characterSelect.character-select, html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) { --select-frame-inner-x: clamp(46px, 3.7vw, 58px) !important; --select-frame-inner-y: clamp(52px, 7.7vh, 62px) !important; --select-matrix-w: calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3) !important; --select-matrix-h: calc(var(--select-card-outer-h) * 2 + var(--select-gap)) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { position: fixed !important; left: 50vw !important; top: 50dvh !important; width: min(calc(var(--select-matrix-w) + var(--select-frame-inner-x) * 2), calc(100vw - 14px)) !important; height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 54px)) !important; max-width: calc(100vw - 14px) !important; max-height: calc(100dvh - 54px) !important; padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important; margin: 0 !important; display: grid !important; place-items: center !important; transform: translate(-50%, -50%) !important; overflow: visible !important; isolation: isolate !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::after { content: "" !important; position: absolute !important; z-index: 0 !important; inset: var(--select-frame-inner-y) var(--select-frame-inner-x) !important; display: block !important; pointer-events: none !important; border-radius: clamp(12px, 1vw, 18px) !important; background: radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.93) 42%, rgba(235, 248, 255, 0.88) 80%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 250, 255, 0.9)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82), inset 0 0 36px rgba(130, 207, 255, 0.12), 0 10px 24px rgba(37, 86, 124, 0.08) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::before { content: "" !important; position: absolute !important; z-index: 8 !important; inset: 0 !important; display: block !important; pointer-events: none !important; background: var(--character-select-frame-two-row-art) center / 100% 100% no-repeat !important; filter: drop-shadow(0 0 14px rgba(151, 219, 255, 0.18)) drop-shadow(0 10px 18px rgba(18, 62, 94, 0.12)) !important; } html body:not(.maintenance-mode) #characterSelect .character-scroll { position: relative !important; z-index: 4 !important; align-self: center !important; justify-self: center !important; width: var(--select-matrix-w) !important; max-width: var(--select-matrix-w) !important; height: var(--select-matrix-h) !important; max-height: var(--select-matrix-h) !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #characterSelect .character-options { width: var(--select-matrix-w) !important; max-width: var(--select-matrix-w) !important; min-height: 0 !important; height: auto !important; grid-template-columns: repeat(4, var(--select-card-outer-w)) !important; grid-auto-rows: var(--select-card-outer-h) !important; gap: var(--select-gap) !important; align-content: start !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; } } html body:not(.maintenance-mode) #characterSelect.preview-open .character-preview-backdrop { z-index: 80 !important; } html body:not(.maintenance-mode) #characterPreview.character-preview:not([hidden]) { position: fixed !important; left: 50vw !important; top: 50dvh !important; z-index: 120 !important; transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #characterPreview.character-preview:not([hidden]):hover, html body:not(.maintenance-mode) #characterPreview.character-preview:not([hidden]):focus-within { transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #characterPreview #previewModeButton { display: none !important; } html body:not(.maintenance-mode) #characterPreview .preview-skill { display: grid !important; grid-template-rows: auto auto minmax(0, 1fr) !important; align-content: end !important; gap: clamp(5px, 0.7vh, 7px) !important; } html body:not(.maintenance-mode) #characterPreview #previewModeSkill:not([hidden]) { order: 1 !important; position: relative !important; z-index: 3 !important; justify-self: start !important; margin: 0 0 1px !important; } html body:not(.maintenance-mode) #characterPreview #previewSkill { order: 2 !important; position: relative !important; z-index: 2 !important; justify-self: start !important; margin: 0 !important; } html body:not(.maintenance-mode) #characterPreview #previewDescription { order: 3 !important; position: relative !important; z-index: 1 !important; margin: 0 !important; } html body:not(.maintenance-mode) #characterPreview[data-character="Xiaoyang"] #previewModeSkill, html body:not(.maintenance-mode) #characterPreview[data-character="Lollipopz"] #previewModeSkill, html body:not(.maintenance-mode) #characterPreview[data-character="Rhasta"] #previewModeSkill { clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogSkill .skill-inline-text, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogSkill .skill-inline-text, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogSkill .skill-inline-text { background: var(--special-mode-title-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.44)) drop-shadow(0 0 10px rgba(116, 220, 255, 0.42)) drop-shadow(0 0 12px rgba(71, 131, 214, 0.22)) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject) { min-width: clamp(106px, 9vw, 136px) !important; height: clamp(34px, 4.3vh, 42px) !important; min-height: clamp(34px, 4.3vh, 42px) !important; padding: 0 18px 2px !important; border: 1px solid rgba(222, 246, 255, 0.82) !important; border-left: 3px solid rgba(118, 219, 255, 0.92) !important; border-right: 3px solid rgba(238, 201, 112, 0.86) !important; border-radius: 0 !important; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%) !important; color: #123755 !important; -webkit-text-fill-color: currentColor !important; font-weight: 950 !important; letter-spacing: 0 !important; line-height: 1 !important; display: inline-grid !important; place-items: center !important; background: var(--special-mode-plastic-button-bg) !important; box-shadow: var(--special-mode-plastic-button-shadow) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::after, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::after, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::after { content: none !important; display: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject) { min-width: 88px !important; height: 34px !important; min-height: 34px !important; padding: 0 12px 1px !important; font-size: 12px !important; } } /* V1.27Beta-codex43 EOF lock: every room start screen keeps 返回大厅 at bottom center. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(74px, 9vh, 100px) !important; z-index: 34 !important; width: max-content !important; max-width: calc(100vw - 56px) !important; margin: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: clamp(10px, 1vw, 14px) !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions > button { pointer-events: auto !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(20px, 3.2vh, 34px) !important; z-index: 36 !important; order: 99 !important; width: clamp(148px, 10.8vw, 184px) !important; min-width: clamp(148px, 10.8vw, 184px) !important; max-width: clamp(148px, 10.8vw, 184px) !important; height: clamp(46px, 5.1vh, 56px) !important; min-height: clamp(46px, 5.1vh, 56px) !important; max-height: clamp(46px, 5.1vh, 56px) !important; margin: 0 !important; transform: translateX(-50%) !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(62px, calc(env(safe-area-inset-bottom) + 58px)) !important; z-index: 34 !important; width: min(430px, calc(100vw - 18px)) !important; max-width: min(430px, calc(100vw - 18px)) !important; margin: 0 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: center !important; justify-content: center !important; gap: 5px !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions > button { pointer-events: auto !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px)) !important; z-index: 36 !important; grid-column: auto !important; justify-self: auto !important; order: 99 !important; width: min(174px, 48vw) !important; min-width: min(174px, 48vw) !important; max-width: min(174px, 48vw) !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; margin: 0 !important; transform: translateX(-50%) !important; } } /* V1.27Beta-codex43: rules-card crystal panels and centered room-exit control. */ html body:not(.maintenance-mode) { --rules-info-card-crystal-art: url("assets/ui/rules-info-card-crystal-white-v1.png?v=V1.27Beta-codex44"); } html body:not(.maintenance-mode) #rulesDialog .rules-points article, html body:not(.maintenance-mode) #identityRulesDialog .identity-rules-grid article { box-sizing: border-box !important; min-height: 112px !important; padding: clamp(16px, 1.25vw, 20px) clamp(18px, 1.55vw, 24px) !important; border: 0 !important; border-radius: 0 !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(227, 245, 255, 0.18)), var(--rules-info-card-crystal-art) center / 100% 100% no-repeat !important; box-shadow: 0 9px 18px rgba(21, 67, 105, 0.13), 0 0 18px rgba(134, 210, 255, 0.1) !important; } html body:not(.maintenance-mode) #rulesDialog .rules-points article strong, html body:not(.maintenance-mode) #identityRulesDialog .identity-rules-grid article strong { color: #173d60 !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important; } html body:not(.maintenance-mode) #rulesDialog .rules-points article span, html body:not(.maintenance-mode) #identityRulesDialog .identity-rules-grid article span { color: #2b4f6d !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.54) !important; } html body:not(.maintenance-mode) #rulesDialog .rule-library-button { border: 0 !important; border-radius: 0 !important; color: #153d5c !important; -webkit-text-fill-color: currentColor !important; background: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") center / 100% 100% no-repeat !important; box-shadow: none !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(74px, 9vh, 100px) !important; z-index: 34 !important; width: max-content !important; max-width: calc(100vw - 56px) !important; margin: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: clamp(10px, 1vw, 14px) !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions > button { pointer-events: auto !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(20px, 3.2vh, 34px) !important; z-index: 36 !important; order: 99 !important; width: clamp(148px, 10.8vw, 184px) !important; min-width: clamp(148px, 10.8vw, 184px) !important; max-width: clamp(148px, 10.8vw, 184px) !important; height: clamp(46px, 5.1vh, 56px) !important; min-height: clamp(46px, 5.1vh, 56px) !important; max-height: clamp(46px, 5.1vh, 56px) !important; margin: 0 !important; transform: translateX(-50%) !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #rulesDialog .rules-points article, html body:not(.maintenance-mode) #identityRulesDialog .identity-rules-grid article { min-height: 104px !important; padding: 14px 16px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(62px, calc(env(safe-area-inset-bottom) + 58px)) !important; z-index: 34 !important; width: min(430px, calc(100vw - 18px)) !important; max-width: min(430px, calc(100vw - 18px)) !important; margin: 0 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: center !important; justify-content: center !important; gap: 5px !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions > button { pointer-events: auto !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px)) !important; z-index: 36 !important; grid-column: auto !important; justify-self: auto !important; order: 99 !important; width: min(174px, 48vw) !important; min-width: min(174px, 48vw) !important; max-width: min(174px, 48vw) !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; margin: 0 !important; transform: translateX(-50%) !important; } } /* V1.27Beta-codex42 final home chrome cleanup. */ html body:not(.maintenance-mode) .version-badge { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: rgba(245, 251, 255, 0.9) !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 2px rgba(6, 24, 42, 0.72), 0 0 8px rgba(150, 218, 255, 0.34) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded { width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded span { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: rgba(245, 251, 255, 0.9) !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 2px rgba(6, 24, 42, 0.72), 0 0 8px rgba(150, 218, 255, 0.34) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes::before, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .join-row { min-height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .join-row::before, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .join-row::after { content: none !important; display: none !important; } /* V1.27Beta-codex42: remove the yellow version capsule and shared join-room strip on the home screen. */ html body:not(.maintenance-mode) .version-badge { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: rgba(245, 251, 255, 0.9) !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 2px rgba(6, 24, 42, 0.72), 0 0 8px rgba(150, 218, 255, 0.34) !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded { width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo .version-notes span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:hover span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes:focus-within span, html body:not(.maintenance-mode) #appRoot.app.solo .version-notes.expanded span { color: rgba(245, 251, 255, 0.9) !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 2px rgba(6, 24, 42, 0.72), 0 0 8px rgba(150, 218, 255, 0.34) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .join-row { min-height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .join-row::before, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .join-row::after { content: none !important; display: none !important; } /* V1.27Beta-codex35: make lobby input strips white crystal material without changing shape. */ html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-panel label { border-color: rgba(211, 226, 238, 0.82) !important; background: radial-gradient(ellipse at 16% 0%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.64) 34%, transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 255, 0.94) 48%, rgba(236, 245, 251, 0.9)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 0 rgba(173, 190, 203, 0.16), inset 0 -8px 14px rgba(222, 232, 240, 0.18), 0 10px 22px rgba(20, 61, 92, 0.1) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #nameInput, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #joinCode { color: #163f5f !important; -webkit-text-fill-color: currentColor !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.94) 54%, rgba(239, 247, 252, 0.9)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 0 rgba(177, 193, 205, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.42) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #nameInput { background: transparent !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #nameInput::placeholder, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #joinCode::placeholder { color: rgba(48, 80, 104, 0.58) !important; -webkit-text-fill-color: rgba(48, 80, 104, 0.58) !important; } /* V1.27Beta-codex36: use button-aspect mode art and tighten the home mode shadows. */ html body:not(.maintenance-mode) { --home-mode-1v1-art: url("assets/ui/mode-1v1-cover-crystal-clear-v3-button-gpt2.png?v=V1.27Beta-codex36") !important; --home-mode-2v2-art: url("assets/ui/mode-2v2-cover-crystal-clear-v3-button-gpt2.png?v=V1.27Beta-codex36") !important; --home-mode-3v3-art: url("assets/ui/mode-3v3-cover-crystal-clear-v3-button-gpt2.png?v=V1.27Beta-codex36") !important; --home-mode-identity-art: url("assets/ui/mode-identity-cover-crystal-clear-v3-button-gpt2.png?v=V1.27Beta-codex36") !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select { grid-auto-rows: clamp(126px, 14.6vh, 160px) !important; gap: clamp(16px, 1.7vw, 24px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode] { min-height: 0 !important; height: 100% !important; border: 1px solid rgba(202, 225, 241, 0.78) !important; border-radius: 8px !important; background: linear-gradient(90deg, rgba(9, 29, 48, 0.58) 0%, rgba(9, 29, 48, 0.32) 38%, rgba(9, 29, 48, 0.08) 72%, rgba(9, 29, 48, 0.02) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(244, 251, 255, 0.04) 34%, rgba(24, 72, 105, 0.08) 100%), var(--mode-art) center center / cover no-repeat !important; box-shadow: 0 9px 18px rgba(20, 61, 92, 0.14), 0 1px 0 rgba(255, 255, 255, 0.62), inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 -10px 18px rgba(24, 70, 103, 0.12) !important; filter: saturate(1.08) contrast(1.03) brightness(1.02) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="1v1"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="2v2"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="3v3"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="identity"] { background: linear-gradient(90deg, rgba(9, 29, 48, 0.58) 0%, rgba(9, 29, 48, 0.32) 38%, rgba(9, 29, 48, 0.08) 72%, rgba(9, 29, 48, 0.02) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(244, 251, 255, 0.04) 34%, rgba(24, 72, 105, 0.08) 100%), var(--mode-art) center center / cover no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode].selected { border-color: rgba(244, 213, 135, 0.94) !important; box-shadow: 0 10px 20px rgba(20, 61, 92, 0.16), 0 0 0 2px rgba(244, 213, 135, 0.42), 0 0 18px rgba(124, 204, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 -10px 18px rgba(24, 70, 103, 0.1) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode]:hover, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode]:focus-visible { box-shadow: 0 13px 24px rgba(20, 61, 92, 0.18), 0 0 0 2px rgba(128, 204, 246, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 -10px 18px rgba(24, 70, 103, 0.1) !important; filter: saturate(1.15) contrast(1.06) brightness(1.04) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select { grid-auto-rows: auto !important; gap: clamp(10px, 2.8vw, 14px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="1v1"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="2v2"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="3v3"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="identity"] { aspect-ratio: 1600 / 611 !important; height: auto !important; padding-left: 18px !important; background: linear-gradient(90deg, rgba(9, 29, 48, 0.58) 0%, rgba(9, 29, 48, 0.32) 38%, rgba(9, 29, 48, 0.08) 72%, rgba(9, 29, 48, 0.02) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(244, 251, 255, 0.04) 34%, rgba(24, 72, 105, 0.08) 100%), var(--mode-art) center center / cover no-repeat !important; } } /* V1.27Beta-codex37: iPhone Pro Max lobby buttons keep the full painting visible. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="1v1"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="2v2"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="3v3"], html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select button[data-mode="identity"] { aspect-ratio: 1600 / 611 !important; height: auto !important; background: linear-gradient(90deg, rgba(9, 29, 48, 0.58) 0%, rgba(9, 29, 48, 0.32) 38%, rgba(9, 29, 48, 0.08) 72%, rgba(9, 29, 48, 0.02) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(244, 251, 255, 0.04) 34%, rgba(24, 72, 105, 0.08) 100%), var(--mode-art) center center / contain no-repeat, var(--mode-art) center center / cover no-repeat, linear-gradient(180deg, rgba(235, 247, 255, 0.76), rgba(45, 93, 127, 0.2)) !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-actions > button { padding-inline: 6px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-actions > button span { font-size: clamp(16px, 4.35vw, 19px) !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-actions > button small { font-size: clamp(9px, 2.55vw, 11px) !important; line-height: 1.05 !important; white-space: nowrap !important; } } /* V1.27Beta-codex38: identity room layout pass. Keep action buttons out of the seat field. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; padding: 0 !important; display: block !important; overflow: hidden !important; background: transparent !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-head { position: fixed !important; left: 50% !important; top: clamp(68px, 8.2vh, 88px) !important; z-index: 26 !important; width: min(520px, 44vw) !important; margin: 0 !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] #identityRules { position: fixed !important; left: 50% !important; top: clamp(178px, 22vh, 208px) !important; z-index: 27 !important; width: min(520px, 44vw) !important; max-width: min(520px, 44vw) !important; margin: 0 !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] #identityRules[open] { top: clamp(132px, 16vh, 164px) !important; z-index: 40 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] #identityRules .identity-rules-body { max-height: min(360px, calc(100dvh - 250px)) !important; overflow: auto !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] #roomSeatGrid { position: fixed !important; left: 50% !important; top: clamp(398px, 56vh, 492px) !important; z-index: 18 !important; width: min(1120px, calc(100vw - 86px)) !important; max-width: min(1120px, calc(100vw - 86px)) !important; margin: 0 !important; transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: clamp(28px, 4.2vh, 46px) !important; z-index: 34 !important; width: max-content !important; max-width: calc(100vw - 280px) !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: clamp(10px, 1vw, 14px) !important; transform: none !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: clamp(18px, 2.2vw, 34px) !important; top: clamp(94px, 12vh, 118px) !important; order: 0 !important; margin: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #startGame, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #copyRoomLobby, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #refreshRoomLobby, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #showRulesRoomLobby, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #leaveRoomLobby { pointer-events: auto !important; flex: 0 0 auto !important; position: relative !important; width: clamp(132px, 9.4vw, 158px) !important; min-width: clamp(132px, 9.4vw, 158px) !important; max-width: clamp(132px, 9.4vw, 158px) !important; height: clamp(46px, 5.1vh, 56px) !important; min-height: clamp(46px, 5.1vh, 56px) !important; margin: 0 !important; padding: 0 14px 1px !important; display: grid !important; place-items: center !important; text-align: center !important; line-height: 1 !important; white-space: nowrap !important; border: 0 !important; border-radius: 0 !important; color: #153d5c !important; -webkit-text-fill-color: currentColor !important; background: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") center / 100% 100% no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 8px 13px rgba(5, 28, 50, 0.16)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: clamp(18px, 2.2vw, 34px) !important; top: clamp(94px, 12vh, 118px) !important; right: auto !important; bottom: auto !important; width: clamp(132px, 9.4vw, 158px) !important; min-width: clamp(132px, 9.4vw, 158px) !important; max-width: clamp(132px, 9.4vw, 158px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #startGame { order: 1 !important; width: clamp(152px, 10.8vw, 190px) !important; min-width: clamp(152px, 10.8vw, 190px) !important; max-width: clamp(152px, 10.8vw, 190px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #copyRoomLobby { order: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #refreshRoomLobby { order: 3 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #showRulesRoomLobby { order: 4 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] #identityRules > summary { text-align: center !important; } } /* V1.27Beta-codex39: battle background, usable-area centering, and profession attack panels. */ :root { --battle-side-width: clamp(220px, 17.5vw, 260px); --battle-field-gap: clamp(10px, 1.1vw, 16px); --battle-bg-1v1: url("assets/ui/mode-1v1-cover-crystal-clear-v3-full-gpt2.png?v=V1.27Beta-codex39"); --battle-bg-2v2: url("assets/ui/mode-2v2-cover-crystal-clear-v3-full-gpt2.png?v=V1.27Beta-codex39"); --battle-bg-3v3: url("assets/ui/mode-3v3-cover-crystal-clear-v3-full-gpt2.png?v=V1.27Beta-codex39"); --battle-bg-identity: url("assets/ui/mode-identity-cover-crystal-clear-v3-full-gpt2.png?v=V1.27Beta-codex39"); --action-attack-panel-caster: url("assets/ui/action_buttons/v125/attack/mage/arcane.png?v=V1.27Beta-action-alpha-seamfix2"); --action-attack-panel-warrior: url("assets/ui/action_buttons/v125/attack/warrior/arms.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-death-knight: url("assets/ui/action_buttons/v125/attack/death_knight/unholy.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-blood-death-knight: url("assets/ui/action_buttons/v125/attack/death_knight/blood.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-frost-death-knight: url("assets/ui/action_buttons/v125/attack/death_knight/frost.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-unholy-death-knight: url("assets/ui/action_buttons/v125/attack/death_knight/unholy.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-demon-hunter: url("assets/ui/action_buttons/v125/attack/demon_hunter/havoc.png?v=V1.27Beta-preload"); --action-attack-panel-paladin: url("assets/ui/action_buttons/v125/attack/paladin/retribution.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-holy-paladin: url("assets/ui/action_buttons/v125/attack/paladin/holy.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-protection-paladin: url("assets/ui/action_buttons/v125/attack/paladin/protection.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-retribution-paladin: url("assets/ui/action_buttons/v125/attack/paladin/retribution.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-monk: url("assets/ui/action_buttons/v125/attack/monk/windwalker.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-brewmaster-monk: url("assets/ui/action_buttons/v125/attack/monk/brewmaster.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-mistweaver-monk: url("assets/ui/action_buttons/v125/attack/monk/mistweaver.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-windwalker-monk: url("assets/ui/action_buttons/v125/attack/monk/windwalker.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-druid: url("assets/ui/action_buttons/v125/attack/druid/feral.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-feral-druid: url("assets/ui/action_buttons/v125/attack/druid/feral.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-balance-druid: url("assets/ui/action_buttons/v125/attack/druid/balance.png?v=V1.27Beta-druid-feral-balance-standard1"); --action-attack-panel-restoration-druid: url("assets/ui/action_buttons/v125/attack/druid/restoration.png?v=V1.27Beta-restoration-druid-standard1"); --action-attack-panel-shaman: url("assets/ui/action_buttons/v125/attack/shaman/elemental.png?v=V1.27Beta-preload"); --action-attack-panel-warlock: url("assets/ui/action_buttons/v125/attack/warlock/demonology.png?v=V1.27Beta-qizong-demonology-fillfix1"); --action-attack-panel-mage: url("assets/ui/action_buttons/v125/attack/mage/arcane.png?v=V1.27Beta-action-alpha-seamfix2"); --action-attack-panel-arcane-mage: url("assets/ui/action_buttons/v125/attack/mage/arcane.png?v=V1.27Beta-action-alpha-seamfix2"); --action-attack-panel-fire-mage: url("assets/ui/action_buttons/v125/attack/mage/fire.png?v=V1.27Beta-action-alpha-seamfix2"); --action-attack-panel-frost-mage: url("assets/ui/action_buttons/v125/attack/mage/frost.png?v=V1.27Beta-action-alpha-seamfix2"); --action-attack-panel-hunter: url("assets/ui/action_buttons/v125/attack/hunter/beast_mastery.png?v=V1.27Beta-preload"); --action-attack-panel-priest: url("assets/ui/action_buttons/v125/attack/priest/discipline.png?v=V1.27Beta-preload"); --action-attack-panel-rogue: url("assets/ui/action_buttons/v125/attack/rogue/assassination.png?v=V1.27Beta-action-alpha-seamfix2"); --action-attack-panel-assassination-rogue: url("assets/ui/action_buttons/v125/attack/rogue/assassination.png?v=V1.27Beta-action-alpha-seamfix2"); --action-attack-panel-subtlety-rogue: url("assets/ui/action_buttons/v125/attack/rogue/subtlety.png?v=V1.27Beta-action-alpha-seamfix2"); --action-attack-panel-outlaw-rogue: url("assets/ui/action_buttons/v125/attack/rogue/outlaw.png?v=V1.27Beta-action-alpha-seamfix2"); } html body:not(.maintenance-mode) #appRoot.app[data-room-mode="1v1"] { --room-mode-wallpaper: var(--battle-bg-1v1) !important; --room-lobby-wallpaper: var(--battle-bg-1v1) !important; } html body:not(.maintenance-mode) #appRoot.app[data-room-mode="2v2"] { --room-mode-wallpaper: var(--battle-bg-2v2) !important; --room-lobby-wallpaper: var(--battle-bg-2v2) !important; } html body:not(.maintenance-mode) #appRoot.app[data-room-mode="3v3"] { --room-mode-wallpaper: var(--battle-bg-3v3) !important; --room-lobby-wallpaper: var(--battle-bg-3v3) !important; } html body:not(.maintenance-mode) #appRoot.app[data-room-mode="identity"] { --room-mode-wallpaper: var(--battle-bg-identity) !important; --room-lobby-wallpaper: var(--battle-bg-identity) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app) .arena, html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) .arena, html body:not(.maintenance-mode) #appRoot.app.team-battle-app .arena, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app .arena { background: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.12), transparent 46%), linear-gradient(180deg, rgba(239, 250, 255, 0.08), rgba(4, 16, 31, 0.16)), var(--room-mode-wallpaper, var(--battle-bg-1v1)) center center / cover no-repeat, #edf8ff !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app) .arena::before, html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app) .arena::after, html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) .arena::before, html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) .arena::after, html body:not(.maintenance-mode) #appRoot.app.team-battle-app .arena::before, html body:not(.maintenance-mode) #appRoot.app.team-battle-app .arena::after, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app .arena::before, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app .arena::after { background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.08), transparent 38%), linear-gradient(90deg, rgba(8, 34, 60, 0.12), transparent 22%, transparent 78%, rgba(8, 34, 60, 0.12)) !important; } html body:not(.maintenance-mode) #cards { --action-attack-panel-art: var(--action-attack-panel-caster); --action-solid: #dbeaff; } html body:not(.maintenance-mode) #cards[data-attack-style="warrior"], html body:not(.maintenance-mode) #cards[data-attack-style="arms-warrior"], html body:not(.maintenance-mode) #cards[data-attack-style="fury-warrior"], html body:not(.maintenance-mode) #cards[data-attack-style="protection-warrior"] { --action-attack-panel-art: var(--action-attack-panel-warrior); --action-solid: #ff9a5c; } html body:not(.maintenance-mode) #cards[data-attack-style="death-knight"], html body:not(.maintenance-mode) #cards[data-attack-style="unholy-death-knight"] { --action-attack-panel-art: var(--action-attack-panel-unholy-death-knight); --action-solid: #8deaff; } html body:not(.maintenance-mode) #cards[data-attack-style="blood-death-knight"] { --action-attack-panel-art: var(--action-attack-panel-blood-death-knight); --action-solid: #8deaff; } html body:not(.maintenance-mode) #cards[data-attack-style="frost-death-knight"] { --action-attack-panel-art: var(--action-attack-panel-frost-death-knight); --action-solid: #8deaff; } html body:not(.maintenance-mode) #cards[data-attack-style="demon-hunter"] { --action-attack-panel-art: var(--action-attack-panel-demon-hunter); --action-solid: #86ff7a; } html body:not(.maintenance-mode) #cards[data-attack-style="paladin"] { --action-attack-panel-art: var(--action-attack-panel-paladin); --action-solid: #ffe48a; } html body:not(.maintenance-mode) #cards[data-attack-style="holy-paladin"] { --action-attack-panel-art: var(--action-attack-panel-holy-paladin); --action-solid: #ffe48a; } html body:not(.maintenance-mode) #cards[data-attack-style="protection-paladin"] { --action-attack-panel-art: var(--action-attack-panel-protection-paladin); --action-solid: #ffe48a; } html body:not(.maintenance-mode) #cards[data-attack-style="retribution-paladin"] { --action-attack-panel-art: var(--action-attack-panel-retribution-paladin); --action-solid: #ffe48a; } html body:not(.maintenance-mode) #cards[data-attack-style="paladin"] { --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/paladin/retribution.png?v=V1.27Beta-paladin-actionfix1-mobilecrashfix1-mobilecrashfix2") !important; --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/paladin/retribution.png?v=V1.27Beta-paladin-actionfix1-mobilecrashfix1-mobilecrashfix2") !important; --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/paladin/retribution.png?v=V1.27Beta-paladin-actionfix1-mobilecrashfix1-mobilecrashfix2") !important; } html body:not(.maintenance-mode) #cards[data-attack-style="holy-paladin"] { --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/paladin/holy.png?v=V1.27Beta-paladin-actionfix1-mobilecrashfix1-mobilecrashfix2") !important; --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/paladin/holy.png?v=V1.27Beta-paladin-actionfix1-mobilecrashfix1-mobilecrashfix2") !important; --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/paladin/holy.png?v=V1.27Beta-paladin-actionfix1-mobilecrashfix1-mobilecrashfix2") !important; } html body:not(.maintenance-mode) #cards[data-attack-style="protection-paladin"] { --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/paladin/protection.png?v=V1.27Beta-paladin-actionfix1-mobilecrashfix1-mobilecrashfix2") !important; --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/paladin/protection.png?v=V1.27Beta-paladin-actionfix1-mobilecrashfix1-mobilecrashfix2") !important; --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/paladin/protection.png?v=V1.27Beta-paladin-actionfix1-mobilecrashfix1-mobilecrashfix2") !important; } html body:not(.maintenance-mode) #cards[data-attack-style="retribution-paladin"] { --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/paladin/retribution.png?v=V1.27Beta-paladin-actionfix1-mobilecrashfix1-mobilecrashfix2") !important; --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/paladin/retribution.png?v=V1.27Beta-paladin-actionfix1-mobilecrashfix1-mobilecrashfix2") !important; --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/paladin/retribution.png?v=V1.27Beta-paladin-actionfix1-mobilecrashfix1-mobilecrashfix2") !important; } html body:not(.maintenance-mode) #cards[data-attack-style="monk"], html body:not(.maintenance-mode) #cards[data-attack-style="windwalker-monk"] { --action-attack-panel-art: var(--action-attack-panel-monk); --action-solid: #70ffc8; } html body:not(.maintenance-mode) #cards[data-attack-style="brewmaster-monk"] { --action-attack-panel-art: var(--action-attack-panel-brewmaster-monk); --action-solid: #70ffc8; } html body:not(.maintenance-mode) #cards[data-attack-style="mistweaver-monk"] { --action-attack-panel-art: var(--action-attack-panel-mistweaver-monk); --action-solid: #70ffc8; } html body:not(.maintenance-mode) #cards[data-attack-style="druid"], html body:not(.maintenance-mode) #cards[data-attack-style="feral-druid"] { --action-attack-panel-art: var(--action-attack-panel-feral-druid); --action-solid: #82ec72; } html body:not(.maintenance-mode) #cards[data-attack-style="balance-druid"] { --action-attack-panel-art: var(--action-attack-panel-balance-druid); --action-solid: #9ad9ff; } html body:not(.maintenance-mode) #cards[data-attack-style="restoration-druid"] { --action-attack-panel-art: var(--action-attack-panel-restoration-druid); --action-solid: #82ec72; } html body:not(.maintenance-mode) #cards[data-attack-style="shaman"], html body:not(.maintenance-mode) #cards[data-attack-style="restoration-shaman"], html body:not(.maintenance-mode) #cards[data-attack-style="elemental-shaman"] { --action-attack-panel-art: var(--action-attack-panel-shaman); --action-solid: #72eaff; } html body:not(.maintenance-mode) #cards[data-attack-style="warlock"], html body:not(.maintenance-mode) #cards[data-attack-style="demonology-warlock"] { --action-attack-panel-art: var(--action-attack-panel-warlock); --action-solid: #c084ff; } html body:not(.maintenance-mode) #cards[data-attack-style="mage"], html body:not(.maintenance-mode) #cards[data-attack-style="arcane-mage"], html body:not(.maintenance-mode) #cards[data-attack-style="caster"] { --action-attack-panel-art: var(--action-attack-panel-arcane-mage); --action-solid: #8bdfff; } html body:not(.maintenance-mode) #cards[data-attack-style="fire-mage"] { --action-attack-panel-art: var(--action-attack-panel-fire-mage); --action-solid: #ff7d39; } html body:not(.maintenance-mode) #cards[data-attack-style="frost-mage"] { --action-attack-panel-art: var(--action-attack-panel-frost-mage); --action-solid: #75d7ff; } html body:not(.maintenance-mode) #cards[data-attack-style="hunter"], html body:not(.maintenance-mode) #cards[data-attack-style="beastmaster-hunter"], html body:not(.maintenance-mode) #cards[data-attack-style="marksman-hunter"] { --action-attack-panel-art: var(--action-attack-panel-hunter); --action-solid: #a8ff82; } html body:not(.maintenance-mode) #cards[data-attack-style="priest"], html body:not(.maintenance-mode) #cards[data-attack-style="discipline-priest"] { --action-attack-panel-art: var(--action-attack-panel-priest); --action-solid: #fff0b0; } html body:not(.maintenance-mode) #cards[data-attack-style="rogue"], html body:not(.maintenance-mode) #cards[data-attack-style="assassination-rogue"] { --action-attack-panel-art: var(--action-attack-panel-rogue); --action-solid: #d8e7ff; } html body:not(.maintenance-mode) #cards[data-attack-style="subtlety-rogue"] { --action-attack-panel-art: var(--action-attack-panel-subtlety-rogue); --action-solid: #d8e7ff; } html body:not(.maintenance-mode) #cards[data-attack-style="outlaw-rogue"] { --action-attack-panel-art: var(--action-attack-panel-outlaw-rogue); --action-solid: #d8e7ff; } html body:not(.maintenance-mode) #cards .action-card.attack, html body:not(.maintenance-mode) #battle #cards .action-card.attack { min-height: 0 !important; aspect-ratio: 16 / 9 !important; padding: 0 !important; display: grid !important; place-items: center !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: var(--action-attack-panel-art) center center / contain no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 7px 12px rgba(2, 11, 22, 0.22)) !important; clip-path: none !important; } html body:not(.maintenance-mode) #cards .action-card.attack::before, html body:not(.maintenance-mode) #cards .action-card.attack::after, html body:not(.maintenance-mode) #battle #cards .action-card.attack::before, html body:not(.maintenance-mode) #battle #cards .action-card.attack::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #cards .action-card.attack span, html body:not(.maintenance-mode) #battle #cards .action-card.attack span { z-index: 3 !important; margin: 0 0 0 14% !important; color: rgba(248, 252, 255, 0.96) !important; -webkit-text-fill-color: currentColor !important; font-weight: 900 !important; letter-spacing: 0 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 0 9px color-mix(in srgb, var(--action-solid) 32%, transparent) !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .arena { grid-template-rows: minmax(0, 1fr) !important; align-content: stretch !important; justify-content: stretch !important; padding: 0 !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .topbar { position: fixed !important; left: var(--battle-field-gap) !important; right: calc(var(--battle-side-width) + var(--battle-field-gap)) !important; top: 5px !important; z-index: 36 !important; width: auto !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; display: flex !important; justify-content: center !important; } html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) { position: fixed !important; left: var(--battle-field-gap) !important; right: calc(var(--battle-side-width) + var(--battle-field-gap)) !important; top: clamp(48px, 6.1vh, 64px) !important; bottom: clamp(12px, 1.6vh, 18px) !important; z-index: 30 !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: clamp(8px, 1.1vh, 12px) !important; display: grid !important; grid-template-rows: minmax(0, 1fr) auto auto auto !important; justify-items: center !important; gap: clamp(5px, 0.8vh, 9px) !important; overflow: visible !important; transform: none !important; } html body:not(.maintenance-mode) #battle .fighters { width: min(930px, 100%) !important; min-height: 0 !important; height: auto !important; max-height: none !important; align-self: stretch !important; justify-self: center !important; margin: 0 !important; padding: clamp(8px, 1vw, 14px) !important; transform: none !important; } html body:not(.maintenance-mode) #battle #cards { width: min(560px, 100%) !important; justify-self: center !important; margin: 0 !important; padding: 0 !important; } html body:not(.maintenance-mode) #battle .battle-libraries { width: min(380px, 100%) !important; justify-self: center !important; margin: 0 !important; padding: 0 !important; } html body:not(.maintenance-mode) #battle .utility { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: min(420px, 100%) !important; height: auto !important; justify-self: center !important; margin: 0 !important; padding: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; transform: none !important; } html body:not(.maintenance-mode) #battle .utility:has(#rematch:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) #battle .utility button { width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 10px !important; font-size: 12px !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #sidePanel.side:not([hidden]) { position: fixed !important; left: auto !important; right: 0 !important; top: 0 !important; bottom: 0 !important; z-index: 28 !important; width: var(--battle-side-width) !important; max-width: var(--battle-side-width) !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; padding: clamp(6px, 1vh, 10px) clamp(6px, 0.8vw, 10px) !important; overflow: hidden !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app:not(.solo):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .arena { grid-template-rows: auto minmax(0, 1fr) !important; padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)) !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle.battle:not([hidden]) { left: auto !important; right: auto !important; width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; height: calc(100dvh - 18px) !important; max-height: calc(100dvh - 18px) !important; margin: 0 auto !important; padding: 0 0 calc(104px + env(safe-area-inset-bottom)) !important; box-sizing: border-box !important; grid-template-rows: minmax(0, 1fr) 54px 38px 40px !important; gap: 5px !important; overflow: hidden !important; transform: none !important; } html body:not(.maintenance-mode) #battle .fighters, html body:not(.maintenance-mode) #battle #cards, html body:not(.maintenance-mode) #battle .battle-libraries, html body:not(.maintenance-mode) #battle .utility { width: 100% !important; max-width: 100% !important; justify-self: center !important; margin: 0 !important; box-sizing: border-box !important; transform: none !important; } html body:not(.maintenance-mode) #battle #cards, html body:not(.maintenance-mode) #battle .battle-libraries, html body:not(.maintenance-mode) #battle .utility { padding: 0 4px !important; } html body:not(.maintenance-mode) #battle .utility { left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; } html body:not(.maintenance-mode) #battle .utility:has(#rematch:not([hidden])) { grid-template-columns: 0.72fr 1fr 1fr !important; } html body:not(.maintenance-mode) #battle .utility button { width: 100% !important; min-width: 0 !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; } html body:not(.maintenance-mode) #battle #cards .action-card.attack { height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 16 / 9 !important; background: var(--action-attack-panel-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #battle #cards .action-card.attack span { margin-left: 14% !important; font-size: clamp(13px, 3.3vw, 16px) !important; } html body:not(.maintenance-mode) #sidePanel.side:not([hidden]) { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; height: 86px !important; max-height: 86px !important; overflow: hidden !important; } html body:not(.maintenance-mode):has(#battle.battle:not([hidden])) .language-toggle, html body:not(.maintenance-mode):has(#battle.battle:not([hidden])) .music-toggle { z-index: 88 !important; pointer-events: auto !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app[data-room-mode="identity"] .room-pill { position: fixed !important; right: clamp(12px, 3.4vw, 18px) !important; top: clamp(72px, 8.2vh, 84px) !important; z-index: 36 !important; width: min(206px, calc(100vw - 24px)) !important; min-width: min(206px, calc(100vw - 24px)) !important; max-width: min(206px, calc(100vw - 24px)) !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; padding: 0 8px !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app[data-room-mode="identity"] .room-pill #copyRoom { flex: 0 0 74px !important; width: 74px !important; min-width: 74px !important; max-width: 74px !important; height: 34px !important; min-height: 34px !important; padding: 0 8px !important; font-size: 12px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; padding: 0 !important; display: block !important; overflow: hidden !important; background: transparent !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-head { position: fixed !important; left: 50% !important; top: clamp(112px, 13vh, 128px) !important; z-index: 26 !important; width: min(360px, calc(100vw - 28px)) !important; margin: 0 !important; padding: 8px 12px 10px !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] #identityRules { position: fixed !important; left: 50% !important; top: clamp(202px, 23vh, 222px) !important; z-index: 27 !important; width: min(360px, calc(100vw - 28px)) !important; max-width: min(360px, calc(100vw - 28px)) !important; margin: 0 !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] #identityRules[open] { top: 112px !important; z-index: 44 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] #identityRules .identity-rules-body { max-height: min(380px, calc(100dvh - 230px)) !important; overflow: auto !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] #roomSeatGrid { position: fixed !important; left: 50% !important; top: clamp(248px, 28vh, 272px) !important; bottom: auto !important; z-index: 18 !important; width: min(430px, calc(100vw - 18px)) !important; max-width: min(430px, calc(100vw - 18px)) !important; height: max(320px, calc(100dvh - 365px)) !important; max-height: calc(100dvh - 365px) !important; margin: 0 !important; padding: 2px 0 8px !important; transform: translateX(-50%) !important; overflow: auto !important; align-content: start !important; justify-content: center !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(58px, calc(env(safe-area-inset-bottom) + 54px)) !important; z-index: 34 !important; width: min(430px, calc(100vw - 18px)) !important; max-width: min(430px, calc(100vw - 18px)) !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: center !important; justify-content: center !important; gap: 5px !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #startGame, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #copyRoomLobby, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #refreshRoomLobby, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #showRulesRoomLobby, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #leaveRoomLobby { pointer-events: auto !important; position: relative !important; grid-column: auto !important; justify-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 3px !important; font-size: clamp(9px, 2.55vw, 11px) !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 0 !important; color: #153d5c !important; -webkit-text-fill-color: currentColor !important; background: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") center / 100% 100% no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 5px 8px rgba(5, 28, 50, 0.14)) !important; } } /* V1.27Beta-codex40: final desktop character-select frame with white fill clipped to the inner edge. */ html body:not(.maintenance-mode) { --character-select-frame-two-row-art: url("assets/ui/character-select-panel-crystal-frame-two-row-v1.png?v=V1.27Beta-codex42"); } @media (min-width: 721px) { html body:not(.maintenance-mode) #characterSelect.character-select, html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) { --select-layout-top: clamp(54px, 6vh, 68px) !important; --select-visible-pad-y: clamp(8px, 1vh, 12px) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout { top: var(--select-layout-top) !important; width: min(1502px, calc(100vw - 14px), calc((100dvh - var(--select-layout-top) - 8px) * 1502 / 1120)) !important; max-height: calc(100dvh - var(--select-layout-top) - 8px) !important; aspect-ratio: 1502 / 1120 !important; padding: clamp(112px, 12.2vh, 136px) clamp(76px, 4.4vw, 90px) clamp(112px, 11.4vh, 132px) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::before { content: "" !important; position: absolute !important; z-index: 7 !important; inset: 0 !important; display: block !important; pointer-events: none !important; background: var(--character-select-frame-two-row-art) center / 100% 100% no-repeat !important; filter: drop-shadow(0 0 14px rgba(151, 219, 255, 0.18)) drop-shadow(0 10px 18px rgba(18, 62, 94, 0.12)) !important; } html body:not(.maintenance-mode) #characterSelect .character-select-layout::after { content: "" !important; position: absolute !important; z-index: 0 !important; inset: clamp(118px, 12.2vh, 138px) clamp(104px, 5.8vw, 122px) clamp(118px, 11.4vh, 136px) !important; display: block !important; pointer-events: none !important; border-radius: clamp(14px, 1.3vw, 20px) !important; background: radial-gradient(ellipse at 50% 9%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92) 44%, rgba(236, 248, 255, 0.88) 78%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 250, 255, 0.9)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82), inset 0 0 38px rgba(130, 207, 255, 0.12), 0 10px 24px rgba(37, 86, 124, 0.08) !important; } html body:not(.maintenance-mode) #characterSelect .character-scroll { z-index: 2 !important; align-self: center !important; justify-self: center !important; width: min(100%, calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3 + clamp(48px, 3.8vw, 70px))) !important; height: min(100%, calc(var(--select-card-outer-h) * 2 + var(--select-gap) + var(--select-visible-pad-y) * 2)) !important; max-height: calc(var(--select-card-outer-h) * 2 + var(--select-gap) + var(--select-visible-pad-y) * 2) !important; padding: var(--select-visible-pad-y) 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow-x: clip !important; overflow-y: auto !important; scrollbar-gutter: stable both-edges !important; } html body:not(.maintenance-mode) #characterSelect .character-options { width: max-content !important; min-height: 0 !important; height: auto !important; align-content: start !important; justify-content: center !important; padding: 0 !important; margin-inline: auto !important; } } /* V1.27Beta-codex44 absolute EOF lock: room start screen exit button bottom-center. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions { left: 0 !important; right: 0 !important; width: 100vw !important; max-width: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(20px, 3.2vh, 34px) !important; z-index: 90 !important; transform: translateX(-50%) !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions { left: 0 !important; right: 0 !important; width: 100vw !important; max-width: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px)) !important; z-index: 90 !important; transform: translateX(-50%) !important; } } /* V1.27Beta-codex47 true EOF lock: room buttons, character matrix, preview card, and special mode controls. */ html body:not(.maintenance-mode) { --action-defend-user-panel-art: url("assets/ui/action-defend-user-crystal-panel-v2.png?v=V1.27Beta-codex48"); --special-mode-plastic-button-bg: radial-gradient(ellipse at 14% 0%, rgba(255, 255, 255, 0.95), transparent 42%), linear-gradient(180deg, rgba(244, 253, 255, 0.98), rgba(148, 221, 255, 0.92) 40%, rgba(55, 116, 188, 0.9) 73%, rgba(245, 207, 119, 0.9)); --special-mode-plastic-button-shadow: 0 10px 18px rgba(20, 65, 112, 0.22), 0 0 18px rgba(142, 225, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.84), inset 0 -1px 0 rgba(28, 74, 129, 0.3); --special-mode-title-gradient: linear-gradient(180deg, #ffffff 0%, #d9f8ff 24%, #8edcff 45%, #3f83d4 68%, #f0cb74 100%); } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .join-row, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-panel .join-row { justify-self: end !important; width: min(333px, 100%) !important; max-width: min(333px, 100%) !important; grid-template-columns: minmax(0, 175px) 150px !important; gap: 8px !important; } html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .join-row #joinCode { width: 100% !important; min-width: 0 !important; justify-self: stretch !important; } html body:not(.maintenance-mode) #cards .action-card.defend { --action-icon-image: none !important; overflow: visible !important; isolation: isolate !important; border: 0 !important; border-radius: 0 !important; background: var(--action-defend-panel-art, var(--action-defend-user-panel-art)) center center / 100% 100% no-repeat !important; box-shadow: 0 10px 18px rgba(3, 17, 30, 0.18), 0 0 18px rgba(82, 226, 235, 0.16) !important; } html body:not(.maintenance-mode) #cards .action-card.defend::before, html body:not(.maintenance-mode) #cards .action-card.defend::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #cards .action-card.defend .action-icon { display: none !important; } html body:not(.maintenance-mode) #cards .action-card.defend span { position: relative !important; z-index: 3 !important; justify-self: center !important; margin-left: clamp(38px, 22%, 74px) !important; color: #ecfbff !important; text-shadow: 0 2px 4px rgba(0, 12, 22, 0.92), 0 0 12px rgba(91, 229, 244, 0.48) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .join-row, html body:not(.maintenance-mode) #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .lobby-panel .join-row { width: calc(100% - 8px) !important; max-width: calc(100% - 8px) !important; grid-template-columns: minmax(0, 1fr) minmax(104px, 31%) !important; } html body:not(.maintenance-mode) #battle #cards .action-card.defend, html body:not(.maintenance-mode) #cards .action-card.defend { background-size: 100% 100% !important; } html body:not(.maintenance-mode) #battle #cards .action-card.defend span, html body:not(.maintenance-mode) #cards .action-card.defend span { margin-left: clamp(22px, 18%, 48px) !important; } } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(74px, 9vh, 100px) !important; z-index: 76 !important; width: max-content !important; max-width: calc(100vw - 56px) !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: clamp(10px, 1vw, 14px) !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(20px, 3.2vh, 34px) !important; z-index: 76 !important; width: max-content !important; max-width: calc(100vw - 56px) !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: clamp(8px, 0.8vw, 12px) !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions > button { pointer-events: auto !important; position: relative !important; inset: auto !important; transform: none !important; width: clamp(132px, 10.2vw, 160px) !important; min-width: clamp(132px, 10.2vw, 160px) !important; max-width: clamp(132px, 10.2vw, 160px) !important; height: clamp(44px, 5.1vh, 54px) !important; min-height: clamp(44px, 5.1vh, 54px) !important; max-height: clamp(44px, 5.1vh, 54px) !important; margin: 0 !important; padding: 0 12px 2px !important; display: grid !important; place-items: center !important; background-image: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 7px 12px rgba(5, 28, 50, 0.16)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(20px, 3.2vh, 34px) !important; z-index: 92 !important; width: clamp(148px, 10.8vw, 184px) !important; min-width: clamp(148px, 10.8vw, 184px) !important; max-width: clamp(148px, 10.8vw, 184px) !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) .room-lobby-actions #leaveRoomLobby { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(58px, calc(env(safe-area-inset-bottom) + 54px)) !important; z-index: 76 !important; width: min(430px, calc(100vw - 18px)) !important; max-width: min(430px, calc(100vw - 18px)) !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) .room-lobby-actions { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-lobby-actions > button { pointer-events: auto !important; position: relative !important; inset: auto !important; transform: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 3px 1px !important; display: grid !important; place-items: center !important; font-size: clamp(9px, 2.55vw, 11px) !important; line-height: 1 !important; white-space: nowrap !important; background-image: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 5px 8px rgba(5, 28, 50, 0.14)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions #leaveRoomLobby { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px)) !important; z-index: 92 !important; width: min(174px, 48vw) !important; min-width: min(174px, 48vw) !important; max-width: min(174px, 48vw) !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) .room-lobby-actions #leaveRoomLobby { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; } } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) { --select-frame-inner-x: clamp(46px, 3.7vw, 58px) !important; --select-frame-inner-y: clamp(52px, 7.7vh, 62px) !important; --select-matrix-w: calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3) !important; --select-matrix-h: calc(var(--select-card-outer-h) * 2 + var(--select-gap)) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { position: fixed !important; left: 50vw !important; top: 50dvh !important; width: min(calc(var(--select-matrix-w) + var(--select-frame-inner-x) * 2), calc(100vw - 14px)) !important; height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 54px)) !important; max-width: calc(100vw - 14px) !important; max-height: calc(100dvh - 54px) !important; padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important; margin: 0 !important; display: grid !important; place-items: center !important; transform: translate(-50%, -50%) !important; overflow: visible !important; isolation: isolate !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::after { content: "" !important; position: absolute !important; z-index: 0 !important; inset: var(--select-frame-inner-y) var(--select-frame-inner-x) !important; display: block !important; pointer-events: none !important; border-radius: clamp(12px, 1vw, 18px) !important; background: radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.93) 42%, rgba(235, 248, 255, 0.88) 80%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 250, 255, 0.9)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82), inset 0 0 36px rgba(130, 207, 255, 0.12), 0 10px 24px rgba(37, 86, 124, 0.08) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::before { content: "" !important; position: absolute !important; z-index: 8 !important; inset: 0 !important; display: block !important; pointer-events: none !important; background: var(--character-select-frame-two-row-art) center / 100% 100% no-repeat !important; filter: drop-shadow(0 0 14px rgba(151, 219, 255, 0.18)) drop-shadow(0 10px 18px rgba(18, 62, 94, 0.12)) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll { position: relative !important; z-index: 4 !important; align-self: center !important; justify-self: center !important; width: var(--select-matrix-w) !important; max-width: var(--select-matrix-w) !important; height: var(--select-matrix-h) !important; max-height: var(--select-matrix-h) !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { width: var(--select-matrix-w) !important; max-width: var(--select-matrix-w) !important; min-height: 0 !important; height: auto !important; grid-template-columns: repeat(4, var(--select-card-outer-w)) !important; grid-auto-rows: var(--select-card-outer-h) !important; gap: var(--select-gap) !important; align-content: start !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; } } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.preview-open .character-preview-backdrop { z-index: 80 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]) { position: absolute !important; left: 50% !important; top: 50% !important; z-index: 120 !important; transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]):hover, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]):focus-within { transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview .preview-skill { display: grid !important; grid-template-rows: auto auto minmax(0, 1fr) !important; align-content: end !important; gap: clamp(5px, 0.7vh, 7px) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]) { display: inline-grid !important; place-items: center !important; width: fit-content !important; min-width: clamp(104px, 9vw, 132px) !important; min-height: clamp(28px, 3vh, 34px) !important; order: 1 !important; position: relative !important; z-index: 4 !important; justify-self: start !important; margin: 0 0 4px !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewSkill { order: 2 !important; position: relative !important; z-index: 2 !important; justify-self: start !important; margin: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewDescription { order: 3 !important; position: relative !important; z-index: 1 !important; margin: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Xiaoyang"] #previewModeSkill, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Lollipopz"] #previewModeSkill, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Rhasta"] #previewModeSkill { clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] #modeDialogSkill .skill-inline-text, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeDialogSkill .skill-inline-text, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogCharacter, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeDialogSkill .skill-inline-text { background: var(--special-mode-title-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.44)) drop-shadow(0 0 10px rgba(116, 220, 255, 0.42)) drop-shadow(0 0 12px rgba(71, 131, 214, 0.22)) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject) { min-width: clamp(106px, 9vw, 136px) !important; height: clamp(34px, 4.3vh, 42px) !important; min-height: clamp(34px, 4.3vh, 42px) !important; padding: 0 18px 2px !important; border: 1px solid rgba(222, 246, 255, 0.82) !important; border-left: 3px solid rgba(118, 219, 255, 0.92) !important; border-right: 3px solid rgba(238, 201, 112, 0.86) !important; border-radius: 0 !important; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%) !important; color: #123755 !important; -webkit-text-fill-color: currentColor !important; font-weight: 950 !important; letter-spacing: 0 !important; line-height: 1 !important; display: inline-grid !important; place-items: center !important; background: var(--special-mode-plastic-button-bg) !important; box-shadow: var(--special-mode-plastic-button-shadow) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::after, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::after, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject)::after { content: none !important; display: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(.mode-close, .mode-lock, #modeAccept, #modeReject) { min-width: 88px !important; height: 34px !important; min-height: 34px !important; padding: 0 12px 1px !important; font-size: 12px !important; } } /* V1.27Beta-codex49: reusable card animation director states */ .card-vfx-idle, .card-vfx-hover, .card-vfx-selected, .card-vfx-playable, .card-vfx-attacking, .card-vfx-casting, .card-vfx-dying { transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity, filter, box-shadow; } .card-vfx-idle { position: relative; animation: luminaryCardBreath 5.4s ease-in-out infinite; } .card-vfx-idle::after { content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit; opacity: 0.34; background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.28) 46%, transparent 58%), radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.58) 0 1px, transparent 2px), radial-gradient(circle at 78% 76%, rgba(130, 232, 255, 0.46) 0 1px, transparent 2px); mix-blend-mode: screen; animation: luminaryEdgeShimmer 4.8s ease-in-out infinite; } .card-vfx-hover { position: relative; z-index: 5; box-shadow: 0 0 0 1px var(--card-vfx-edge, rgba(214, 229, 242, 0.86)), 0 0 24px var(--card-vfx-glow, rgba(130, 232, 255, 0.3)), 0 24px 52px rgba(4, 14, 28, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 0 24px rgba(130, 232, 255, 0.12) !important; } .card-vfx-selected { position: relative; z-index: 6; outline: 2px solid var(--card-vfx-edge, rgba(130, 232, 255, 0.82)); outline-offset: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.48), 0 0 34px var(--card-vfx-glow, rgba(130, 232, 255, 0.34)), 0 18px 44px rgba(4, 14, 28, 0.24) !important; } .card-vfx-selected::before { content: ""; position: absolute; left: 50%; bottom: -18px; width: min(78%, 190px); height: 24px; transform: translateX(-50%); pointer-events: none; border-radius: 999px; background: radial-gradient(ellipse, rgba(130, 232, 255, 0.42), transparent 72%), linear-gradient(90deg, transparent, rgba(246, 200, 95, 0.32), transparent); filter: blur(0.2px); } .card-vfx-playable { animation: luminaryPlayablePulse 2.8s ease-in-out infinite; } .card-vfx-attacking { --card-vfx-glow: color-mix(in srgb, var(--card-vfx-primary, #ffffff) 48%, transparent); filter: brightness(1.17) saturate(1.16); box-shadow: 0 0 32px color-mix(in srgb, var(--card-vfx-primary, #ffffff) 38%, transparent), 0 22px 54px rgba(4, 14, 28, 0.34), inset 0 0 30px color-mix(in srgb, var(--card-vfx-secondary, #82e8ff) 18%, transparent) !important; } .card-vfx-state-casting, .card-vfx-casting { filter: brightness(1.16) saturate(1.14); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.44), 0 0 34px var(--card-vfx-glow, rgba(246, 200, 95, 0.42)), inset 0 0 30px rgba(255, 255, 255, 0.18) !important; } .card-vfx-state-damaged { filter: brightness(1.22) saturate(1.14); } .card-vfx-state-dead { opacity: 0.2; filter: grayscale(1) brightness(0.55); } .vfx-demo-selector { display: grid; gap: 5px; padding: 0 10px 9px; color: #18364e; font-size: 11px; font-weight: 900; } .vfx-demo-selector select { width: 100%; min-height: 32px; border: 1px solid rgba(99, 164, 210, 0.58); border-radius: 6px; padding: 4px 8px; color: #14324a; font-weight: 900; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(218, 238, 252, 0.74)), rgba(255, 255, 255, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88); } @keyframes luminaryCardBreath { 0%, 100% { transform: translateZ(0) scale(1); filter: brightness(1) saturate(1); } 50% { transform: translateZ(0) scale(1.004); filter: brightness(1.035) saturate(1.03); } } @keyframes luminaryEdgeShimmer { 0%, 100% { opacity: 0.16; transform: translateX(-4%); } 45% { opacity: 0.42; } 60% { transform: translateX(6%); } } @keyframes luminaryPlayablePulse { 0%, 100% { box-shadow: 0 10px 22px rgba(8, 32, 54, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82); } 50% { box-shadow: 0 0 0 1px rgba(246, 200, 95, 0.34), 0 0 24px rgba(130, 232, 255, 0.22), 0 12px 30px rgba(8, 32, 54, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9); } } @media (prefers-reduced-motion: reduce) { .card-vfx-idle, .card-vfx-idle::after, .card-vfx-playable { animation: none !important; } } /* V1.27Beta-codex50: mobile emergency layout lock. */ html body:not(.maintenance-mode) .version-badge { display: none !important; } html body:not(.maintenance-mode) { --character-select-mobile-frame-art: url("assets/ui/character-select-mobile-portrait-frame-gpt2.png?v=V1.27Beta-codex50"); } @media (max-width: 720px) { html body:not(.maintenance-mode) .enter-gate { box-sizing: border-box !important; width: min(392px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) { padding-bottom: max(156px, calc(env(safe-area-inset-bottom) + 148px)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(66px, calc(env(safe-area-inset-bottom) + 60px)) !important; z-index: 82 !important; width: min(412px, calc(100vw - 18px)) !important; max-width: min(412px, calc(100vw - 18px)) !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 36px 38px !important; gap: 5px !important; row-gap: 8px !important; align-items: center !important; justify-content: center !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions > button { pointer-events: auto !important; position: relative !important; inset: auto !important; transform: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; margin: 0 !important; padding: 0 4px 1px !important; display: grid !important; place-items: center !important; font-size: clamp(9px, 2.55vw, 11px) !important; line-height: 1 !important; white-space: nowrap !important; background-image: url("assets/ui/room-action-button-crystal-glass-gpt2.png?v=V1.27Beta") !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 5px 8px rgba(5, 28, 50, 0.14)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) .room-lobby-actions #leaveRoomLobby { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; z-index: 92 !important; grid-column: 2 / 4 !important; grid-row: 2 !important; justify-self: center !important; width: min(174px, 48vw) !important; min-width: min(174px, 48vw) !important; max-width: min(174px, 48vw) !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; margin: 0 !important; padding: 0 12px 1px !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) { grid-template-rows: 48px minmax(0, 1fr) 0 !important; padding: 0 !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { position: fixed !important; left: 0 !important; right: 0 !important; top: 48px !important; bottom: 0 !important; width: 100vw !important; height: calc(100dvh - 48px) !important; max-width: 100vw !important; max-height: calc(100dvh - 48px) !important; margin: 0 !important; padding: clamp(64px, 7.4dvh, 76px) clamp(24px, 6vw, 30px) clamp(226px, 25dvh, 242px) !important; display: block !important; transform: none !important; aspect-ratio: auto !important; box-sizing: border-box !important; background: var(--character-select-mobile-frame-art) center center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; overflow: hidden !important; isolation: auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll { position: relative !important; z-index: 1 !important; width: 100% !important; height: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 0 18px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 0 22px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; gap: 10px 10px !important; align-content: start !important; justify-content: center !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option { width: 100% !important; min-width: 0 !important; max-width: none !important; height: clamp(246px, 30dvh, 282px) !important; min-height: clamp(246px, 30dvh, 282px) !important; max-height: clamp(246px, 30dvh, 282px) !important; margin: 0 !important; padding: clamp(13px, 3.2vw, 16px) !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option span { width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option .mini-art { inset: clamp(10px, 2.6vw, 13px) clamp(9px, 2.3vw, 12px) clamp(34px, 8vw, 42px) !important; border-radius: 7px 7px 5px 5px !important; background-position: center top !important; background-size: cover !important; clip-path: inset(0 round 7px 7px 5px 5px) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option.card-vfx-idle { animation: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option.card-vfx-idle::after { content: none !important; display: none !important; } } /* V1.27Beta-codex54 EOF lock: final rule order for select frame, action buttons, and special-mode typography. */ html body:not(.maintenance-mode) { --action-defend-user-panel-art: url("assets/ui/action-defend-user-crystal-panel-v3.png?v=V1.27Beta-codex54") !important; --action-charge-user-panel-art: url("assets/ui/action-charge-user-gold-panel-v3.png?v=V1.27Beta-codex54") !important; --character-select-desktop-frame-art: url("assets/ui/character-select-desktop-single-white-frame-v1.png?v=V1.27Beta-codex54") !important; --codex-card-artifact-art: url("assets/ui/codex-card-artifact-relicvault-actual-artifacts-v1.png?v=V1.27Beta-codex54") !important; --battle-opportunity-library-art: url("assets/ui/codex-card-opportunity-fatecards-v3-gpt2.png?v=V1.27Beta-codex54") !important; --battle-artifact-library-art: url("assets/ui/codex-card-artifact-relicvault-actual-artifacts-v1.png?v=V1.27Beta-codex54") !important; } html body:not(.maintenance-mode) .card-vfx-idle::after { opacity: 0.18 !important; background: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.22) 48%, transparent 58%) !important; } html body:not(.maintenance-mode) #battle #cards .action-card, html body:not(.maintenance-mode) #cards .action-card { --action-button-art: none; min-height: 0 !important; aspect-ratio: 16 / 9 !important; padding: 0 !important; display: grid !important; place-items: center !important; overflow: visible !important; isolation: isolate !important; border: 0 !important; border-radius: 0 !important; clip-path: none !important; background: var(--action-button-art) center center / contain no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 7px 12px rgba(2, 11, 22, 0.22)) !important; } html body:not(.maintenance-mode) #battle #cards .action-card.attack, html body:not(.maintenance-mode) #cards .action-card.attack { --action-button-art: var(--action-attack-panel-art) !important; background: var(--action-attack-panel-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #battle #cards .action-card.defend, html body:not(.maintenance-mode) #cards .action-card.defend { --action-button-art: var(--action-defend-panel-art, var(--action-defend-user-panel-art)) !important; background: var(--action-button-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #battle #cards .action-card.charge, html body:not(.maintenance-mode) #cards .action-card.charge { --action-button-art: var(--action-charge-panel-art, var(--action-charge-user-panel-art)) !important; background: var(--action-button-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #battle #cards .action-card::before, html body:not(.maintenance-mode) #battle #cards .action-card::after, html body:not(.maintenance-mode) #cards .action-card::before, html body:not(.maintenance-mode) #cards .action-card::after, html body:not(.maintenance-mode) #battle #cards .action-card .action-icon, html body:not(.maintenance-mode) #cards .action-card .action-icon { content: none !important; display: none !important; } html body:not(.maintenance-mode) #battle #cards .action-card span, html body:not(.maintenance-mode) #cards .action-card span { position: relative !important; z-index: 2 !important; margin: 0 0 0 16% !important; color: #f7fbff !important; -webkit-text-fill-color: currentColor !important; font-weight: 950 !important; letter-spacing: 0 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.94), 0 0 10px rgba(159, 229, 255, 0.34) !important; } html body:not(.maintenance-mode) #battle #cards .action-card.charge span, html body:not(.maintenance-mode) #cards .action-card.charge span { color: #fff7d0 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.94), 0 0 12px rgba(255, 205, 80, 0.38) !important; } html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle#showOpportunityLibraryBattle, html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle#showArtifactLibraryBattle { border: 0 !important; border-radius: 0 !important; min-height: 42px !important; overflow: hidden !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 8px 14px rgba(3, 14, 28, 0.24)) !important; } html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle#showOpportunityLibraryBattle { --library-glow: #8bdfff; background-image: linear-gradient(90deg, rgba(4, 15, 30, 0.68), rgba(4, 15, 30, 0.22) 52%, rgba(4, 15, 30, 0.72)), var(--battle-opportunity-library-art) !important; } html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle#showArtifactLibraryBattle { --library-glow: #d9c07c; background-image: linear-gradient(90deg, rgba(4, 15, 30, 0.68), rgba(4, 15, 30, 0.2) 52%, rgba(4, 15, 30, 0.72)), var(--battle-artifact-library-art) !important; } html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle#showOpportunityLibraryBattle span, html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle#showArtifactLibraryBattle span { color: #fffaf0 !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92), 0 0 12px color-mix(in srgb, var(--library-glow) 42%, transparent) !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) { --select-frame-inner-x: clamp(58px, 4.2vw, 82px) !important; --select-frame-inner-y: clamp(86px, 10.4vh, 118px) !important; --select-matrix-w: calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3) !important; --select-matrix-h: calc(var(--select-card-outer-h) * 2 + var(--select-gap)) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { position: fixed !important; left: 50vw !important; top: 50dvh !important; width: min(calc(var(--select-matrix-w) + var(--select-frame-inner-x) * 2), calc(100vw - 14px)) !important; height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 50px)) !important; max-width: calc(100vw - 14px) !important; max-height: calc(100dvh - 50px) !important; padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important; display: grid !important; place-items: center !important; margin: 0 !important; transform: translate(-50%, -50%) !important; overflow: visible !important; isolation: isolate !important; background: var(--character-select-desktop-frame-art) center center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll { position: relative !important; z-index: 2 !important; width: var(--select-matrix-w) !important; max-width: var(--select-matrix-w) !important; height: var(--select-matrix-h) !important; max-height: var(--select-matrix-h) !important; padding: 0 !important; margin: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { width: var(--select-matrix-w) !important; max-width: var(--select-matrix-w) !important; grid-template-columns: repeat(4, var(--select-card-outer-w)) !important; grid-auto-rows: var(--select-card-outer-h) !important; gap: var(--select-gap) !important; align-content: center !important; justify-content: center !important; padding: 0 !important; margin: 0 auto !important; } } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]) { max-width: 100% !important; width: fit-content !important; min-width: 0 !important; min-height: 0 !important; padding: 3px 8px 4px 7px !important; display: inline-grid !important; place-items: center !important; justify-self: start !important; order: 1 !important; margin: 0 0 5px !important; font-size: clamp(12px, 0.95vw, 14px) !important; line-height: 1.08 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill .skill-inline-icon { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Rhasta"] #previewModeSkill:not([hidden]) { color: #fff3bd !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(226, 168, 62, 0.88) !important; border-left: 3px solid rgba(45, 122, 95, 0.98) !important; background: radial-gradient(circle at 16% 0%, rgba(255, 248, 213, 0.54), transparent 46%), linear-gradient(90deg, rgba(45, 122, 95, 0.94), rgba(217, 155, 56, 0.92) 56%, rgba(82, 49, 15, 0.96)) !important; box-shadow: 0 8px 20px rgba(73, 55, 18, 0.28), 0 0 18px rgba(226, 168, 62, 0.22), inset 0 1px 0 rgba(255, 247, 204, 0.38) !important; text-shadow: 0 1px 3px rgba(34, 18, 5, 0.72), 0 0 10px rgba(255, 218, 116, 0.28) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Lollipopz"] #previewModeSkill:not([hidden]) { color: #ffe5ff !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(255, 143, 216, 0.88) !important; border-left: 3px solid rgba(104, 209, 255, 0.98) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 244, 252, 0.58), transparent 46%), linear-gradient(90deg, rgba(61, 150, 218, 0.94), rgba(205, 87, 202, 0.94) 54%, rgba(75, 36, 116, 0.98)) !important; box-shadow: 0 8px 20px rgba(83, 29, 96, 0.28), 0 0 18px rgba(255, 137, 220, 0.24), inset 0 1px 0 rgba(255, 244, 252, 0.42) !important; text-shadow: 0 1px 3px rgba(35, 12, 48, 0.76), 0 0 10px rgba(255, 169, 231, 0.28) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Xiaoyang"] #previewModeSkill:not([hidden]) { color: #e9fbff !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(104, 213, 255, 0.9) !important; border-left: 3px solid rgba(78, 153, 255, 0.98) !important; background: radial-gradient(circle at 18% 0%, rgba(240, 253, 255, 0.62), transparent 46%), linear-gradient(90deg, rgba(55, 104, 210, 0.94), rgba(89, 216, 255, 0.9) 52%, rgba(33, 46, 111, 0.98)) !important; box-shadow: 0 8px 20px rgba(25, 68, 126, 0.28), 0 0 18px rgba(101, 222, 255, 0.24), inset 0 1px 0 rgba(244, 253, 255, 0.42) !important; text-shadow: 0 1px 3px rgba(8, 30, 76, 0.76), 0 0 10px rgba(118, 224, 255, 0.32) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] { --special-mode-title-gradient: linear-gradient(180deg, #ffffff 0%, #dffbff 20%, #80eaff 44%, #416ef2 72%, #f0c46a 100%) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] { --special-mode-title-gradient: linear-gradient(180deg, #ffffff 0%, #ffe0fb 20%, #ff86d7 45%, #8c7cff 72%, #77dfff 100%) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] { --special-mode-title-gradient: linear-gradient(180deg, #fffbe0 0%, #ffe08a 22%, #62d59f 50%, #247c68 74%, #f2b74b 100%) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] :is(#modeDialogName, #modeDialogCharacter, #modeDialogSkill, #modeDialogSkill .skill-inline-text), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] :is(#modeDialogName, #modeDialogCharacter, #modeDialogSkill, #modeDialogSkill .skill-inline-text), html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] :is(#modeDialogName, #modeDialogCharacter, #modeDialogSkill, #modeDialogSkill .skill-inline-text) { background: var(--special-mode-title-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42)) drop-shadow(0 0 10px rgba(116, 220, 255, 0.34)) !important; } /* V1.27Beta-select-polish2: final character-select color and backing pass. */ html body:not(.maintenance-mode) { --class-title-warlock: #8788ee; --class-title-monk: #00ff98; } html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Qizong"], html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Jiego"], html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Iso"] { --character-title-color: var(--class-title-warlock) !important; } html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Saoge"], html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Anai"], html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Duang"] { --character-title-color: var(--class-title-monk) !important; } html body:not(.maintenance-mode) .character-preview[data-character="Qizong"], html body:not(.maintenance-mode) .character-preview[data-character="Jiego"], html body:not(.maintenance-mode) .character-preview[data-character="Iso"] { --preview-title-color: var(--class-title-warlock) !important; } html body:not(.maintenance-mode) .character-preview[data-character="Saoge"], html body:not(.maintenance-mode) .character-preview[data-character="Anai"], html body:not(.maintenance-mode) .character-preview[data-character="Duang"] { --preview-title-color: var(--class-title-monk) !important; } html body:not(.maintenance-mode) .battle-card-inscription[data-character="Qizong"], html body:not(.maintenance-mode) .battle-card-inscription[data-character="Jiego"], html body:not(.maintenance-mode) .battle-card-inscription[data-character="Iso"] { --battle-title-color: var(--class-title-warlock) !important; } html body:not(.maintenance-mode) .battle-card-inscription[data-character="Saoge"], html body:not(.maintenance-mode) .battle-card-inscription[data-character="Anai"], html body:not(.maintenance-mode) .battle-card-inscription[data-character="Duang"] { --battle-title-color: var(--class-title-monk) !important; } html body:not(.maintenance-mode) #characterSelect .character-option .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Rhasta"] .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Lollipopz"] .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Xiaoyang"] .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #characterPreview .preview-skill > #previewSkill.preview-skill-tip { color: #18334b !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(197, 220, 237, 0.9) !important; border-left: 3px solid rgba(76, 141, 185, 0.94) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 243, 252, 0.92)), rgba(241, 249, 255, 0.95) !important; box-shadow: 0 6px 14px rgba(18, 52, 78, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important; } html body:not(.maintenance-mode) #characterSelect .character-option .skill-tip:not(.mode-tip) .skill-inline-text, html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Rhasta"] .skill-tip:not(.mode-tip) .skill-inline-text, html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Lollipopz"] .skill-tip:not(.mode-tip) .skill-inline-text, html body:not(.maintenance-mode) #characterSelect .character-option[data-character="Xiaoyang"] .skill-tip:not(.mode-tip) .skill-inline-text, html body:not(.maintenance-mode) #characterPreview .preview-skill > #previewSkill.preview-skill-tip .skill-inline-text { color: #18334b !important; -webkit-text-fill-color: currentColor !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) { --select-frame-inner-x: clamp(74px, 5.4vw, 108px) !important; --select-frame-inner-y: clamp(128px, 15.8vh, 178px) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { width: min(calc(var(--select-matrix-w) + var(--select-frame-inner-x) * 2), calc(100vw - 8px)) !important; height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 8px)) !important; max-width: calc(100vw - 8px) !important; max-height: calc(100dvh - 8px) !important; padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important; background: var(--character-select-desktop-frame-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::before { content: "" !important; display: block !important; position: absolute !important; inset: clamp(28px, 4.6vh, 52px) clamp(36px, 3.2vw, 62px) !important; z-index: 0 !important; pointer-events: none !important; border-radius: clamp(22px, 3vw, 46px) !important; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0.92) 44%, rgba(238, 248, 255, 0.9) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(236, 247, 255, 0.95)) !important; box-shadow: inset 0 0 0 1px rgba(168, 211, 242, 0.38), inset 0 0 54px rgba(112, 185, 240, 0.2) !important; } }