/* V1.27Beta-codex60 final overrides. Loaded last. */ html body:not(.maintenance-mode) { --character-select-desktop-frame-art: url("assets/ui/character-select-desktop-single-white-frame-codex60.png?v=V1.27Beta-codex60") !important; } /* V1.27Beta-battle-premium2: split the stage art into longhands so Chromium keeps every layer. */ html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { background-color: #050b13 !important; background-image: radial-gradient(circle at 50% 42%, rgba(var(--battle-hot-rgb, 245, 207, 122), 0.18) 0%, transparent 30%), radial-gradient(circle at 16% 28%, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.22) 0%, transparent 34%), radial-gradient(circle at 84% 26%, rgba(255, 142, 214, 0.14) 0%, transparent 32%), linear-gradient(180deg, rgba(5, 10, 18, 0.08) 0%, rgba(4, 7, 12, 0.82) 100%), var(--battle-stage-art) !important; background-position: center center, center center, center center, center center, center center !important; background-size: auto, auto, auto, auto, cover !important; background-repeat: no-repeat !important; } /* V1.27Beta-battle-premium1: generated arena art, profession-tinted stage lighting, and final combat polish. */ html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { --battle-stage-art: url("assets/ui/battle-arena-celestial-duel-v1.png?v=V1.27Beta-battle-premium1"); --battle-energy-art: url("assets/vfx/battle-arcane-energy-screen-v1.png?v=V1.27Beta-battle-premium1"); --battle-accent: #78e9ff; --battle-accent-rgb: 120, 233, 255; --battle-hot: #f5cf7a; --battle-hot-rgb: 245, 207, 122; --battle-panel: rgba(8, 18, 28, 0.68); --battle-panel-strong: rgba(5, 11, 18, 0.82); position: relative !important; isolation: isolate !important; width: min(1180px, calc(100vw - 28px)) !important; margin: 0 auto !important; padding: clamp(14px, 2vw, 28px) clamp(10px, 2vw, 28px) clamp(18px, 2.4vw, 34px) !important; overflow: hidden !important; border: 1px solid rgba(var(--battle-accent-rgb), 0.34) !important; border-radius: 18px !important; background: radial-gradient(circle at 50% 42%, rgba(var(--battle-hot-rgb), 0.18), transparent 30%), radial-gradient(circle at 16% 28%, rgba(var(--battle-accent-rgb), 0.22), transparent 34%), radial-gradient(circle at 84% 26%, rgba(255, 142, 214, 0.14), transparent 32%), linear-gradient(180deg, rgba(5, 10, 18, 0.08), rgba(4, 7, 12, 0.82)), var(--battle-stage-art) center center / cover no-repeat !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -42px 80px rgba(2, 6, 10, 0.48), 0 28px 80px rgba(0, 0, 0, 0.44), 0 0 38px rgba(var(--battle-accent-rgb), 0.16) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]):has(#cards[data-attack-style*="druid"]) { --battle-accent: #7df0a6; --battle-accent-rgb: 125, 240, 166; --battle-hot: #f0d06f; --battle-hot-rgb: 240, 208, 111; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]):has(#cards[data-attack-style*="shaman"]) { --battle-accent: #61d9ff; --battle-accent-rgb: 97, 217, 255; --battle-hot: #ff8c64; --battle-hot-rgb: 255, 140, 100; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]):has(#cards[data-attack-style*="death-knight"]) { --battle-accent: #9bd6ff; --battle-accent-rgb: 155, 214, 255; --battle-hot: #ff5f86; --battle-hot-rgb: 255, 95, 134; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]):has(#cards[data-attack-style*="hunter"]) { --battle-accent: #9df27d; --battle-accent-rgb: 157, 242, 125; --battle-hot: #f2c465; --battle-hot-rgb: 242, 196, 101; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]):has(#cards[data-attack-style*="demon-hunter"]) { --battle-accent: #99ff75; --battle-accent-rgb: 153, 255, 117; --battle-hot: #d66aff; --battle-hot-rgb: 214, 106, 255; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]):has(#cards[data-attack-style*="warlock"]) { --battle-accent: #c58cff; --battle-accent-rgb: 197, 140, 255; --battle-hot: #76f0c4; --battle-hot-rgb: 118, 240, 196; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]):has(#cards[data-attack-style*="rogue"]) { --battle-accent: #80eaff; --battle-accent-rgb: 128, 234, 255; --battle-hot: #ff82c8; --battle-hot-rgb: 255, 130, 200; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]):has(#cards[data-attack-style*="mage"]), html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]):has(#cards[data-attack-style="caster"]) { --battle-accent: #88ccff; --battle-accent-rgb: 136, 204, 255; --battle-hot: #f2a7ff; --battle-hot-rgb: 242, 167, 255; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]):has(#cards[data-attack-style*="paladin"]), html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]):has(#cards[data-attack-style*="priest"]) { --battle-accent: #fff1a3; --battle-accent-rgb: 255, 241, 163; --battle-hot: #8ee7ff; --battle-hot-rgb: 142, 231, 255; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]):has(#cards[data-attack-style*="monk"]) { --battle-accent: #89ffd2; --battle-accent-rgb: 137, 255, 210; --battle-hot: #ffcf7a; --battle-hot-rgb: 255, 207, 122; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]):has(#cards[data-attack-style*="warrior"]) { --battle-accent: #ffbf78; --battle-accent-rgb: 255, 191, 120; --battle-hot: #7ddcff; --battle-hot-rgb: 125, 220, 255; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::before { z-index: 0 !important; background: linear-gradient(90deg, rgba(2, 5, 9, 0.64), transparent 18% 82%, rgba(2, 5, 9, 0.66)), radial-gradient(ellipse at 50% 52%, transparent 0 26%, rgba(2, 5, 9, 0.32) 64%, rgba(2, 5, 9, 0.74) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 20%, rgba(0, 0, 0, 0.34)) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after { z-index: 1 !important; opacity: 0.38 !important; mix-blend-mode: screen !important; background: var(--battle-energy-art) center center / cover no-repeat !important; filter: saturate(1.1) contrast(1.05) !important; animation: battlePremiumEnergyDrift 18s ease-in-out infinite alternate !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) > * { position: relative !important; z-index: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]) .fighters { width: min(1080px, 100%) !important; margin: 0 auto !important; padding: clamp(8px, 1.4vw, 18px) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(58px, 7vw, 88px) minmax(0, 1fr) !important; align-items: stretch !important; gap: clamp(10px, 1.6vw, 18px) !important; border: 1px solid rgba(var(--battle-accent-rgb), 0.2) !important; border-radius: 16px !important; background: linear-gradient(90deg, rgba(var(--battle-accent-rgb), 0.1), transparent 30% 70%, rgba(var(--battle-hot-rgb), 0.1)), linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), rgba(4, 10, 16, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 44px rgba(0, 0, 0, 0.24) !important; -webkit-backdrop-filter: blur(10px) saturate(1.15) !important; backdrop-filter: blur(10px) saturate(1.15) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .combatant { position: relative !important; min-width: 0 !important; padding: clamp(8px, 1vw, 12px) !important; border: 1px solid rgba(var(--battle-accent-rgb), 0.24) !important; border-radius: 14px !important; background: radial-gradient(circle at 50% 0%, rgba(var(--battle-accent-rgb), 0.16), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1)), rgba(5, 12, 19, 0.44) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 26px rgba(var(--battle-accent-rgb), 0.07), 0 14px 34px rgba(0, 0, 0, 0.24) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .you-combatant { --combatant-side-accent: var(--battle-accent); --combatant-side-rgb: var(--battle-accent-rgb); } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .opponent-combatant { --combatant-side-accent: var(--battle-hot); --combatant-side-rgb: var(--battle-hot-rgb); } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .combatant::before { content: "" !important; position: absolute !important; inset: 6px !important; z-index: 0 !important; pointer-events: none !important; border-radius: 10px !important; border: 1px solid rgba(var(--combatant-side-rgb), 0.3) !important; box-shadow: inset 0 0 22px rgba(var(--combatant-side-rgb), 0.1) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .combatant > * { position: relative !important; z-index: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter-panel { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.28)) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter { transform: translateZ(0) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter-head, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter-panel, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .meter-row, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .energy, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fatigue, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .laziness, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .choice, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .equipment-slot { border-color: rgba(var(--battle-accent-rgb), 0.3) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)), linear-gradient(135deg, rgba(var(--battle-accent-rgb), 0.09), rgba(var(--battle-hot-rgb), 0.05)), var(--battle-panel) !important; color: #ecfbff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.56) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 18px rgba(var(--battle-accent-rgb), 0.07), 0 8px 18px rgba(0, 0, 0, 0.16) !important; -webkit-backdrop-filter: blur(8px) saturate(1.12) !important; backdrop-filter: blur(8px) saturate(1.12) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter-head { border-radius: 8px !important; padding: 7px 9px !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter-head strong, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter-side, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card b, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .inline-skill-action, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .inline-skill-name { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72), 0 0 12px rgba(var(--battle-accent-rgb), 0.42) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .character-face { gap: clamp(8px, 1vw, 12px) !important; align-items: stretch !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .avatar { border: 1px solid rgba(var(--combatant-side-rgb, var(--battle-accent-rgb)), 0.42) !important; border-radius: 12px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -18px 30px rgba(0, 0, 0, 0.18), 0 0 22px rgba(var(--combatant-side-rgb, var(--battle-accent-rgb)), 0.22), 0 12px 26px rgba(0, 0, 0, 0.28) !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card { border-radius: 10px !important; padding: clamp(8px, 1vw, 11px) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card span, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .choice { color: rgba(236, 251, 255, 0.86) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .meter { height: 10px !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.16)), rgba(1, 5, 9, 0.68) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.46), 0 0 12px rgba(var(--battle-accent-rgb), 0.14) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .meter > i { border-radius: inherit !important; background: linear-gradient(90deg, #ff6b7a, #ffd27d 42%, #8fffc6) !important; box-shadow: 0 0 14px rgba(255, 210, 125, 0.32) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .stat-marks i { border-radius: 3px !important; background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.12) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .energy .stat-marks i.filled { background: linear-gradient(180deg, #fff3a2, #ffc65a 62%, #c77c22) !important; box-shadow: 0 0 10px rgba(255, 205, 84, 0.44) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fatigue .stat-marks i.filled { background: linear-gradient(180deg, #ff9c98, #e84e58 62%, #8d1e31) !important; box-shadow: 0 0 10px rgba(255, 84, 96, 0.36) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .laziness .stat-marks i.filled { background: linear-gradient(180deg, #f4d092, #b9853a 62%, #65411e) !important; box-shadow: 0 0 10px rgba(236, 184, 91, 0.3) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .versus { align-self: center !important; justify-self: center !important; width: clamp(54px, 6.2vw, 82px) !important; height: clamp(54px, 6.2vw, 82px) !important; display: grid !important; place-items: center !important; border: 1px solid rgba(var(--battle-hot-rgb), 0.46) !important; border-radius: 50% !important; color: #fff8d8 !important; background: radial-gradient(circle, rgba(var(--battle-hot-rgb), 0.28), transparent 56%), radial-gradient(circle, rgba(var(--battle-accent-rgb), 0.16), rgba(4, 9, 14, 0.72) 68%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 26px rgba(var(--battle-hot-rgb), 0.28), 0 0 44px rgba(var(--battle-accent-rgb), 0.2) !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.76), 0 0 14px rgba(var(--battle-hot-rgb), 0.68) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards { width: min(780px, 100%) !important; margin: clamp(10px, 1.6vw, 18px) auto 0 !important; padding: clamp(7px, 1vw, 10px) !important; gap: clamp(7px, 1vw, 12px) !important; border: 1px solid rgba(var(--battle-accent-rgb), 0.28) !important; border-radius: 14px !important; background: linear-gradient(90deg, rgba(var(--battle-accent-rgb), 0.08), rgba(var(--battle-hot-rgb), 0.06)), rgba(4, 9, 14, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 36px rgba(0, 0, 0, 0.24), 0 0 24px rgba(var(--battle-accent-rgb), 0.1) !important; -webkit-backdrop-filter: blur(10px) saturate(1.12) !important; backdrop-filter: blur(10px) saturate(1.12) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card { transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease !important; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 12px rgba(var(--battle-accent-rgb), 0.16)) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card:hover:not(:disabled), html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card:focus-visible:not(:disabled) { transform: translateY(-3px) scale(1.02) !important; filter: brightness(1.1) saturate(1.08) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 18px rgba(var(--battle-accent-rgb), 0.32)) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .battle-libraries, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .utility { width: min(780px, 100%) !important; margin-left: auto !important; margin-right: auto !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .battle-libraries .library-action, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .utility button { border: 1px solid rgba(var(--battle-accent-rgb), 0.36) !important; border-radius: 10px !important; color: #effcff !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)), linear-gradient(135deg, rgba(var(--battle-accent-rgb), 0.16), rgba(var(--battle-hot-rgb), 0.1)), rgba(6, 13, 21, 0.66) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 22px rgba(0, 0, 0, 0.18) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.58) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .battle-libraries .library-action:hover:not(:disabled), html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .utility button:hover:not(:disabled) { border-color: rgba(var(--battle-hot-rgb), 0.62) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 26px rgba(0, 0, 0, 0.22), 0 0 18px rgba(var(--battle-hot-rgb), 0.18) !important; filter: brightness(1.08) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #sidePanel.side section { border: 1px solid rgba(var(--battle-accent-rgb, 120, 233, 255), 0.26) !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03)), rgba(4, 10, 16, 0.68) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 36px rgba(0, 0, 0, 0.24) !important; -webkit-backdrop-filter: blur(10px) saturate(1.1) !important; backdrop-filter: blur(10px) saturate(1.1) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #sidePanel.side .battle-status, html body:not(.maintenance-mode) #appRoot.app.battle-app #sidePanel.side .log article { border-color: rgba(var(--battle-accent-rgb, 120, 233, 255), 0.26) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)), rgba(6, 14, 22, 0.58) !important; } @keyframes battlePremiumEnergyDrift { 0% { transform: translate3d(-1.5%, -1%, 0) scale(1.02); opacity: 0.3; } 50% { opacity: 0.42; } 100% { transform: translate3d(1.5%, 1%, 0) scale(1.05); opacity: 0.36; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { width: 100% !important; padding: 8px 6px 112px !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; background-position: center top !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]) .fighters { width: 100% !important; padding: 7px !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; border-radius: 12px !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .combatant { padding: 7px !important; border-radius: 12px !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .versus { width: 48px !important; height: 48px !important; font-size: 13px !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards { width: 100% !important; padding: 6px !important; gap: 5px !important; border-radius: 10px !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card:hover:not(:disabled), html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card:focus-visible:not(:disabled) { transform: translateY(-1px) scale(1.01) !important; } } @media (prefers-reduced-motion: reduce) { html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after { animation: none !important; } } /* V1.27Beta-mobile-defend-aspect1: hard-lock mobile 1v1 action buttons to the 1280x720 panel ratio. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards { --mobile-action-gap: clamp(4px, 1.45vw, 6px) !important; width: 100% !important; max-width: 100% !important; min-height: clamp(48px, calc((100vw - 34px) * 0.1875), 74px) !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: clamp(48px, calc((100vw - 34px) * 0.1875), 74px) !important; align-items: center !important; justify-items: stretch !important; gap: var(--mobile-action-gap) !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.attack, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.defend, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.charge { width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 16 / 9 !important; align-self: center !important; justify-self: stretch !important; padding: 0 !important; display: block !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; background-position: center center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.attack { background: var(--action-attack-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.defend { background: var(--action-defend-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.charge { background: var(--action-charge-panel-art) center center / 100% 100% no-repeat !important; } } /* V1.27Beta-mobile-battle-polish1: final phone 1v1 cleanup for action-panel ratio and stray skill/status backplates. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards { width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: clamp(48px, calc((100vw - 34px) * 0.1875), 74px) !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: clamp(48px, calc((100vw - 34px) * 0.1875), 74px) !important; align-items: center !important; justify-items: stretch !important; gap: clamp(4px, 1.45vw, 6px) !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card { position: relative !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 16 / 9 !important; align-self: center !important; justify-self: stretch !important; padding: 0 !important; display: block !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-position: center center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.attack { background: var(--action-attack-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.defend { background: var(--action-defend-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.charge { background: var(--action-charge-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card span { left: 34.921875% !important; top: 22.916667% !important; width: 64.6875% !important; height: 48.333333% !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .skill-label, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-action, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-name { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .skill-label::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .skill-label::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-action::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-action::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-name::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-name::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .status-bar, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-bar { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-token { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-token::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-token::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-bar::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-bar::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; } } /* V1.27Beta-battle-premium1-tail: true final combat surface after legacy mobile rules. */ html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { --battle-stage-art: url("assets/ui/battle-arena-celestial-duel-v1.png?v=V1.27Beta-battle-premium1"); --battle-energy-art: url("assets/vfx/battle-arcane-energy-screen-v1.png?v=V1.27Beta-battle-premium1"); position: relative !important; isolation: isolate !important; overflow: hidden !important; border: 1px solid rgba(var(--battle-accent-rgb, 120, 233, 255), 0.34) !important; border-radius: 18px !important; background: radial-gradient(circle at 50% 42%, rgba(var(--battle-hot-rgb, 245, 207, 122), 0.18), transparent 30%), radial-gradient(circle at 16% 28%, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.22), transparent 34%), radial-gradient(circle at 84% 26%, rgba(255, 142, 214, 0.14), transparent 32%), linear-gradient(180deg, rgba(5, 10, 18, 0.08), rgba(4, 7, 12, 0.82)), var(--battle-stage-art) center center / cover no-repeat !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -42px 80px rgba(2, 6, 10, 0.48), 0 28px 80px rgba(0, 0, 0, 0.44), 0 0 38px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.16) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::before { z-index: 0 !important; background: linear-gradient(90deg, rgba(2, 5, 9, 0.64), transparent 18% 82%, rgba(2, 5, 9, 0.66)), radial-gradient(ellipse at 50% 52%, transparent 0 26%, rgba(2, 5, 9, 0.32) 64%, rgba(2, 5, 9, 0.74) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 20%, rgba(0, 0, 0, 0.34)) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after { z-index: 1 !important; opacity: 0.38 !important; mix-blend-mode: screen !important; background: var(--battle-energy-art) center center / cover no-repeat !important; filter: saturate(1.1) contrast(1.05) !important; animation: battlePremiumEnergyDrift 18s ease-in-out infinite alternate !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) > * { position: relative !important; z-index: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]) .fighters { width: min(1080px, 100%) !important; margin: 0 auto !important; padding: clamp(8px, 1.4vw, 18px) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(58px, 7vw, 88px) minmax(0, 1fr) !important; align-items: stretch !important; gap: clamp(10px, 1.6vw, 18px) !important; border: 1px solid rgba(var(--battle-accent-rgb, 120, 233, 255), 0.2) !important; border-radius: 16px !important; background: linear-gradient(90deg, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.1), transparent 30% 70%, rgba(var(--battle-hot-rgb, 245, 207, 122), 0.1)), linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), rgba(4, 10, 16, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 44px rgba(0, 0, 0, 0.24) !important; -webkit-backdrop-filter: blur(10px) saturate(1.15) !important; backdrop-filter: blur(10px) saturate(1.15) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .combatant { position: relative !important; min-width: 0 !important; padding: clamp(8px, 1vw, 12px) !important; border: 1px solid rgba(var(--battle-accent-rgb, 120, 233, 255), 0.24) !important; border-radius: 14px !important; background: radial-gradient(circle at 50% 0%, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.16), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1)), rgba(5, 12, 19, 0.44) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 26px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.07), 0 14px 34px rgba(0, 0, 0, 0.24) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter-head, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter-panel, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .meter-row, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .energy, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fatigue, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .laziness, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .choice, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .equipment-slot { border-color: rgba(var(--battle-accent-rgb, 120, 233, 255), 0.3) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)), linear-gradient(135deg, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.09), rgba(var(--battle-hot-rgb, 245, 207, 122), 0.05)), rgba(8, 18, 28, 0.68) !important; color: #ecfbff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.56) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 18px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.07), 0 8px 18px rgba(0, 0, 0, 0.16) !important; -webkit-backdrop-filter: blur(8px) saturate(1.12) !important; backdrop-filter: blur(8px) saturate(1.12) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .avatar { border: 1px solid rgba(var(--battle-accent-rgb, 120, 233, 255), 0.42) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -18px 30px rgba(0, 0, 0, 0.18), 0 0 22px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.22), 0 12px 26px rgba(0, 0, 0, 0.28) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .meter > i { border-radius: inherit !important; background: linear-gradient(90deg, #ff6b7a, #ffd27d 42%, #8fffc6) !important; box-shadow: 0 0 14px rgba(255, 210, 125, 0.32) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .versus { align-self: center !important; justify-self: center !important; width: clamp(54px, 6.2vw, 82px) !important; height: clamp(54px, 6.2vw, 82px) !important; display: grid !important; place-items: center !important; border: 1px solid rgba(var(--battle-hot-rgb, 245, 207, 122), 0.46) !important; border-radius: 50% !important; color: #fff8d8 !important; background: radial-gradient(circle, rgba(var(--battle-hot-rgb, 245, 207, 122), 0.28), transparent 56%), radial-gradient(circle, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.16), rgba(4, 9, 14, 0.72) 68%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 26px rgba(var(--battle-hot-rgb, 245, 207, 122), 0.28), 0 0 44px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.2) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards { width: min(780px, 100%) !important; margin: clamp(10px, 1.6vw, 18px) auto 0 !important; padding: clamp(7px, 1vw, 10px) !important; gap: clamp(7px, 1vw, 12px) !important; border: 1px solid rgba(var(--battle-accent-rgb, 120, 233, 255), 0.28) !important; border-radius: 14px !important; background: linear-gradient(90deg, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.08), rgba(var(--battle-hot-rgb, 245, 207, 122), 0.06)), rgba(4, 9, 14, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 36px rgba(0, 0, 0, 0.24), 0 0 24px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.1) !important; -webkit-backdrop-filter: blur(10px) saturate(1.12) !important; backdrop-filter: blur(10px) saturate(1.12) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card { transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease !important; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 12px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.16)) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card:hover:not(:disabled), html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card:focus-visible:not(:disabled) { transform: translateY(-3px) scale(1.02) !important; filter: brightness(1.1) saturate(1.08) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 18px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.32)) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #sidePanel.side section { border: 1px solid rgba(var(--battle-accent-rgb, 120, 233, 255), 0.26) !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03)), rgba(4, 10, 16, 0.68) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 36px rgba(0, 0, 0, 0.24) !important; -webkit-backdrop-filter: blur(10px) saturate(1.1) !important; backdrop-filter: blur(10px) saturate(1.1) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { width: 100% !important; padding: 8px 6px 112px !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; background-position: center top !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]) .fighters { width: 100% !important; padding: 7px !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; border-radius: 12px !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .versus { width: 48px !important; height: 48px !important; font-size: 13px !important; } } /* V1.27Beta-battle-premium2-eof: stable layered arena art after all battle overrides. */ html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { background-color: #050b13 !important; background-image: radial-gradient(circle at 50% 42%, rgba(var(--battle-hot-rgb, 245, 207, 122), 0.18) 0%, transparent 30%), radial-gradient(circle at 16% 28%, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.22) 0%, transparent 34%), radial-gradient(circle at 84% 26%, rgba(255, 142, 214, 0.14) 0%, transparent 32%), linear-gradient(180deg, rgba(5, 10, 18, 0.08) 0%, rgba(4, 7, 12, 0.82) 100%), var(--battle-stage-art) !important; background-position: center center, center center, center center, center center, center center !important; background-size: auto, auto, auto, auto, cover !important; background-repeat: no-repeat !important; } /* V1.27Beta-result-like-magic1: use Lollipopz's white-pink magic assassin form in the settlement card. */ html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultLikeCard.result-like-card .result-like-character { overflow: hidden !important; background-color: transparent !important; background: url("assets/characters/lollipopz-chibi-result-magic-assassin-clean-v1.png?v=V1.27Beta-lollipopz-result-clean1") center / cover no-repeat, radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.24), transparent 46%), linear-gradient(135deg, rgba(255, 231, 248, 0.96), rgba(174, 226, 255, 0.86) 52%, rgba(255, 245, 225, 0.92)) !important; } /* V1.27Beta-result-like-button1: keep the settlement like button as a compact icon counter, not a generic menu button. */ html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultLikeButton.result-like-button { min-width: 76px !important; width: auto !important; height: 54px !important; min-height: 54px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; border: 1px solid rgba(130, 232, 255, 0.58) !important; border-radius: 16px !important; clip-path: none !important; color: #fffbe8 !important; background: linear-gradient(180deg, rgba(82, 220, 255, 0.96), rgba(38, 116, 222, 0.92) 48%, rgba(27, 55, 132, 0.98)) !important; background-clip: padding-box !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42), inset 0 -3px 8px rgba(14, 38, 98, 0.24), 0 10px 24px rgba(36, 149, 255, 0.2) !important; overflow: hidden !important; text-shadow: none !important; filter: none !important; cursor: pointer !important; } html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultLikeButton.result-like-button span { width: 32px !important; height: 32px !important; min-width: 32px !important; flex: 0 0 32px !important; padding: 0 !important; overflow: hidden !important; color: transparent !important; -webkit-text-fill-color: transparent !important; font-size: 0 !important; line-height: 1 !important; letter-spacing: 0 !important; border-radius: 999px !important; background: url("assets/ui/like-thumb-fantasy-clean-v1.png?v=V1.27Beta-like-icon-clean1") center / contain no-repeat !important; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.36)) !important; text-shadow: none !important; } html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultLikeButton.result-like-button strong { color: #fffbe8 !important; -webkit-text-fill-color: #fffbe8 !important; font-size: 18px !important; line-height: 1 !important; font-weight: 1000 !important; letter-spacing: 0 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultLikeButton.result-like-button:hover:not(:disabled), html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultLikeButton.result-like-button:focus-visible:not(:disabled) { transform: translateY(-1px) !important; color: #fffbe8 !important; filter: brightness(1.08) !important; } html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultLikeButton.result-like-button:disabled { cursor: default !important; opacity: 0.74 !important; } html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultLikeButton.result-like-button.liked { border-color: rgba(255, 220, 128, 0.72) !important; background: linear-gradient(180deg, rgba(255, 228, 132, 0.98), rgba(232, 148, 50, 0.94) 50%, rgba(134, 68, 28, 0.98)) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.46), inset 0 -3px 8px rgba(118, 56, 24, 0.2), 0 10px 24px rgba(246, 200, 95, 0.2) !important; } /* V1.27Beta-result-like-copy-small1: keep the final like prompt lighter than the result title. */ html body:not(.maintenance-mode) #resultOverlay.result-overlay #resultLikeCard.result-like-card .result-like-copy b { font-size: 14px !important; line-height: 1.16 !important; } 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]) { z-index: 2147480000 !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(50px, 4.6vw, 68px) !important; --select-frame-inner-y: clamp(58px, 8.2vh, 76px) !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 - 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; margin: 0 !important; transform: translate(-50%, -50%) !important; display: grid !important; place-items: center !important; overflow: visible !important; isolation: isolate !important; background: var(--character-select-desktop-frame-art) center center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 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; scrollbar-width: none !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; height: var(--select-matrix-h) !important; max-height: var(--select-matrix-h) !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 auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll::-webkit-scrollbar { width: 0 !important; height: 0 !important; } } /* V1.27Beta-modebadge-final: keep special-mode badges in the established cut badge style, without inherited rounded inner frames. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip.enabled, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em > .mode-tip { box-sizing: border-box !important; width: fit-content !important; inline-size: fit-content !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: min(112px, 100%) !important; max-inline-size: min(112px, 100%) !important; height: 23px !important; min-height: 23px !important; max-height: 23px !important; padding: 0 0 1px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; text-indent: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip > .skill-inline-text { display: inline-block !important; position: static !important; inset: auto !important; width: auto !important; inline-size: auto !important; height: auto !important; block-size: auto !important; aspect-ratio: auto !important; min-width: 0 !important; min-inline-size: 0 !important; min-height: 0 !important; min-block-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; max-height: none !important; max-block-size: none !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; text-indent: 0 !important; line-height: 1 !important; font-size: inherit !important; font-weight: inherit !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; writing-mode: horizontal-tb !important; transform: none !important; translate: none !important; rotate: none !important; scale: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip::after, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden])::after, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden])::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden]) { isolation: auto !important; overflow: hidden !important; border-radius: 0 !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip.enabled, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em > .mode-tip { max-width: min(100px, 100%) !important; max-inline-size: min(100px, 100%) !important; height: clamp(20px, 5.6vw, 23px) !important; min-height: clamp(20px, 5.6vw, 23px) !important; max-height: clamp(20px, 5.6vw, 23px) !important; padding: 0 0 1px !important; } } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select > .status-line, html body:not(.maintenance-mode) #characterSelect.character-select > .status-line, html body:not(.maintenance-mode) #characterSelect .status-line, html body:not(.maintenance-mode) > .status-line.character-select-status-portal, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] { position: fixed !important; top: clamp(10px, 1.8vh, 18px) !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 2147483000 !important; opacity: 1 !important; filter: none !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select.preview-open > .status-line, html body:not(.maintenance-mode) #characterSelect.character-select.preview-open > .status-line, html body:not(.maintenance-mode) #characterSelect.preview-open .status-line, html body:not(.maintenance-mode) > .status-line.character-select-status-portal, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] { position: fixed !important; top: clamp(10px, 1.8vh, 18px) !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 2147483000 !important; opacity: 1 !important; filter: none !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog { z-index: 2147482000 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select #modeDialog.mode-dialog[data-mode], html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"], html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"], html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] { z-index: 2147481000 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select #modeDialog.mode-dialog[data-mode="storm"]:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select #modeDialog.mode-dialog[data-mode="magic-assassin"]:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select #modeDialog.mode-dialog[data-mode="devour-world"]:not([hidden]), 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]) { z-index: 2147481000 !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions button, 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, html body:not(.maintenance-mode) #roomLobby .room-seat-action, html body:not(.maintenance-mode) #characterSelect .status-line #leaveCharacterSelect, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #leaveCharacterSelect, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #leaveCharacterSelect { min-height: clamp(40px, 5.1vh, 48px) !important; height: clamp(40px, 5.1vh, 48px) !important; padding: clamp(9px, 1.35vh, 12px) clamp(24px, 2.8vw, 34px) !important; display: inline-grid !important; place-items: center !important; line-height: 1.05 !important; white-space: nowrap !important; text-align: center !important; background-size: 100% 100% !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions #startGame { min-width: clamp(178px, 15vw, 232px) !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions :is(#copyRoomLobby, #refreshRoomLobby, #showRulesRoomLobby, #leaveRoomLobby) { min-width: clamp(148px, 12vw, 190px) !important; } html body:not(.maintenance-mode) #appRoot.app #roomLobby.room-lobby .room-lobby-actions > button#startGame, html body:not(.maintenance-mode) #appRoot.app #roomLobby.room-lobby .room-lobby-actions > button#copyRoomLobby, html body:not(.maintenance-mode) #appRoot.app #roomLobby.room-lobby .room-lobby-actions > button#refreshRoomLobby, html body:not(.maintenance-mode) #appRoot.app #roomLobby.room-lobby .room-lobby-actions > button#showRulesRoomLobby, html body:not(.maintenance-mode) #appRoot.app #roomLobby.room-lobby .room-lobby-actions > button#leaveRoomLobby { height: clamp(46px, 5.6vh, 52px) !important; min-height: clamp(46px, 5.6vh, 52px) !important; padding: clamp(11px, 1.45vh, 14px) clamp(25px, 2.9vw, 36px) clamp(12px, 1.55vh, 15px) !important; display: inline-grid !important; place-items: center !important; line-height: 1 !important; text-align: center !important; background-size: 100% 100% !important; } html body:not(.maintenance-mode) #appRoot.app #roomLobby.room-lobby .room-lobby-actions > button#startGame { width: auto !important; min-width: clamp(174px, 14.6vw, 228px) !important; } html body:not(.maintenance-mode) #appRoot.app #roomLobby.room-lobby .room-lobby-actions > button#copyRoomLobby, html body:not(.maintenance-mode) #appRoot.app #roomLobby.room-lobby .room-lobby-actions > button#refreshRoomLobby, html body:not(.maintenance-mode) #appRoot.app #roomLobby.room-lobby .room-lobby-actions > button#showRulesRoomLobby, html body:not(.maintenance-mode) #appRoot.app #roomLobby.room-lobby .room-lobby-actions > button#leaveRoomLobby { width: auto !important; min-width: clamp(150px, 12.4vw, 194px) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-copy { grid-template-rows: auto auto auto minmax(86px, auto) minmax(64px, 1fr) auto auto !important; gap: clamp(7px, 1vh, 11px) !important; align-content: start !important; color: #ffffff !important; -webkit-text-fill-color: currentColor !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogName { margin: 0 0 clamp(2px, 0.45vh, 5px) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogCharacter { margin: 0 0 clamp(9px, 1.25vh, 14px) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogSkill { min-height: clamp(34px, 4.1vh, 40px) !important; padding: 5px 12px 6px 9px !important; gap: 7px !important; margin: 0 0 clamp(8px, 1.1vh, 12px) !important; font-size: clamp(16px, 1.45vw, 21px) !important; line-height: 1.05 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog #modeDialogSkill .skill-inline-icon { width: clamp(26px, 2.15vw, 34px) !important; height: clamp(26px, 2.15vw, 34px) !important; flex: 0 0 auto !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog #modeDialogSkill .skill-inline-text { line-height: 1.05 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogDescription { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: clamp(15px, 1.28vw, 19px) !important; line-height: 1.54 !important; font-weight: 820 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-story { margin: clamp(5px, 0.72vh, 8px) 0 0 !important; color: var(--special-mode-story-color, rgba(202, 209, 220, 0.82)) !important; -webkit-text-fill-color: var(--special-mode-story-color, rgba(202, 209, 220, 0.82)) !important; font-size: clamp(12px, 0.98vw, 15px) !important; line-height: 1.5 !important; font-weight: 560 !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-copy { height: clamp(214px, 27dvh, 232px) !important; max-height: clamp(214px, 27dvh, 232px) !important; grid-template-rows: auto auto auto minmax(58px, auto) minmax(0, 1fr) auto !important; gap: 5px !important; padding: 10px 12px !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogSkill { min-height: 34px !important; padding: 5px 11px 6px 8px !important; gap: 7px !important; font-size: clamp(15px, 3.85vw, 18px) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog #modeDialogSkill .skill-inline-icon { width: clamp(25px, 6.4vw, 31px) !important; height: clamp(25px, 6.4vw, 31px) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogDescription { max-height: 72px !important; font-size: clamp(12.5px, 3.25vw, 15px) !important; line-height: 1.42 !important; overflow-y: auto !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-story { display: block !important; max-height: 54px !important; margin-top: 5px !important; transform: none !important; overflow: hidden !important; font-size: clamp(11px, 2.75vw, 13px) !important; line-height: 1.35 !important; } html body:not(.maintenance-mode) #roomLobby .room-lobby-actions button, 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 { min-height: 42px !important; height: 42px !important; padding: 10px 24px !important; } } /* V1.27Beta-codex64 mobile/desktop final guard: safe edges, single select frame, and reused mode badges. */ @media (max-width: 720px) { html body:not(.maintenance-mode):has(#appRoot[hidden]) > .status-line.character-select-status-portal, html body:not(.maintenance-mode):has(#appRoot[hidden]) > .status-line[data-character-select-portal="true"] { display: none !important; pointer-events: none !important; } html body:not(.maintenance-mode) .enter-gate, html body:not(.maintenance-mode) .enter-gate:hover, html body:not(.maintenance-mode) .enter-gate:focus-visible, html body:not(.maintenance-mode) .enter-gate:active { left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; justify-self: center !important; align-self: center !important; transform: translateY(-1vh) !important; margin-left: auto !important; margin-right: 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), 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, 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; overflow-x: hidden !important; box-sizing: border-box !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 { --home-mobile-edge-safe: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)) !important; padding-left: var(--home-mobile-edge-safe) !important; padding-right: var(--home-mobile-edge-safe) !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, 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: min(540px, calc(100vw - 44px)) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; overflow: visible !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, 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, 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: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !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 { gap: clamp(8px, 2.4vw, 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) .mode-select button { max-width: 100% !important; min-width: 0 !important; padding: 12px !important; transform: none !important; box-sizing: border-box !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 { gap: clamp(6px, 2vw, 10px) !important; overflow: visible !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 > #createBotRoom, 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 > #showRules, 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 > #showGameCodex { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 8px !important; box-sizing: border-box !important; transform: none !important; filter: drop-shadow(0 7px 11px rgba(4, 19, 34, 0.2)) !important; } 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-phone-status-h: 54px !important; --select-phone-frame-x: max(9px, env(safe-area-inset-left), env(safe-area-inset-right)) !important; --select-phone-frame-top: calc(var(--select-phone-status-h) + 9px) !important; --select-phone-frame-bottom: max(9px, env(safe-area-inset-bottom)) !important; --select-phone-card-gap-x: 9px !important; --select-phone-card-gap-y: 10px !important; --select-phone-card-h: clamp(224px, 27.7dvh, 258px) !important; --select-phone-card-w: calc(var(--select-phone-card-h) * 5 / 7) !important; --select-phone-frame-pad-x: clamp(24px, 6.1vw, 29px) !important; --select-phone-frame-pad-top: clamp(48px, 5.8dvh, 58px) !important; --select-phone-frame-pad-bottom: clamp(58px, 7.2dvh, 72px) !important; position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; padding: 0 !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .status-line, html body:not(.maintenance-mode) > .status-line.character-select-status-portal, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] { position: fixed !important; top: max(8px, env(safe-area-inset-top)) !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 2147483000 !important; width: min(398px, calc(100vw - 24px)) !important; height: var(--select-phone-status-h) !important; min-height: 0 !important; padding: 7px 9px !important; display: grid !important; grid-template-columns: minmax(54px, 0.72fr) minmax(0, 1.54fr) minmax(76px, 0.84fr) !important; grid-template-areas: "room status leave" !important; align-items: center !important; justify-items: center !important; column-gap: 7px !important; border: 0 !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(244, 250, 255, 0.9), rgba(196, 225, 245, 0.82) 58%, rgba(158, 204, 232, 0.78)), rgba(234, 247, 255, 0.86) !important; box-shadow: 0 8px 18px rgba(17, 59, 93, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important; overflow: hidden !important; color: #17334d !important; -webkit-text-fill-color: currentColor !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .status-line span, html body:not(.maintenance-mode) > .status-line.character-select-status-portal span, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] span { grid-area: room !important; justify-self: start !important; max-width: 100% !important; min-width: 0 !important; font-size: 9px !important; line-height: 1 !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: rgba(31, 59, 80, 0.88) !important; -webkit-text-fill-color: currentColor !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .status-line strong, html body:not(.maintenance-mode) > .status-line.character-select-status-portal strong, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] strong { grid-area: status !important; justify-self: center !important; max-width: 100% !important; min-width: 0 !important; font-size: clamp(13px, 3.55vw, 16px) !important; line-height: 1.06 !important; text-align: center !important; white-space: normal !important; color: #163653 !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .status-line #leaveCharacterSelect, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #leaveCharacterSelect, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #leaveCharacterSelect { grid-area: leave !important; justify-self: end !important; width: 76px !important; min-width: 76px !important; max-width: 76px !important; height: 34px !important; min-height: 34px !important; padding: 7px 9px !important; display: inline-grid !important; place-items: center !important; font-size: 12px !important; line-height: 1 !important; white-space: nowrap !important; background-size: 100% 100% !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { position: fixed !important; left: var(--select-phone-frame-x) !important; right: var(--select-phone-frame-x) !important; top: var(--select-phone-frame-top) !important; bottom: var(--select-phone-frame-bottom) !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: var(--select-phone-frame-pad-top) var(--select-phone-frame-pad-x) var(--select-phone-frame-pad-bottom) !important; display: grid !important; place-items: center !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: visible !important; isolation: isolate !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: calc(var(--select-phone-card-w) * 2 + var(--select-phone-card-gap-x)) !important; max-width: 100% !important; height: min(calc(var(--select-phone-card-h) * 2 + var(--select-phone-card-gap-y)), 100%) !important; max-height: 100% !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: none !important; scrollbar-gutter: auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll::-webkit-scrollbar { width: 0 !important; height: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { width: calc(var(--select-phone-card-w) * 2 + var(--select-phone-card-gap-x)) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, var(--select-phone-card-w)) !important; grid-auto-rows: var(--select-phone-card-h) !important; gap: var(--select-phone-card-gap-y) var(--select-phone-card-gap-x) !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: var(--select-phone-card-w) !important; min-width: var(--select-phone-card-w) !important; max-width: var(--select-phone-card-w) !important; height: var(--select-phone-card-h) !important; min-height: var(--select-phone-card-h) !important; max-height: var(--select-phone-card-h) !important; margin: 0 !important; padding: 0 !important; transform: none !important; overflow: visible !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; display: grid !important; overflow: hidden !important; border-radius: 8px !important; background: rgba(8, 21, 34, 0.82) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option span::before { z-index: 6 !important; inset: calc(clamp(14px, 3.2vw, 18px) * -1) calc(clamp(10px, 2.4vw, 13px) * -1) !important; background-size: 100% 100% !important; filter: drop-shadow(0 0 5px rgba(76, 188, 255, 0.24)) drop-shadow(0 0 9px rgba(229, 194, 104, 0.16)) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option span::after { z-index: 2 !important; inset: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option .mini-art { z-index: 1 !important; inset: 0 !important; border-radius: 8px !important; background-position: center top !important; background-size: cover !important; clip-path: inset(0 round 8px) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option .card-inscription, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option em { z-index: 8 !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.35vw, 96px) !important; --select-frame-inner-y: clamp(96px, 11.4vh, 132px) !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 { width: min(calc(var(--select-matrix-w) + var(--select-frame-inner-x) * 2), calc(100vw - 4px)) !important; height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 4px)) !important; max-width: calc(100vw - 4px) !important; max-height: calc(100dvh - 4px) !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; overflow: visible !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 { 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; overflow-x: hidden !important; overflow-y: auto !important; background: transparent !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; height: var(--select-matrix-h) !important; max-height: var(--select-matrix-h) !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]) { width: fit-content !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !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; border-radius: 0 !important; clip-path: none !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 #characterSelect .character-option .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]) { width: fit-content !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 3px 8px 4px 7px !important; display: inline-grid !important; place-items: center !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; border-radius: 0 !important; clip-path: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]) { padding: 3px 6px !important; font-size: clamp(10px, 2.55vw, 12px) !important; line-height: 1.05 !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]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip { 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]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip { 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]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip { 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; } /* V1.27Beta-codex65: keep the special-mode lock button physically centered on hover. */ html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeLockCharacter.mode-lock, html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeLockCharacter.mode-lock:hover, html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeLockCharacter.mode-lock:focus-visible, html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeLockCharacter.mode-lock:active { left: 50% !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; transform: translateX(-50%) !important; } /* V1.27Beta-codex65: select cards use one outer frame, while art is clipped by the straight card edge. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option { box-sizing: border-box !important; padding: var(--select-card-frame-y, var(--select-frame-outset-y)) var(--select-card-frame-x, var(--select-frame-outset-x)) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option span { position: relative !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; display: grid !important; align-content: end !important; isolation: isolate !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option span::before { content: "" !important; position: absolute !important; inset: calc(var(--select-card-frame-y, var(--select-frame-outset-y)) * -1) calc(var(--select-card-frame-x, var(--select-frame-outset-x)) * -1) !important; z-index: 8 !important; display: block !important; opacity: 1 !important; pointer-events: none !important; background: var(--arcane-card-frame) center center / 100% 100% no-repeat !important; filter: drop-shadow(0 0 6px rgba(80, 194, 255, 0.28)) drop-shadow(0 0 10px rgba(229, 194, 104, 0.18)) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option span::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; display: block !important; pointer-events: none !important; border-radius: var(--select-card-straight-radius, 8px) !important; clip-path: inset(0 round var(--select-card-straight-radius, 8px)) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 24%, rgba(6, 20, 35, 0.16) 56%, rgba(4, 12, 22, 0.62) 100%) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option .mini-art { position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; border-radius: var(--select-card-straight-radius, 8px) !important; clip-path: inset(0 round var(--select-card-straight-radius, 8px)) !important; contain: paint !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; transform: translateZ(0) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option .card-inscription, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option em { z-index: 10 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option:hover span, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option:focus-within span, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option.previewed span, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option.selected span { transform: none !important; } @media (max-width: 720px) { 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-phone-card-art-h: clamp(196px, 23dvh, 224px) !important; --select-phone-card-art-w: calc(var(--select-phone-card-art-h) * 5 / 7) !important; --select-card-frame-x: clamp(10px, 2.45vw, 13px) !important; --select-card-frame-y: clamp(14px, 3.25vw, 18px) !important; --select-phone-card-w: calc(var(--select-phone-card-art-w) + var(--select-card-frame-x) * 2) !important; --select-phone-card-h: calc(var(--select-phone-card-art-h) + var(--select-card-frame-y) * 2) !important; --select-phone-card-gap-x: clamp(9px, 2.3vw, 12px) !important; --select-phone-card-gap-y: clamp(10px, 2.6vw, 14px) !important; --select-phone-frame-x: max(8px, env(safe-area-inset-left), env(safe-area-inset-right)) !important; --select-phone-frame-pad-x: clamp(18px, 4.9vw, 24px) !important; --select-phone-frame-pad-top: clamp(52px, 6.2dvh, 66px) !important; --select-phone-frame-pad-bottom: clamp(64px, 7.4dvh, 82px) !important; --select-card-straight-radius: 7px !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { left: var(--select-phone-frame-x) !important; right: var(--select-phone-frame-x) !important; top: var(--select-phone-frame-top) !important; bottom: var(--select-phone-frame-bottom) !important; width: auto !important; height: auto !important; padding: var(--select-phone-frame-pad-top) var(--select-phone-frame-pad-x) var(--select-phone-frame-pad-bottom) !important; display: grid !important; place-items: center !important; background: var(--character-select-mobile-frame-art) center center / 100% 100% no-repeat !important; overflow: visible !important; isolation: isolate !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 { width: calc(var(--select-phone-card-w) * 2 + var(--select-phone-card-gap-x)) !important; max-width: 100% !important; height: min(calc(var(--select-phone-card-h) * 2 + var(--select-phone-card-gap-y)), 100%) !important; max-height: 100% !important; margin: 0 auto !important; padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; scrollbar-width: none !important; scrollbar-gutter: auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { width: calc(var(--select-phone-card-w) * 2 + var(--select-phone-card-gap-x)) !important; max-width: 100% !important; grid-template-columns: repeat(2, var(--select-phone-card-w)) !important; grid-auto-rows: var(--select-phone-card-h) !important; gap: var(--select-phone-card-gap-y) var(--select-phone-card-gap-x) !important; align-content: start !important; justify-content: center !important; padding: 0 !important; margin: 0 auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option { width: var(--select-phone-card-w) !important; min-width: var(--select-phone-card-w) !important; max-width: var(--select-phone-card-w) !important; height: var(--select-phone-card-h) !important; min-height: var(--select-phone-card-h) !important; max-height: var(--select-phone-card-h) !important; padding: var(--select-card-frame-y) var(--select-card-frame-x) !important; margin: 0 !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option span { width: var(--select-phone-card-art-w) !important; height: var(--select-phone-card-art-h) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option:hover, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option:focus-within, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option.previewed, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option.selected { 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(84px, 6vw, 112px) !important; --select-frame-inner-y: clamp(112px, 12.8vh, 150px) !important; --select-card-frame-x: var(--select-frame-outset-x) !important; --select-card-frame-y: var(--select-frame-outset-y) !important; --select-card-straight-radius: 8px !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 - 4px)) !important; height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 4px)) !important; max-width: calc(100vw - 4px) !important; max-height: calc(100dvh - 4px) !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; overflow: visible !important; } } /* V1.27Beta-codex65: enlarged preview mode badge copies the thumbnail badge, not the other way around. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]) { appearance: none !important; -webkit-appearance: none !important; box-sizing: border-box !important; display: inline-grid !important; place-items: center !important; gap: 5px !important; width: fit-content !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 0 5px !important; padding: 3px 9px 4px 7px !important; order: 1 !important; justify-self: start !important; border-radius: 0 !important; clip-path: none !important; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", "Arial Black", sans-serif !important; font-size: clamp(11px, 0.92vw, 13px) !important; font-weight: 950 !important; line-height: 1.08 !important; letter-spacing: 0 !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 #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill:not([hidden]) { appearance: none !important; -webkit-appearance: none !important; width: fit-content !important; min-width: 0 !important; max-width: 100% !important; inline-size: fit-content !important; min-inline-size: 0 !important; max-inline-size: 100% !important; min-height: 0 !important; height: auto !important; padding: 3px 8px 4px 7px !important; font-size: clamp(11px, 0.92vw, 13px) !important; line-height: 1.08 !important; font-weight: 950 !important; clip-path: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]) { padding: 3px 6px !important; font-size: clamp(10px, 2.55vw, 12px) !important; line-height: 1.05 !important; clip-path: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill:not([hidden]) { width: fit-content !important; min-width: 0 !important; max-width: 100% !important; inline-size: fit-content !important; min-inline-size: 0 !important; max-inline-size: 100% !important; min-height: 0 !important; height: auto !important; padding: 3px 6px !important; font-size: clamp(10px, 2.55vw, 12px) !important; line-height: 1.05 !important; clip-path: none !important; } } /* V1.27Beta-codex66: restore character-select visibility, outer frame/backing relationship, and red special-mode badges. */ @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(92px, 6.65vw, 124px) !important; --select-frame-inner-y: clamp(124px, 14.2vh, 166px) !important; --select-frame-backing-inset-x: clamp(34px, 2.4vw, 46px) !important; --select-frame-backing-inset-y: clamp(46px, 5.1vh, 62px) !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 - 2px)) !important; height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 2px)) !important; max-width: calc(100vw - 2px) !important; max-height: calc(100dvh - 2px) !important; padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important; background: linear-gradient( 180deg, transparent 0 var(--select-frame-backing-inset-y), rgba(248, 252, 255, 0.96) var(--select-frame-backing-inset-y) calc(100% - var(--select-frame-backing-inset-y)), transparent calc(100% - var(--select-frame-backing-inset-y)) 100% ), linear-gradient( 90deg, transparent 0 var(--select-frame-backing-inset-x), rgba(248, 252, 255, 0.96) var(--select-frame-backing-inset-x) calc(100% - var(--select-frame-backing-inset-x)), transparent calc(100% - var(--select-frame-backing-inset-x)) 100% ), 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-scroll { overflow-x: hidden !important; overflow-y: auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { align-self: center !important; justify-self: center !important; } } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill:not([hidden]) { appearance: none !important; -webkit-appearance: none !important; box-sizing: border-box !important; display: inline-grid !important; grid-auto-flow: column !important; align-items: center !important; justify-content: center !important; width: fit-content !important; inline-size: fit-content !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; min-height: 0 !important; height: auto !important; padding: 4px 10px 5px !important; border: 2px solid rgba(255, 190, 198, 0.94) !important; border-radius: 0 !important; clip-path: none !important; color: #fff9ff !important; -webkit-text-fill-color: currentColor !important; background: linear-gradient(180deg, rgba(255, 247, 251, 0.3), transparent 34%), linear-gradient(90deg, rgba(255, 73, 82, 0.98), rgba(126, 18, 32, 0.98) 62%, rgba(45, 8, 16, 0.98)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 0 rgba(31, 4, 9, 0.62), 0 2px 0 rgba(255, 229, 234, 0.38), 0 8px 14px rgba(40, 3, 11, 0.28) !important; filter: none !important; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", "Arial Black", sans-serif !important; font-size: clamp(11px, 0.92vw, 13px) !important; font-weight: 950 !important; line-height: 1.02 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 2px 4px rgba(42, 0, 12, 0.9), 0 0 8px rgba(255, 154, 185, 0.4) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]) { order: 1 !important; justify-self: start !important; margin: 0 0 5px !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]) .skill-inline-icon { display: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill:not([hidden]) { padding: 3px 7px 4px !important; border-width: 1.5px !important; font-size: clamp(10px, 2.55vw, 12px) !important; line-height: 1.02 !important; } } /* V1.27Beta-codex66: remove the always-on white targeting-circle shimmer. Real VFX should be event-driven. */ html body:not(.maintenance-mode) .card-vfx-idle::after { content: none !important; display: none !important; opacity: 0 !important; background: none !important; animation: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #characterSelect.character-select > .status-line, html body:not(.maintenance-mode) > .status-line.character-select-status-portal, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] { top: max(6px, env(safe-area-inset-top)) !important; width: min(94vw, 388px) !important; min-height: 34px !important; height: 34px !important; padding: 4px 7px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 6px !important; align-items: center !important; border-radius: 14px !important; } html body:not(.maintenance-mode) #characterSelect.character-select > .status-line #selectRoomText, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #selectRoomText, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #selectRoomText { display: none !important; } html body:not(.maintenance-mode) #characterSelect.character-select > .status-line #selectStatusText, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #selectStatusText, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #selectStatusText { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-align: center !important; font-size: clamp(12px, 3.15vw, 14px) !important; line-height: 1.05 !important; } html body:not(.maintenance-mode) #characterSelect.character-select > .status-line #leaveCharacterSelect, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #leaveCharacterSelect, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #leaveCharacterSelect { min-width: 70px !important; height: 28px !important; min-height: 28px !important; padding: 3px 11px 4px !important; font-size: 11px !important; line-height: 1 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; padding: max(42px, calc(env(safe-area-inset-top) + 38px)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important; display: grid !important; place-items: center !important; overflow: hidden !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-shell { width: min(100%, 430px) !important; height: 100% !important; max-height: calc(100dvh - max(58px, calc(env(safe-area-inset-top) + 52px)) - max(8px, env(safe-area-inset-bottom))) !important; display: grid !important; place-items: center !important; overflow: visible !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-panel { width: min(100%, 410px) !important; height: 100% !important; max-height: 100% !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: minmax(0, 42%) minmax(0, 58%) !important; gap: clamp(5px, 1.2dvh, 8px) !important; padding: clamp(8px, 2.1vw, 12px) !important; overflow: hidden !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-art { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; align-self: stretch !important; background-size: contain !important; background-position: center top !important; overflow: hidden !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-copy { width: 100% !important; height: 100% !important; max-height: none !important; min-height: 0 !important; padding: clamp(8px, 2vw, 11px) clamp(10px, 2.4vw, 13px) !important; display: grid !important; grid-template-rows: auto auto auto minmax(0, auto) minmax(0, 1fr) auto auto !important; gap: clamp(3px, 0.75dvh, 6px) !important; overflow: hidden auto !important; overscroll-behavior: contain !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogName { font-size: clamp(34px, 11vw, 50px) !important; line-height: 0.96 !important; margin: 0 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogCharacter { width: fit-content !important; max-width: 100% !important; min-height: 25px !important; padding: 3px 9px 4px !important; margin: 0 0 2px !important; font-size: clamp(12px, 3.4vw, 15px) !important; line-height: 1 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogSkill { width: fit-content !important; max-width: 100% !important; min-height: 30px !important; padding: 4px 9px 5px 7px !important; gap: 6px !important; margin: 0 0 2px !important; font-size: clamp(14px, 3.8vw, 17px) !important; line-height: 1.02 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog #modeDialogSkill .skill-inline-icon { width: clamp(22px, 5.8vw, 28px) !important; height: clamp(22px, 5.8vw, 28px) !important; flex: 0 0 clamp(22px, 5.8vw, 28px) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogDescription { max-height: none !important; overflow: visible !important; margin: 0 !important; font-size: clamp(12px, 3.15vw, 14px) !important; line-height: 1.34 !important; font-weight: 850 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-story { display: block !important; max-height: none !important; margin: 2px 0 0 !important; overflow: visible !important; font-size: clamp(10.5px, 2.82vw, 12.5px) !important; line-height: 1.32 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-prompt { margin: 2px 0 0 !important; font-size: clamp(11px, 2.9vw, 13px) !important; line-height: 1.15 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 2px !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) :is(.mode-close, .mode-lock, #modeAccept, #modeReject) { min-width: 74px !important; height: 30px !important; min-height: 30px !important; padding: 3px 10px 4px !important; font-size: clamp(11px, 2.95vw, 13px) !important; line-height: 1 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-close { top: max(-4px, env(safe-area-inset-top)) !important; right: max(8px, env(safe-area-inset-right)) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeLockCharacter.mode-lock, html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeLockCharacter.mode-lock:hover, html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeLockCharacter.mode-lock:focus-visible, html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeLockCharacter.mode-lock:active { top: max(-4px, env(safe-area-inset-top)) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !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 { top: max(-6px, env(safe-area-inset-top)) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-close:hover, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-close:focus-visible, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-close:active, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-close:hover, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-close:focus-visible, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-close:active { top: max(-6px, env(safe-area-inset-top)) !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"] #modeLockCharacter.mode-lock { top: max(-6px, env(safe-area-inset-top)) !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="storm"] .mode-lock:focus-visible, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-lock:active, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeLockCharacter.mode-lock:hover, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeLockCharacter.mode-lock:focus-visible, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] #modeLockCharacter.mode-lock:active { top: max(-6px, env(safe-area-inset-top)) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-close, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeLockCharacter.mode-lock { top: max(4px, env(safe-area-inset-top)) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-close:hover, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-close:focus-visible, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-close:active, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeLockCharacter.mode-lock:hover, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeLockCharacter.mode-lock:focus-visible, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] #modeLockCharacter.mode-lock:active { top: max(4px, env(safe-area-inset-top)) !important; } /* V1.27Beta-codex67: the character-select backing lives inside one art frame only. */ html body:not(.maintenance-mode) { --character-select-desktop-frame-art: url("assets/ui/character-select-desktop-single-white-frame-v1.png?v=V1.27Beta-codex67") !important; --character-select-mobile-frame-art: url("assets/ui/character-select-mobile-portrait-frame-codex67.png?v=V1.27Beta-codex67") !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { 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, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::after { content: none !important; display: none !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { background: var(--character-select-mobile-frame-art) center center / 100% 100% no-repeat !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; } } /* V1.27Beta-codex67: thumbnail and enlarged normal-preview special badges are the same red cut badge. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option .mode-tip.enabled, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]).enabled, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Rhasta"] #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="Xiaoyang"] #previewModeSkill:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip { appearance: none !important; -webkit-appearance: none !important; box-sizing: border-box !important; display: inline-grid !important; place-items: center !important; width: fit-content !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 5px !important; padding: 4px 10px 5px !important; border: 2px solid rgba(255, 185, 197, 0.98) !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%) !important; color: #fff8ff !important; -webkit-text-fill-color: currentColor !important; background: linear-gradient(180deg, rgba(255, 235, 241, 0.28), transparent 36%), linear-gradient(90deg, #f34755 0%, #bc2337 54%, #4d0a16 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(33, 4, 10, 0.66), 0 1px 0 rgba(255, 233, 237, 0.52), 0 6px 12px rgba(41, 0, 12, 0.28) !important; filter: none !important; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", "Arial Black", sans-serif !important; font-size: clamp(11px, 0.92vw, 13px) !important; font-weight: 950 !important; line-height: 1.02 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 4px rgba(42, 0, 12, 0.92), 0 0 8px rgba(255, 150, 186, 0.38) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]) .skill-inline-icon { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]) .skill-inline-text { display: contents !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill:not([hidden]) { padding: 3px 7px 4px !important; border-width: 1.5px !important; font-size: clamp(10px, 2.55vw, 12px) !important; } } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill:not([hidden]) { appearance: none !important; -webkit-appearance: none !important; box-sizing: border-box !important; display: inline-grid !important; place-items: center !important; width: fit-content !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 5px !important; padding: 4px 10px 5px !important; border: 2px solid rgba(255, 185, 197, 0.98) !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%) !important; color: #fff8ff !important; -webkit-text-fill-color: currentColor !important; background: linear-gradient(180deg, rgba(255, 235, 241, 0.28), transparent 36%), linear-gradient(90deg, #f34755 0%, #bc2337 54%, #4d0a16 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(33, 4, 10, 0.66), 0 1px 0 rgba(255, 233, 237, 0.52), 0 6px 12px rgba(41, 0, 12, 0.28) !important; filter: none !important; font-size: clamp(11px, 0.92vw, 13px) !important; font-weight: 950 !important; line-height: 1.02 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill:not([hidden]) { padding: 3px 7px 4px !important; border-width: 1.5px !important; font-size: clamp(10px, 2.55vw, 12px) !important; } } /* V1.27Beta-codex69: restore character-specific special-mode badges and match preview badge size to the normal skill badge. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewSkill.preview-skill-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden]) { box-sizing: border-box !important; display: inline-grid !important; place-items: center !important; width: clamp(106px, 9vw, 136px) !important; min-width: clamp(106px, 9vw, 136px) !important; max-width: clamp(106px, 9vw, 136px) !important; height: clamp(30px, 3.25vh, 36px) !important; min-height: clamp(30px, 3.25vh, 36px) !important; max-height: clamp(30px, 3.25vh, 36px) !important; padding: 0 12px 2px !important; font-size: clamp(12px, 1vw, 14px) !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden]) { order: 1 !important; justify-self: start !important; margin: 0 0 5px !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewSkill.preview-skill-tip { order: 2 !important; justify-self: start !important; margin: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Lollipopz"] #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip { color: #f08fc4 !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(255, 184, 220, 0.9) !important; border-left: 3px solid rgba(255, 142, 198, 0.96) !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%) !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) #appRoot.app.character-select-app #characterPreview[data-character="Rhasta"] #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip { color: #fffbe8 !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(255, 210, 120, 0.96) !important; border-left: 3px solid rgba(75, 188, 116, 0.98) !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%) !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(235, 181, 68, 0.94) 52%, 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; text-shadow: 0 1px 3px rgba(25, 47, 20, 0.74), 0 0 10px rgba(255, 221, 112, 0.34) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewSkill.preview-skill-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden]) { width: clamp(84px, 24vw, 104px) !important; min-width: clamp(84px, 24vw, 104px) !important; max-width: clamp(84px, 24vw, 104px) !important; height: clamp(25px, 6.6vw, 31px) !important; min-height: clamp(25px, 6.6vw, 31px) !important; max-height: clamp(25px, 6.6vw, 31px) !important; padding: 0 8px 1px !important; font-size: clamp(10px, 2.75vw, 12px) !important; } } /* V1.27Beta-codex70: character-specific preview badges must beat the generic red sibling selector. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Lollipopz"] #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Lollipopz"] #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip { color: #f08fc4 !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(255, 184, 220, 0.9) !important; border-left: 3px solid rgba(255, 142, 198, 0.96) !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%) !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) #appRoot.app.character-select-app #characterPreview[data-character="Rhasta"] #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Rhasta"] #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip { color: #fffbe8 !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(255, 210, 120, 0.96) !important; border-left: 3px solid rgba(75, 188, 116, 0.98) !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%) !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(235, 181, 68, 0.94) 52%, 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; text-shadow: 0 1px 3px rgba(25, 47, 20, 0.74), 0 0 10px rgba(255, 221, 112, 0.34) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Xiaoyang"] #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Xiaoyang"] #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip { 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; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%) !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; } /* V1.27Beta-codex71: defense and charge use transparent painted panels, without black backing layers. */ html body:not(.maintenance-mode) { --action-defend-user-panel-art: url("assets/ui/action-defend-user-panel-cutout-bgmatch-t14-codex71.png?v=V1.27Beta-codex71") !important; --action-charge-user-panel-art: url("assets/ui/action-charge-user-panel-cutout-bgmatch-t22-codex71.png?v=V1.27Beta-codex71") !important; } html body:not(.maintenance-mode) #battle #cards .action-card.defend, html body:not(.maintenance-mode) #cards .action-card.defend, html body:not(.maintenance-mode) #battle #cards .action-card.charge, html body:not(.maintenance-mode) #cards .action-card.charge { min-height: 0 !important; aspect-ratio: 1983 / 793 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; overflow: visible !important; clip-path: none !important; background-color: transparent !important; box-shadow: none !important; filter: drop-shadow(0 7px 12px rgba(2, 11, 22, 0.18)) !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-user-panel-art) !important; background: var(--action-defend-user-panel-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-user-panel-art) !important; background: var(--action-charge-user-panel-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #battle #cards .action-card.defend::before, html body:not(.maintenance-mode) #battle #cards .action-card.defend::after, html body:not(.maintenance-mode) #cards .action-card.defend::before, html body:not(.maintenance-mode) #cards .action-card.defend::after, html body:not(.maintenance-mode) #battle #cards .action-card.charge::before, html body:not(.maintenance-mode) #battle #cards .action-card.charge::after, html body:not(.maintenance-mode) #cards .action-card.charge::before, html body:not(.maintenance-mode) #cards .action-card.charge::after, html body:not(.maintenance-mode) #battle #cards .action-card.defend .action-icon, html body:not(.maintenance-mode) #cards .action-card.defend .action-icon, html body:not(.maintenance-mode) #battle #cards .action-card.charge .action-icon, html body:not(.maintenance-mode) #cards .action-card.charge .action-icon { content: none !important; display: none !important; opacity: 0 !important; background: none !important; -webkit-mask: none !important; mask: none !important; } /* V1.27Beta-codex72: thumbnail special-mode badges align exactly with their skill badges. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] em, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] em, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] em { align-items: start !important; justify-items: start !important; place-items: start start !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip { box-sizing: border-box !important; width: 66px !important; min-width: 66px !important; max-width: 66px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; padding: 0 4px 1px 7px !important; display: grid !important; align-items: center !important; justify-items: start !important; place-items: center start !important; justify-content: start !important; text-align: left !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip { margin-inline: 0 !important; text-indent: 0 !important; overflow: hidden !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip { width: clamp(60px, 17vw, 66px) !important; min-width: clamp(60px, 17vw, 66px) !important; max-width: clamp(60px, 17vw, 66px) !important; height: clamp(20px, 5.3vw, 22px) !important; min-height: clamp(20px, 5.3vw, 22px) !important; max-height: clamp(20px, 5.3vw, 22px) !important; padding: 0 4px 1px 6px !important; font-size: clamp(10px, 2.55vw, 11px) !important; } } /* V1.27Beta-codex74: phone special-mode panels use cropped portrait art and content-height copy boxes. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-panel { grid-template-rows: clamp(260px, 36dvh, 334px) max-content !important; align-content: start !important; gap: clamp(7px, 1dvh, 9px) !important; padding: clamp(42px, 4.9dvh, 46px) clamp(8px, 2.1vw, 12px) clamp(8px, 2.1vw, 12px) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-art { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; align-self: stretch !important; justify-self: stretch !important; border-radius: 10px !important; background-size: cover !important; background-repeat: no-repeat !important; overflow: visible !important; isolation: isolate !important; box-shadow: 0 0 0 1px var(--mode-glow-line, rgba(255, 220, 180, 0.72)), 0 0 22px var(--mode-glow-strong, rgba(255, 190, 145, 0.26)), inset 0 0 24px rgba(255, 255, 255, 0.12) !important; filter: drop-shadow(0 12px 18px rgba(0, 12, 24, 0.24)) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-art { background-position: 50% 18% !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art { background-position: 50% 52% !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-art { background-position: 50% 22% !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="storm"] { --mode-glow-line: rgba(116, 226, 255, 0.9); --mode-glow-strong: rgba(80, 162, 255, 0.38); --mode-glow-soft: rgba(172, 245, 255, 0.24); } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="magic-assassin"] { --mode-glow-line: rgba(255, 151, 216, 0.92); --mode-glow-strong: rgba(255, 84, 191, 0.38); --mode-glow-soft: rgba(184, 224, 255, 0.24); } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"][data-mode="devour-world"] { --mode-glow-line: rgba(255, 219, 111, 0.9); --mode-glow-strong: rgba(97, 210, 133, 0.34); --mode-glow-soft: rgba(255, 204, 86, 0.24); } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"]:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-art::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"]:is([data-mode="storm"], [data-mode="magic-assassin"], [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"]:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-art::before { z-index: 2 !important; inset: -8px !important; border: 2px solid var(--mode-glow-line, rgba(255, 220, 180, 0.84)) !important; border-radius: 16px !important; background: linear-gradient(90deg, var(--mode-glow-soft, rgba(255, 220, 180, 0.22)), transparent 18% 82%, var(--mode-glow-soft, rgba(255, 220, 180, 0.22))), linear-gradient(180deg, var(--mode-glow-soft, rgba(255, 220, 180, 0.22)), transparent 18% 82%, var(--mode-glow-soft, rgba(255, 220, 180, 0.22))) !important; box-shadow: 0 0 14px var(--mode-glow-strong, rgba(255, 190, 145, 0.28)), 0 0 28px var(--mode-glow-soft, rgba(255, 220, 180, 0.2)), inset 0 0 16px rgba(255, 255, 255, 0.14) !important; mix-blend-mode: screen !important; opacity: 0.9 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="true"]:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-art::after { z-index: 1 !important; inset: -18px !important; border-radius: 22px !important; background: radial-gradient(ellipse at 50% 12%, var(--mode-glow-soft, rgba(255, 220, 180, 0.28)), transparent 43%), radial-gradient(ellipse at 50% 88%, var(--mode-glow-strong, rgba(255, 190, 145, 0.22)), transparent 56%) !important; mix-blend-mode: screen !important; opacity: 0.76 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="false"] .mode-dialog-art { box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-copy { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: min(38dvh, 342px) !important; align-self: start !important; justify-self: stretch !important; display: grid !important; grid-template-rows: auto auto auto auto auto auto auto !important; align-content: start !important; gap: clamp(4px, 0.72dvh, 6px) !important; padding: clamp(8px, 2vw, 11px) clamp(10px, 2.4vw, 13px) !important; overflow: hidden auto !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogDescription { max-height: clamp(58px, 8.2dvh, 76px) !important; overflow-y: auto !important; margin: 0 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-story { max-height: clamp(42px, 6.4dvh, 58px) !important; overflow-y: auto !important; margin: 1px 0 0 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-actions { align-self: start !important; height: auto !important; min-height: 0 !important; max-height: none !important; align-content: start !important; margin-top: 1px !important; } } /* V1.27Beta-codex75: phone special-mode copy box pins to the frame bottom; portrait art fills the remaining height. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-panel { grid-template-rows: minmax(0, 1fr) max-content !important; align-content: stretch !important; align-items: stretch !important; gap: clamp(7px, 1dvh, 9px) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-art { height: 100% !important; min-height: 0 !important; align-self: stretch !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-art { background-position: 50% 16% !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] .mode-dialog-art { background-position: 50% 50% !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] .mode-dialog-art { background-position: 50% 18% !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-copy { align-self: end !important; margin-top: 0 !important; } } /* V1.27Beta-codex76: give the phone special-mode header controls a little breathing room from the top status pill. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-shell { transform: translateY(clamp(6px, 0.9dvh, 9px)) !important; } } /* V1.27Beta-codex77: compact and recenter the mobile character-select status strip. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #characterSelect.character-select > .status-line, html body:not(.maintenance-mode) > .status-line.character-select-status-portal, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] { height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 3px 7px !important; grid-template-columns: minmax(0, 1fr) 72px !important; grid-template-areas: "status leave" !important; align-items: center !important; justify-items: center !important; column-gap: 6px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #characterSelect.character-select > .status-line #selectStatusText, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #selectStatusText, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #selectStatusText { grid-area: status !important; align-self: center !important; justify-self: center !important; display: grid !important; place-items: center !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; text-align: center !important; } html body:not(.maintenance-mode) #characterSelect.character-select > .status-line #leaveCharacterSelect, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #leaveCharacterSelect, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #leaveCharacterSelect { grid-area: leave !important; align-self: center !important; justify-self: end !important; width: 72px !important; min-width: 72px !important; max-width: 72px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; padding: 0 9px !important; display: inline-grid !important; place-items: center !important; line-height: 1 !important; transform: translateY(-1px) !important; box-sizing: border-box !important; } } /* V1.27Beta-codex78: neutralize logical button sizing so the mobile return button truly sits inside the strip. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #characterSelect.character-select > .status-line #leaveCharacterSelect.return-lobby, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #leaveCharacterSelect.return-lobby, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #leaveCharacterSelect.return-lobby { block-size: 24px !important; min-block-size: 24px !important; max-block-size: 24px !important; inline-size: 72px !important; min-inline-size: 72px !important; max-inline-size: 72px !important; padding-block: 0 !important; padding-inline: 9px !important; margin: 0 !important; align-self: center !important; } html body:not(.maintenance-mode) #characterSelect.character-select > .status-line #selectStatusText, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #selectStatusText, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #selectStatusText { block-size: auto !important; min-block-size: 0 !important; max-block-size: 100% !important; align-self: center !important; } } /* V1.27Beta-codex79: phone identity-room seating uses short two-column seats and non-overlapping bottom actions. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) { overflow: hidden !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat-grid { position: fixed !important; left: 50% !important; top: clamp(242px, 27.5dvh, 264px) !important; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 84px) !important; width: min(390px, calc(100vw - 18px)) !important; max-width: min(390px, calc(100vw - 18px)) !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 2px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(5, minmax(70px, 1fr)) !important; grid-auto-rows: minmax(70px, 1fr) !important; gap: 7px 8px !important; align-content: stretch !important; justify-content: center !important; justify-items: stretch !important; overflow: visible !important; transform: translateX(-50%) !important; z-index: 18 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 70px !important; max-height: none !important; block-size: 100% !important; min-block-size: 70px !important; aspect-ratio: auto !important; box-sizing: border-box !important; padding: 10px 8px 24px !important; display: block !important; overflow: visible !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat::before { inset: 0 !important; background-size: 100% 100% !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat > .room-seat-identity { position: absolute !important; left: 50% !important; top: 40% !important; width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 9px minmax(0, 1fr) !important; column-gap: 3px !important; align-items: center !important; justify-items: center !important; transform: translate(-50%, -50%) !important; font-size: clamp(10.5px, 2.65vw, 12px) !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat .room-seat-slot, html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat .room-seat-person, html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat .room-seat-person .player-name, html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat .room-seat-person .player-name-text { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: inherit !important; line-height: 1 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat .room-seat-separator { width: 9px !important; min-width: 9px !important; font-size: inherit !important; line-height: 1 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat-actions { position: absolute !important; left: 50% !important; right: auto !important; top: auto !important; bottom: 7px !important; width: 58px !important; height: 20px !important; min-height: 20px !important; margin: 0 !important; padding: 0 !important; display: grid !important; place-items: center !important; transform: translateX(-50%) !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-seat-action { width: 58px !important; min-width: 58px !important; max-width: 58px !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; block-size: 20px !important; min-block-size: 20px !important; padding: 0 5px !important; font-size: 10px !important; line-height: 1 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; width: min(412px, calc(100vw - 18px)) !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; grid-auto-rows: 34px !important; gap: 6px !important; align-items: center !important; justify-items: stretch !important; transform: translateX(-50%) !important; z-index: 32 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #startGame { grid-column: 1 / 3 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #copyRoomLobby { grid-column: 3 / 5 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #refreshRoomLobby { grid-column: 5 / 7 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #showRulesRoomLobby { grid-column: 2 / 4 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #leaveRoomLobby { grid-column: 4 / 6 !important; } html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #startGame, html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #copyRoomLobby, html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #refreshRoomLobby, html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #showRulesRoomLobby, html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] .room-lobby-actions #leaveRoomLobby { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; block-size: 34px !important; min-block-size: 34px !important; padding: 0 6px !important; margin: 0 !important; display: grid !important; place-items: center !important; font-size: 11px !important; line-height: 1 !important; white-space: nowrap !important; transform: none !important; pointer-events: auto !important; } } /* V1.27Beta-codex80: hard fallback for identity-room phone actions; wrap into two readable rows. */ @media (max-width: 720px) { 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(10px, env(safe-area-inset-bottom)) !important; width: min(412px, calc(100vw - 18px)) !important; min-width: 0 !important; max-width: min(412px, calc(100vw - 18px)) !important; height: 74px !important; min-height: 74px !important; max-height: 74px !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-flow: row wrap !important; align-content: center !important; align-items: center !important; justify-content: center !important; gap: 6px !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 > button { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; flex: 0 0 calc((100% - 12px) / 3) !important; width: calc((100% - 12px) / 3) !important; min-width: 0 !important; max-width: calc((100% - 12px) / 3) !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; block-size: 34px !important; min-block-size: 34px !important; max-block-size: 34px !important; padding: 0 6px !important; margin: 0 !important; display: grid !important; place-items: center !important; font-size: 11px !important; line-height: 1 !important; white-space: nowrap !important; transform: none !important; pointer-events: auto !important; } 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 { flex-basis: calc((100% - 6px) / 2) !important; width: calc((100% - 6px) / 2) !important; max-width: calc((100% - 6px) / 2) !important; } } /* V1.27Beta-codex81: force the identity-room action grid to two rows instead of the old five-column strip. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-lobby-actions { display: grid !important; grid-template: 34px 34px / repeat(6, minmax(0, 1fr)) !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; grid-template-rows: 34px 34px !important; grid-auto-rows: 34px !important; gap: 6px !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-lobby-actions > button#startGame, html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-lobby-actions > button#copyRoomLobby, html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby, html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby, html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { justify-self: stretch !important; align-self: stretch !important; inline-size: 100% !important; min-inline-size: 0 !important; max-inline-size: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important; flex-basis: auto !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-lobby-actions > button#startGame { grid-column: 1 / 3 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-lobby-actions > button#copyRoomLobby { grid-column: 3 / 5 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby { grid-column: 5 / 7 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby { grid-column: 2 / 4 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { grid-column: 4 / 6 !important; grid-row: 2 !important; } } /* V1.27Beta-codex82: user-provided spec attack panels + refined no-circle VFX defaults. */ html body:not(.maintenance-mode) #cards { --attack-panel-discipline-priest-codex82: url("assets/ui/action_buttons/v125/attack/priest/discipline.png?v=V1.27Beta-codex82"); --attack-panel-feral-druid-codex82: url("assets/ui/action_buttons/v125/attack/druid/feral.png?v=V1.27Beta-druid-feral-balance-standard1"); --attack-panel-balance-druid-codex82: url("assets/ui/action_buttons/v125/attack/druid/balance.png?v=V1.27Beta-druid-feral-balance-standard1"); --attack-panel-beast-mastery-hunter-codex82: url("assets/ui/action_buttons/v125/attack/hunter/beast_mastery.png?v=V1.27Beta-codex82"); --attack-panel-marksmanship-hunter-codex82: url("assets/ui/action_buttons/v125/attack/hunter/marksmanship.png?v=V1.27Beta-codex82"); --attack-panel-windwalker-monk-codex82: url("assets/ui/action_buttons/v125/attack/monk/windwalker.png?v=V1.27Beta-druid-feral-balance-standard1"); --attack-panel-blood-death-knight-codex82: url("assets/ui/action_buttons/v125/attack/death_knight/blood.png?v=V1.27Beta-druid-feral-balance-standard1"); --attack-panel-frost-death-knight-codex82: url("assets/ui/action_buttons/v125/attack/death_knight/frost.png?v=V1.27Beta-druid-feral-balance-standard1"); --attack-panel-unholy-death-knight-codex82: url("assets/ui/action_buttons/v125/attack/death_knight/unholy.png?v=V1.27Beta-druid-feral-balance-standard1"); --attack-panel-demonology-warlock-codex82: url("assets/ui/action_buttons/v125/attack/warlock/demonology.png?v=V1.27Beta-codex82"); --attack-panel-elemental-shaman-codex82: url("assets/ui/action_buttons/v125/attack/shaman/elemental.png?v=V1.27Beta-codex82"); --attack-panel-arcane-mage-codex82: url("assets/ui/action_buttons/v125/attack/mage/arcane.png?v=V1.27Beta-action-alpha-seamfix2"); --attack-panel-assassination-rogue-codex82: url("assets/ui/action_buttons/v125/attack/rogue/assassination.png?v=V1.27Beta-action-alpha-seamfix2"); --attack-panel-subtlety-rogue-codex82: url("assets/ui/action_buttons/v125/attack/rogue/subtlety.png?v=V1.27Beta-action-alpha-seamfix2"); } html body:not(.maintenance-mode) #cards[data-attack-style="discipline-priest"] { --action-attack-panel-art: var(--attack-panel-discipline-priest-codex82) !important; --action-solid: #fff0b0 !important; } html body:not(.maintenance-mode) #cards[data-attack-style="feral-druid"] { --action-attack-panel-art: var(--attack-panel-feral-druid-codex82) !important; --action-solid: #ffd36a !important; } html body:not(.maintenance-mode) #cards[data-attack-style="balance-druid"] { --action-attack-panel-art: var(--attack-panel-balance-druid-codex82) !important; --action-solid: #82e8ff !important; } html body:not(.maintenance-mode) #cards[data-attack-style="beastmaster-hunter"], html body:not(.maintenance-mode) #cards[data-attack-style="beast-mastery-hunter"] { --action-attack-panel-art: var(--attack-panel-beast-mastery-hunter-codex82) !important; --action-solid: #a8ff82 !important; } html body:not(.maintenance-mode) #cards[data-attack-style="marksman-hunter"], html body:not(.maintenance-mode) #cards[data-attack-style="marksmanship-hunter"] { --action-attack-panel-art: var(--attack-panel-marksmanship-hunter-codex82) !important; --action-solid: #82e8ff !important; } html body:not(.maintenance-mode) #cards[data-attack-style="windwalker-monk"] { --action-attack-panel-art: var(--attack-panel-windwalker-monk-codex82) !important; --action-solid: #70ffc8 !important; } html body:not(.maintenance-mode) #cards[data-attack-style="unholy-death-knight"] { --action-attack-panel-art: var(--attack-panel-unholy-death-knight-codex82) !important; --action-solid: #8deaff !important; } html body:not(.maintenance-mode) #cards[data-attack-style="blood-death-knight"] { --action-attack-panel-art: var(--attack-panel-blood-death-knight-codex82) !important; --action-solid: #8deaff !important; } html body:not(.maintenance-mode) #cards[data-attack-style="frost-death-knight"] { --action-attack-panel-art: var(--attack-panel-frost-death-knight-codex82) !important; --action-solid: #8deaff !important; } html body:not(.maintenance-mode) #cards[data-attack-style="demonology-warlock"] { --action-attack-panel-art: var(--attack-panel-demonology-warlock-codex82) !important; --action-solid: #c084ff !important; } html body:not(.maintenance-mode) #cards[data-attack-style="elemental-shaman"] { --action-attack-panel-art: var(--attack-panel-elemental-shaman-codex82) !important; --action-solid: #72eaff !important; } html body:not(.maintenance-mode) #cards[data-attack-style="arcane-mage"] { --action-attack-panel-art: var(--attack-panel-arcane-mage-codex82) !important; --action-solid: #8bdfff !important; } html body:not(.maintenance-mode) #cards[data-attack-style="assassination-rogue"] { --action-attack-panel-art: var(--attack-panel-assassination-rogue-codex82) !important; --action-solid: #bfff4a !important; } html body:not(.maintenance-mode) #cards[data-attack-style="subtlety-rogue"] { --action-attack-panel-art: var(--attack-panel-subtlety-rogue-codex82) !important; --action-solid: #c9f5ff !important; } html body:not(.maintenance-mode) #cards .action-card.attack, html body:not(.maintenance-mode) #battle #cards .action-card.attack { background: var(--action-attack-panel-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) .card-vfx-idle::before, html body:not(.maintenance-mode) .card-vfx-idle::after, html body:not(.maintenance-mode) .card-vfx-playable::before, html body:not(.maintenance-mode) .card-vfx-playable::after { content: none !important; display: none !important; opacity: 0 !important; animation: none !important; background: none !important; box-shadow: none !important; } /* V1.27Beta-codex83: final room action template, visible character matrix, and no-clipping special badges. */ @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(64px, 5.2vw, 88px) !important; --select-frame-inner-y: clamp(70px, 8.8vh, 98px) !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 - 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; transform: translate(-50%, -50%) !important; display: grid !important; place-items: center !important; overflow: visible !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-scroll { width: var(--select-matrix-w) !important; height: var(--select-matrix-h) !important; max-width: var(--select-matrix-w) !important; max-height: var(--select-matrix-h) !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { width: var(--select-matrix-w) !important; height: var(--select-matrix-h) !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; } } @media (max-width: 720px) { 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-phone-frame-top: clamp(40px, 5.2dvh, 48px) !important; --select-phone-frame-bottom: clamp(8px, 1.4dvh, 14px) !important; --select-phone-frame-pad-top: clamp(50px, 6.2dvh, 64px) !important; --select-phone-frame-pad-bottom: clamp(174px, 18.5dvh, 210px) !important; --select-phone-frame-pad-x: clamp(20px, 5.2vw, 30px) !important; --select-phone-card-gap-x: clamp(8px, 2.2vw, 12px) !important; --select-phone-card-gap-y: clamp(10px, 1.7dvh, 14px) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { left: clamp(2px, 0.8vw, 4px) !important; right: clamp(2px, 0.8vw, 4px) !important; top: var(--select-phone-frame-top) !important; bottom: var(--select-phone-frame-bottom) !important; width: auto !important; height: auto !important; padding: var(--select-phone-frame-pad-top) var(--select-phone-frame-pad-x) var(--select-phone-frame-pad-bottom) !important; display: grid !important; place-items: center !important; overflow: hidden !important; background: var(--character-select-mobile-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-scroll { width: calc(var(--select-phone-card-w) * 2 + var(--select-phone-card-gap-x)) !important; height: min(calc(var(--select-phone-card-h) * 2 + var(--select-phone-card-gap-y)), 100%) !important; max-width: 100% !important; max-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { grid-template-columns: repeat(2, var(--select-phone-card-w)) !important; grid-auto-rows: var(--select-phone-card-h) !important; gap: var(--select-phone-card-gap-y) var(--select-phone-card-gap-x) !important; align-content: start !important; justify-content: center !important; } } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .skill-tip:not(.mode-tip) { box-sizing: border-box !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 23px !important; min-height: 23px !important; max-height: 23px !important; padding: 0 7px 1px 8px !important; display: grid !important; align-items: center !important; justify-items: start !important; place-items: center start !important; justify-content: start !important; text-align: left !important; line-height: 1 !important; white-space: nowrap !important; text-indent: 0 !important; overflow: visible !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .skill-tip:not(.mode-tip) { width: clamp(74px, 20vw, 86px) !important; min-width: clamp(74px, 20vw, 86px) !important; max-width: clamp(74px, 20vw, 86px) !important; height: clamp(21px, 5.6vw, 24px) !important; min-height: clamp(21px, 5.6vw, 24px) !important; max-height: clamp(21px, 5.6vw, 24px) !important; padding: 0 6px 1px 7px !important; font-size: clamp(10px, 2.55vw, 11px) !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: clamp(20px, 3.2vh, 34px) !important; width: min(760px, calc(100vw - 64px)) !important; height: 96px !important; min-height: 96px !important; max-height: 96px !important; padding: 0 !important; margin: 0 !important; display: grid !important; grid-template: 44px 44px / repeat(6, minmax(0, 1fr)) !important; gap: 8px !important; align-items: stretch !important; justify-items: stretch !important; transform: translateX(-50%) !important; pointer-events: none !important; z-index: 36 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding: 0 10px !important; margin: 0 !important; display: grid !important; place-items: center !important; transform: none !important; font-size: 14px !important; line-height: 1 !important; white-space: nowrap !important; text-align: center !important; pointer-events: auto !important; background-size: 100% 100% !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { grid-column: 1 / 3 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#copyRoomLobby { grid-column: 3 / 5 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby { grid-column: 5 / 7 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby { grid-column: 2 / 4 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#startGame { grid-column: 4 / 6 !important; grid-row: 2 !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions { bottom: max(10px, env(safe-area-inset-bottom)) !important; width: min(414px, calc(100vw - 18px)) !important; height: 74px !important; min-height: 74px !important; max-height: 74px !important; grid-template: 34px 34px / repeat(6, minmax(0, 1fr)) !important; gap: 6px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button { height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 6px !important; font-size: 11px !important; } } /* V1.27Beta: final battle-room/character/action cleanup. Keep this block last. */ :root { --battle-character-status-frame-v125: url("assets/ui/battle-character-status-frame-v125.png?v=V1.27Beta") !important; --character-select-desktop-frame-art: url("assets/ui/character-select-desktop-single-white-frame-v1.png?v=V1.27Beta") !important; --character-select-mobile-frame-art: url("assets/ui/character-select-mobile-portrait-frame-codex67.png?v=V1.27Beta") !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions { bottom: clamp(46px, 6.6vh, 76px) !important; width: min(760px, calc(100vw - 64px)) !important; height: 96px !important; grid-template: 44px 44px / repeat(6, minmax(0, 1fr)) !important; gap: 8px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { grid-column: 1 / 3 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#copyRoomLobby { grid-column: 3 / 5 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby { grid-column: 5 / 7 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby { grid-column: 2 / 4 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#startGame { grid-column: 4 / 6 !important; grid-row: 2 !important; } 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-card-h: clamp(160px, calc((100dvh - 330px) / 2), 238px) !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-frame-outset-x: clamp(13px, 1.25vw, 19px) !important; --select-frame-outset-y: clamp(23px, 2.3vh, 32px) !important; --select-frame-inner-x: clamp(78px, 6.5vw, 118px) !important; --select-frame-inner-y: clamp(76px, 8.5vh, 112px) !important; --select-gap: clamp(12px, 1.6vh, 20px) !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 { width: min(calc(var(--select-matrix-w) + var(--select-frame-inner-x) * 2), calc(100vw - 10px)) !important; height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 10px)) !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; overflow: visible !important; } } @media (max-width: 720px) { 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-phone-frame-top: clamp(34px, 4.7dvh, 42px) !important; --select-phone-frame-bottom: clamp(6px, 1.2dvh, 12px) !important; --select-phone-frame-pad-top: clamp(44px, 5.7dvh, 56px) !important; --select-phone-frame-pad-bottom: clamp(152px, 16.2dvh, 190px) !important; --select-phone-frame-pad-x: clamp(20px, 5vw, 30px) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { background: var(--character-select-mobile-frame-art) center center / 100% 100% no-repeat !important; overflow: hidden !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; background: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .status-line { min-height: clamp(34px, 4.8vh, 50px) !important; padding: 4px clamp(10px, 1.8vw, 18px) !important; border: 1px solid rgba(183, 225, 247, 0.78) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(214, 234, 248, 0.58)), rgba(231, 245, 255, 0.82) !important; color: #1b4a68 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px rgba(6, 27, 48, 0.12) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .status-line strong { color: #143f5e !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) !important; } html body:not(.maintenance-mode) #cards { --attack-panel-discipline-priest-v125: url("assets/ui/action_buttons/v125/attack/priest/discipline.png?v=V1.27Beta") !important; --attack-panel-feral-druid-v125: url("assets/ui/action_buttons/v125/attack/druid/feral.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-balance-druid-v125: url("assets/ui/action_buttons/v125/attack/druid/balance.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-beast-mastery-hunter-v125: url("assets/ui/action_buttons/v125/attack/hunter/beast_mastery.png?v=V1.27Beta") !important; --attack-panel-marksmanship-hunter-v125: url("assets/ui/action_buttons/v125/attack/hunter/marksmanship.png?v=V1.27Beta") !important; --attack-panel-windwalker-monk-v125: url("assets/ui/action_buttons/v125/attack/monk/windwalker.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-blood-death-knight-v125: url("assets/ui/action_buttons/v125/attack/death_knight/blood.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-frost-death-knight-v125: url("assets/ui/action_buttons/v125/attack/death_knight/frost.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-unholy-death-knight-v125: url("assets/ui/action_buttons/v125/attack/death_knight/unholy.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-demonology-warlock-v125: url("assets/ui/action_buttons/v125/attack/warlock/demonology.png?v=V1.27Beta") !important; --attack-panel-elemental-shaman-v125: url("assets/ui/action_buttons/v125/attack/shaman/elemental.png?v=V1.27Beta") !important; --attack-panel-arcane-mage-v125: url("assets/ui/action_buttons/v125/attack/mage/arcane.png?v=V1.27Beta-action-alpha-seamfix2") !important; --attack-panel-assassination-rogue-v125: url("assets/ui/action_buttons/v125/attack/rogue/assassination.png?v=V1.27Beta-action-alpha-seamfix2") !important; --attack-panel-subtlety-rogue-v125: url("assets/ui/action_buttons/v125/attack/rogue/subtlety.png?v=V1.27Beta-action-alpha-seamfix2") !important; --attack-panel-outlaw-rogue-v125: url("assets/ui/action_buttons/v125/attack/rogue/outlaw.png?v=V1.27Beta-action-alpha-seamfix2") !important; --attack-panel-warrior-v125: url("assets/ui/action_buttons/v125/attack/warrior/arms.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-paladin-v125: url("assets/ui/action_buttons/v125/attack/paladin/retribution.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-default-v125: url("assets/ui/action_buttons/v125/attack/mage/arcane.png?v=V1.27Beta") !important; --action-attack-panel-art: var(--attack-panel-default-v125) !important; --action-defend-panel-art: url("assets/ui/action-defend-user-panel-cutout-bgmatch-t14-codex71.png?v=V1.27Beta") !important; --action-charge-panel-art: url("assets/ui/action-charge-user-panel-cutout-bgmatch-t22-codex71.png?v=V1.27Beta") !important; } html body:not(.maintenance-mode) #cards[data-attack-style="discipline-priest"] { --action-attack-panel-art: var(--attack-panel-discipline-priest-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="feral-druid"] { --action-attack-panel-art: var(--attack-panel-feral-druid-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="balance-druid"] { --action-attack-panel-art: var(--attack-panel-balance-druid-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="beastmaster-hunter"], html body:not(.maintenance-mode) #cards[data-attack-style="beast-mastery-hunter"] { --action-attack-panel-art: var(--attack-panel-beast-mastery-hunter-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="marksman-hunter"], html body:not(.maintenance-mode) #cards[data-attack-style="marksmanship-hunter"] { --action-attack-panel-art: var(--attack-panel-marksmanship-hunter-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="windwalker-monk"], html body:not(.maintenance-mode) #cards[data-attack-style="monk"] { --action-attack-panel-art: var(--attack-panel-windwalker-monk-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="unholy-death-knight"], html body:not(.maintenance-mode) #cards[data-attack-style="death-knight"] { --action-attack-panel-art: var(--attack-panel-unholy-death-knight-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="blood-death-knight"] { --action-attack-panel-art: var(--attack-panel-blood-death-knight-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="frost-death-knight"] { --action-attack-panel-art: var(--attack-panel-frost-death-knight-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="demonology-warlock"], html body:not(.maintenance-mode) #cards[data-attack-style="warlock"] { --action-attack-panel-art: var(--attack-panel-demonology-warlock-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="elemental-shaman"], html body:not(.maintenance-mode) #cards[data-attack-style="restoration-shaman"], html body:not(.maintenance-mode) #cards[data-attack-style="shaman"] { --action-attack-panel-art: var(--attack-panel-elemental-shaman-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="arcane-mage"], html body:not(.maintenance-mode) #cards[data-attack-style="mage"], html body:not(.maintenance-mode) #cards[data-attack-style="caster"] { --action-attack-panel-art: var(--attack-panel-arcane-mage-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="assassination-rogue"], html body:not(.maintenance-mode) #cards[data-attack-style="rogue"] { --action-attack-panel-art: var(--attack-panel-assassination-rogue-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="subtlety-rogue"] { --action-attack-panel-art: var(--attack-panel-subtlety-rogue-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="outlaw-rogue"] { --action-attack-panel-art: var(--attack-panel-outlaw-rogue-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="warrior"] { --action-attack-panel-art: var(--attack-panel-warrior-v125) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="paladin"] { --action-attack-panel-art: var(--attack-panel-paladin-v125) !important; } html body:not(.maintenance-mode) #battle #cards.cards, html body:not(.maintenance-mode) #cards.cards { width: min(720px, calc(100vw - 44px)) !important; max-width: 100% !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(6px, 1vw, 11px) !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } html body:not(.maintenance-mode) #battle #cards .action-card, html body:not(.maintenance-mode) #cards .action-card { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1983 / 793 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; color: transparent !important; background-color: transparent !important; box-shadow: none !important; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.24)) !important; } html body:not(.maintenance-mode) #battle #cards .action-card.attack, html body:not(.maintenance-mode) #cards .action-card.attack { 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 { background: var(--action-defend-panel-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 { background: var(--action-charge-panel-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, html body:not(.maintenance-mode) #battle #cards .action-card span, html body:not(.maintenance-mode) #cards .action-card span { content: none !important; display: none !important; opacity: 0 !important; background: none !important; -webkit-mask: none !important; mask: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #battle .fighter, html body:not(.maintenance-mode) #battle .team-fighter { border: 0 !important; border-radius: 0 !important; background: var(--battle-character-status-frame-v125) center center / 100% 100% no-repeat !important; background-color: transparent !important; box-shadow: none !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .fighter::before, html body:not(.maintenance-mode) #battle .fighter::after, html body:not(.maintenance-mode) #battle .team-fighter::before { content: none !important; display: none !important; } html body:not(.maintenance-mode) #battle .fighter.inspectable::after, html body:not(.maintenance-mode) #battle .fighter.target-candidate::after, html body:not(.maintenance-mode) #battle .fighter.selected-target::after, html body:not(.maintenance-mode) #battle .team-fighter::after, html body:not(.maintenance-mode) #battle .team-fighter.target-candidate::after, html body:not(.maintenance-mode) #battle .team-fighter.selected-target::after { content: "" !important; display: block !important; position: absolute !important; inset: 6px !important; z-index: 16 !important; pointer-events: none !important; border-radius: 12px !important; background: linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) left top / 40px 2px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) right top / 40px 2px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) left bottom / 40px 2px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) right bottom / 40px 2px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) left top / 2px 34px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) right top / 2px 34px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) left bottom / 2px 34px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) right bottom / 2px 34px no-repeat !important; opacity: 0.78 !important; filter: drop-shadow(0 0 8px var(--position-frame-glow, rgba(130, 232, 255, 0.3))) !important; animation: none !important; } html body:not(.maintenance-mode) #battle .fighter { padding: clamp(12px, 1.4vh, 18px) clamp(12px, 1.1vw, 18px) clamp(16px, 1.9vh, 22px) !important; gap: clamp(8px, 1vh, 12px) !important; } html body:not(.maintenance-mode) #battle .fighter-head, html body:not(.maintenance-mode) #battle .role-card, html body:not(.maintenance-mode) #battle .fighter-panel, html body:not(.maintenance-mode) #battle .team-info header, html body:not(.maintenance-mode) #battle .team-status-bar, html body:not(.maintenance-mode) #battle .team-equipment, html body:not(.maintenance-mode) #battle .team-mini-row, html body:not(.maintenance-mode) #battle .team-choice, html body:not(.maintenance-mode) #battle .team-stat-line { border-color: rgba(116, 214, 255, 0.32) !important; background: linear-gradient(180deg, rgba(8, 18, 27, 0.72), rgba(3, 9, 14, 0.58)) !important; color: #dff7ff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 16px rgba(82, 214, 255, 0.08) !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.76) !important; } html body:not(.maintenance-mode) #battle .avatar, html body:not(.maintenance-mode) #battle .team-art { border: 0 !important; border-radius: 10px !important; box-shadow: inset 0 0 0 1px rgba(168, 233, 255, 0.22), inset 0 -40px 44px rgba(0, 0, 0, 0.34) !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .team-fighter { padding: clamp(8px, 0.9vh, 12px) clamp(8px, 0.8vw, 12px) clamp(10px, 1vh, 14px) !important; grid-template-rows: var(--seat-art-h, minmax(82px, 1fr)) minmax(0, 1fr) !important; } html body:not(.maintenance-mode) #battle .team-stat-line { display: none; min-height: 20px; padding: 3px 5px; border: 1px solid rgba(116, 214, 255, 0.28); border-radius: 6px; place-items: center; font-size: 10px; font-weight: 900; line-height: 1; white-space: nowrap; } html body:not(.maintenance-mode) #battle .team-art, html body:not(.maintenance-mode) #battle .avatar { background-size: cover, cover, cover !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #battle { overflow-x: hidden !important; } html body:not(.maintenance-mode) #battle #teamBoard.team-board:not([hidden]) { padding: clamp(42px, 5.4dvh, 56px) 0 clamp(88px, 12dvh, 118px) !important; overflow: visible !important; } html body:not(.maintenance-mode) #battle .seat-ring { width: min(100vw - 8px, 430px) !important; height: min(62dvh, 560px) !important; min-height: 470px !important; border-radius: 20px !important; border-color: rgba(120, 220, 255, 0.16) !important; background: linear-gradient(180deg, rgba(5, 13, 20, 0.34), rgba(4, 8, 14, 0.18)) !important; } html body:not(.maintenance-mode) #battle .seat-ring[data-seats="6"] { --seat-size: clamp(104px, 25.5vw, 122px) !important; --seat-card-h: clamp(178px, 21.4dvh, 208px) !important; --seat-art-h: clamp(82px, 10.6dvh, 102px) !important; } html body:not(.maintenance-mode) #battle .seat-ring[data-seats="10"] { --seat-size: clamp(82px, 20.2vw, 96px) !important; --seat-card-h: clamp(142px, 17dvh, 166px) !important; --seat-art-h: clamp(58px, 7.6dvh, 72px) !important; } html body:not(.maintenance-mode) #battle .seat-ring[data-seats="6"] .seat-fighter, html body:not(.maintenance-mode) #battle .seat-ring[data-seats="10"] .seat-fighter { padding: 6px !important; gap: 3px !important; } html body:not(.maintenance-mode) #battle .team-stat-stack { display: none !important; } html body:not(.maintenance-mode) #battle .team-stat-line { display: grid !important; } html body:not(.maintenance-mode) #battle .team-mini-bars { gap: 3px !important; } html body:not(.maintenance-mode) #battle .team-status-bar, html body:not(.maintenance-mode) #battle .team-equipment { min-height: 18px !important; max-height: 24px !important; padding: 2px !important; gap: 2px !important; } html body:not(.maintenance-mode) #battle .team-info { gap: 3px !important; padding: 3px !important; } html body:not(.maintenance-mode) #battle .team-info header, html body:not(.maintenance-mode) #battle .team-choice { min-height: 18px !important; padding: 2px 4px !important; font-size: 9px !important; } html body:not(.maintenance-mode) #battle .seat-ring[data-seats="10"] .team-info header, html body:not(.maintenance-mode) #battle .seat-ring[data-seats="10"] .team-choice, html body:not(.maintenance-mode) #battle .seat-ring[data-seats="10"] .team-stat-line, html body:not(.maintenance-mode) #battle .seat-ring[data-seats="10"] .team-mini-row { font-size: 8px !important; } html body:not(.maintenance-mode) #battle .seat-ring-core { width: clamp(58px, 14vw, 72px) !important; font-size: 9px !important; opacity: 0.86 !important; } html body:not(.maintenance-mode) #battle #cards.cards { width: min(410px, calc(100vw - 16px)) !important; gap: 4px !important; } } html body:not(.maintenance-mode) .card-vfx-idle::before, html body:not(.maintenance-mode) .card-vfx-idle::after, html body:not(.maintenance-mode) .card-vfx-playable::before, html body:not(.maintenance-mode) .card-vfx-playable::after, html body:not(.maintenance-mode) .card-vfx-hover::before, html body:not(.maintenance-mode) .card-vfx-hover::after { content: none !important; display: none !important; opacity: 0 !important; animation: none !important; background: none !important; box-shadow: none !important; } /* V1.27Beta: absolute final room action geometry, after all older flex/fixed rules. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; grid-template-rows: 44px 44px !important; align-items: stretch !important; justify-items: stretch !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#startGame, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#copyRoomLobby, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#startGame { grid-column: 1 / 3 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#copyRoomLobby { grid-column: 3 / 5 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby { grid-column: 5 / 7 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby { grid-column: 2 / 4 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { grid-column: 4 / 6 !important; grid-row: 2 !important; } } /* V1.27Beta: mobile character select visible area sits too high; lower the card viewport inside the portrait frame. */ 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]) { --character-select-mobile-frame-art: url("assets/ui/character-select-mobile-portrait-frame-codex67.png?v=V1.27Beta") !important; --character-select-desktop-frame-art: url("assets/ui/character-select-desktop-single-white-frame-v1.png?v=V1.27Beta") !important; } @media (max-width: 720px) { 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-phone-frame-pad-top: clamp(68px, 7.6dvh, 78px) !important; --select-phone-frame-pad-bottom: clamp(126px, 13.4dvh, 158px) !important; } /* V1.27Beta: mobile team battles use a compact grid instead of the desktop radial ring. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle:not([hidden]) { align-content: start !important; grid-template-rows: auto auto auto auto !important; gap: 6px !important; padding: 8px 0 max(92px, env(safe-area-inset-bottom)) !important; overflow-x: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle .fighters, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .fighters { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle #teamBoard.team-board:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle #teamBoard.team-board:not([hidden]) { width: min(414px, calc(100vw - 16px)) !important; min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 auto !important; display: grid !important; place-items: center !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle .seat-ring, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .seat-ring { width: 100% !important; height: auto !important; min-height: 0 !important; display: grid !important; gap: 6px !important; padding: 6px !important; border-radius: 16px !important; border: 1px solid rgba(127, 216, 255, 0.16) !important; background: linear-gradient(180deg, rgba(8, 18, 29, 0.22), rgba(5, 9, 16, 0.08)) !important; box-shadow: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle .seat-ring[data-seats="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .seat-ring[data-seats="10"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle .seat-ring .seat-fighter, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .seat-ring .seat-fighter { position: relative !important; left: auto !important; top: auto !important; z-index: auto !important; transform: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle .seat-ring[data-seats="6"] .seat-fighter { height: clamp(160px, 18.4dvh, 176px) !important; min-height: clamp(160px, 18.4dvh, 176px) !important; grid-template-rows: clamp(58px, 7.3dvh, 70px) minmax(0, 1fr) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .seat-ring[data-seats="10"] .seat-fighter { height: clamp(106px, 11.8dvh, 122px) !important; min-height: clamp(106px, 11.8dvh, 122px) !important; grid-template-rows: clamp(34px, 4.5dvh, 44px) minmax(0, 1fr) !important; } html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle .seat-ring[data-seats="6"] .team-art { height: clamp(58px, 7.3dvh, 70px) !important; min-height: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .seat-ring[data-seats="10"] .team-art { height: clamp(34px, 4.5dvh, 44px) !important; min-height: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle .seat-ring-core, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .seat-ring-core { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle .team-info, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .team-info { min-height: 0 !important; gap: 2px !important; padding: 3px !important; } html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle .team-skill, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .team-skill { min-height: 15px !important; max-height: 20px !important; } html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle .team-card-inscription, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .team-card-inscription { transform: scale(0.82) !important; transform-origin: right bottom !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .team-status-bar, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .team-equipment, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .team-info header, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle .team-choice { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle #cards.cards, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle #cards.cards { width: min(414px, calc(100vw - 16px)) !important; margin: 0 auto !important; } } } /* V1.27Beta: phone 1v1 battle status strips stay horizontal instead of stacking. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel .fatigue-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-auto-flow: column !important; align-items: center !important; gap: 3px !important; min-height: 0 !important; height: 14px !important; padding: 0 !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel .fatigue, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel .laziness { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 2px !important; min-width: 0 !important; min-height: 0 !important; height: 14px !important; padding: 0 2px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel .fatigue > .stat-label, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel .laziness > .stat-label { font-size: 8px !important; line-height: 1 !important; gap: 1px !important; min-width: 0 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel .fatigue .stat-label-icon, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel .laziness .stat-label-icon { width: 9px !important; height: 9px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel .fatigue .stat-marks, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel .laziness .stat-marks { display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important; grid-auto-columns: 8px !important; grid-auto-rows: 8px !important; gap: 1px !important; justify-content: end !important; align-items: center !important; min-width: 0 !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel .fatigue i, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel .laziness i { width: 8px !important; height: 8px !important; } } /* V1.27Beta: thumbnail mode/skill badges stay compact when a special mode is active. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em { display: grid !important; grid-auto-flow: row !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; justify-items: start !important; place-items: start start !important; gap: 3px !important; min-width: 0 !important; max-width: min(108px, calc(100% - 12px)) !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .skill-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip.enabled { box-sizing: border-box !important; display: inline-grid !important; grid-auto-flow: column !important; align-items: center !important; justify-content: center !important; place-items: center !important; flex: 0 0 auto !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 23px !important; min-height: 23px !important; max-height: 23px !important; padding: 0 7px 1px 8px !important; font-size: clamp(10px, 0.78vw, 11px) !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; overflow-wrap: normal !important; text-overflow: ellipsis !important; transform: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em { max-width: min(96px, calc(100% - 10px)) !important; gap: 2px !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .skill-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip.enabled { width: clamp(72px, 20vw, 82px) !important; min-width: clamp(72px, 20vw, 82px) !important; max-width: clamp(72px, 20vw, 82px) !important; height: clamp(20px, 5.6vw, 23px) !important; min-height: clamp(20px, 5.6vw, 23px) !important; max-height: clamp(20px, 5.6vw, 23px) !important; padding: 0 6px 1px 7px !important; font-size: clamp(9px, 2.45vw, 10.5px) !important; } } /* V1.27Beta: phone room lobby keeps Start Game in the first action row. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#startGame { grid-column: 1 / 3 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#copyRoomLobby { grid-column: 3 / 5 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby { grid-column: 5 / 7 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby { grid-column: 2 / 4 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { grid-column: 4 / 6 !important; grid-row: 2 !important; } } /* V1.27Beta: room lobby bottom actions remove copy invite and promote Start Game. */ html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#copyRoomLobby { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button:not(#copyRoomLobby) { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; justify-self: stretch !important; align-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 44px !important; grid-auto-rows: 44px !important; width: min(680px, calc(100vw - 64px)) !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; gap: 8px !important; align-items: stretch !important; justify-items: stretch !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#startGame { grid-column: 1 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby { grid-column: 2 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby { grid-column: 3 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { grid-column: 4 !important; grid-row: 1 !important; } } /* V1.27Beta-room-desktop-hard-reset: keep PC rooms centered, roomy, and one-layered. */ html body:not(.maintenance-mode) #appRoot.app.room-lobby-app::before, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app::after, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::before, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::after, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby::before, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena { min-height: 100dvh !important; overflow: hidden !important; background-color: #081019 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(4, 8, 13, 0.14)), var(--room-mode-wallpaper) center / cover no-repeat !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) { position: fixed !important; left: 50% !important; top: calc(50% + 22px) !important; right: auto !important; bottom: auto !important; width: min(1400px, calc(100vw - 56px)) !important; height: min(800px, calc(100dvh - 128px)) !important; min-height: min(560px, calc(100dvh - 88px)) !important; max-height: calc(100dvh - 96px) !important; margin: 0 !important; padding: clamp(18px, 2.1vw, 30px) clamp(24px, 2.8vw, 42px) clamp(12px, 1.4vw, 22px) !important; transform: translate(-50%, -50%) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) 68px !important; gap: clamp(16px, 2.2vh, 24px) !important; overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 22 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-head { grid-row: 1 !important; position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: min(860px, 100%) !important; margin: 0 auto !important; padding: 12px 22px !important; min-height: 74px !important; display: grid !important; align-content: center !important; justify-items: center !important; text-align: center !important; z-index: 3 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .identity-rules { position: absolute !important; top: clamp(16px, 2.2vw, 30px) !important; right: clamp(18px, 2.4vw, 38px) !important; left: auto !important; width: min(360px, 28vw) !important; max-height: min(390px, calc(100dvh - 190px)) !important; margin: 0 !important; overflow: auto !important; transform: none !important; z-index: 8 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-seat-grid { grid-row: 2 !important; position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; padding: 0 clamp(8px, 1.2vw, 18px) !important; transform: none !important; display: grid !important; align-content: center !important; justify-content: center !important; align-items: stretch !important; justify-items: stretch !important; overflow: visible !important; z-index: 2 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="1v1"] > .room-seat-grid { grid-template-columns: repeat(2, minmax(340px, 440px)) !important; grid-auto-rows: clamp(210px, 27dvh, 280px) !important; gap: clamp(70px, 9vw, 150px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="2v2"] > .room-seat-grid { grid-template-columns: repeat(2, minmax(340px, 470px)) !important; grid-auto-rows: clamp(174px, 22dvh, 230px) !important; gap: clamp(34px, 4.4vh, 58px) clamp(72px, 8vw, 132px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="3v3"] > .room-seat-grid { grid-template-columns: repeat(3, minmax(260px, 360px)) !important; grid-auto-rows: clamp(160px, 19dvh, 205px) !important; gap: clamp(26px, 3.5vh, 46px) clamp(26px, 3.2vw, 46px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] > .room-seat-grid { grid-template-columns: repeat(5, minmax(190px, 240px)) !important; grid-auto-rows: clamp(128px, 15dvh, 160px) !important; gap: clamp(14px, 2vh, 24px) clamp(14px, 1.6vw, 22px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-seat-grid > .room-team-versus { position: absolute !important; left: 50% !important; top: 50% !important; grid-column: auto !important; grid-row: auto !important; width: clamp(72px, 6.4vw, 104px) !important; min-width: 0 !important; height: clamp(46px, 4.6vw, 66px) !important; min-height: 0 !important; margin: 0 !important; transform: translate(-50%, -50%) !important; display: grid !important; place-items: center !important; border-radius: 999px !important; pointer-events: none !important; z-index: 4 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: clamp(22px, 2.8vh, 34px) clamp(20px, 2.4vw, 32px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: clamp(12px, 1.8vh, 20px) !important; overflow: visible !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat > .room-seat-identity { width: 100% !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat-person, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat-person .player-name, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat-person .player-name-text { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat-actions { width: 100% !important; min-height: 40px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat-action { width: min(128px, 72%) !important; min-width: 92px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 14px !important; font-size: 13px !important; line-height: 1 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions { grid-row: 3 !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: min(980px, 100%) !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; margin: 0 auto !important; padding: 0 !important; align-self: end !important; justify-self: center !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 68px !important; gap: 14px !important; pointer-events: none !important; z-index: 9 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button:not(#copyRoomLobby) { position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; margin: 0 !important; padding: 0 20px !important; transform: none !important; pointer-events: auto !important; display: grid !important; place-items: center !important; font-size: clamp(14px, 1.15vw, 16px) !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #copyRoomLobby { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #startGame { grid-column: 1 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #refreshRoomLobby { grid-column: 2 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #showRulesRoomLobby { grid-column: 3 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #leaveRoomLobby { grid-column: 4 !important; grid-row: 1 !important; } } @media (min-width: 721px) and (max-width: 980px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) { width: calc(100vw - 28px) !important; height: min(820px, calc(100dvh - 92px)) !important; grid-template-rows: auto minmax(0, 1fr) 144px !important; gap: 14px !important; padding-inline: 20px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="1v1"] > .room-seat-grid, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="2v2"] > .room-seat-grid, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="3v3"] > .room-seat-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)) !important; grid-auto-rows: clamp(138px, 18dvh, 190px) !important; gap: 22px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] > .room-seat-grid { grid-template-columns: repeat(2, minmax(230px, 1fr)) !important; grid-auto-rows: 116px !important; gap: 14px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions { height: 144px !important; min-height: 144px !important; max-height: 144px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, 64px) !important; gap: 10px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button:not(#copyRoomLobby) { height: 64px !important; min-height: 64px !important; max-height: 64px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #startGame { grid-column: 1 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #refreshRoomLobby { grid-column: 2 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #showRulesRoomLobby { grid-column: 1 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #leaveRoomLobby { grid-column: 2 !important; grid-row: 2 !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: 34px 34px !important; grid-auto-rows: 34px !important; width: min(414px, calc(100vw - 18px)) !important; height: 74px !important; min-height: 74px !important; max-height: 74px !important; gap: 6px !important; align-items: stretch !important; justify-items: stretch !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button:not(#copyRoomLobby) { height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 6px !important; font-size: 11px !important; line-height: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#startGame { grid-column: 1 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby { grid-column: 2 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby { grid-column: 1 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { grid-column: 2 !important; grid-row: 2 !important; } } /* V1.27Beta-combatui4: use the full 39-spec WoW attack panel pack and keep all action buttons identical in size. */ html body:not(.maintenance-mode) #battle #cards.cards, html body:not(.maintenance-mode) #cards.cards { --attack-panel-death-knight-blood-v3: url("assets/ui/action_buttons/v125/attack/death_knight/blood.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-death-knight-frost-v3: url("assets/ui/action_buttons/v125/attack/death_knight/frost.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-death-knight-unholy-v3: url("assets/ui/action_buttons/v125/attack/death_knight/unholy.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-demon-hunter-havoc-v3: url("assets/ui/action_buttons/v125/attack/demon_hunter/havoc.png?v=V1.27Beta-combatui4") !important; --attack-panel-demon-hunter-vengeance-v3: url("assets/ui/action_buttons/v125/attack/demon_hunter/vengeance.png?v=V1.27Beta-combatui4") !important; --attack-panel-druid-balance-v3: url("assets/ui/action_buttons/v125/attack/druid/balance.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-druid-feral-v3: url("assets/ui/action_buttons/v125/attack/druid/feral.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-druid-guardian-v3: url("assets/ui/action_buttons/v125/attack/druid/guardian.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-druid-restoration-v3: url("assets/ui/action_buttons/v125/attack/druid/restoration.png?v=V1.27Beta-restoration-druid-standard1") !important; --attack-panel-evoker-devastation-v3: url("assets/ui/action_buttons/v125/attack/evoker/devastation.png?v=V1.27Beta-combatui4") !important; --attack-panel-evoker-preservation-v3: url("assets/ui/action_buttons/v125/attack/evoker/preservation.png?v=V1.27Beta-combatui4") !important; --attack-panel-evoker-augmentation-v3: url("assets/ui/action_buttons/v125/attack/evoker/augmentation.png?v=V1.27Beta-combatui4") !important; --attack-panel-hunter-beast-mastery-v3: url("assets/ui/action_buttons/v125/attack/hunter/beast_mastery.png?v=V1.27Beta-combatui4") !important; --attack-panel-hunter-marksmanship-v3: url("assets/ui/action_buttons/v125/attack/hunter/marksmanship.png?v=V1.27Beta-combatui4") !important; --attack-panel-hunter-survival-v3: url("assets/ui/action_buttons/v125/attack/hunter/survival.png?v=V1.27Beta-combatui4") !important; --attack-panel-mage-arcane-v3: url("assets/ui/action_buttons/v125/attack/mage/arcane.png?v=V1.27Beta-action-alpha-seamfix2") !important; --attack-panel-mage-fire-v3: url("assets/ui/action_buttons/v125/attack/mage/fire.png?v=V1.27Beta-action-alpha-seamfix2") !important; --attack-panel-mage-frost-v3: url("assets/ui/action_buttons/v125/attack/mage/frost.png?v=V1.27Beta-action-alpha-seamfix2") !important; --attack-panel-monk-brewmaster-v3: url("assets/ui/action_buttons/v125/attack/monk/brewmaster.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-monk-mistweaver-v3: url("assets/ui/action_buttons/v125/attack/monk/mistweaver.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-monk-windwalker-v3: url("assets/ui/action_buttons/v125/attack/monk/windwalker.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-paladin-holy-v3: url("assets/ui/action_buttons/v125/attack/paladin/holy.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-paladin-protection-v3: url("assets/ui/action_buttons/v125/attack/paladin/protection.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-paladin-retribution-v3: url("assets/ui/action_buttons/v125/attack/paladin/retribution.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-priest-discipline-v3: url("assets/ui/action_buttons/v125/attack/priest/discipline.png?v=V1.27Beta-combatui4") !important; --attack-panel-priest-holy-v3: url("assets/ui/action_buttons/v125/attack/priest/holy.png?v=V1.27Beta-combatui4") !important; --attack-panel-priest-shadow-v3: url("assets/ui/action_buttons/v125/attack/priest/shadow.png?v=V1.27Beta-combatui4") !important; --attack-panel-rogue-assassination-v3: url("assets/ui/action_buttons/v125/attack/rogue/assassination.png?v=V1.27Beta-action-alpha-seamfix2") !important; --attack-panel-rogue-outlaw-v3: url("assets/ui/action_buttons/v125/attack/rogue/outlaw.png?v=V1.27Beta-action-alpha-seamfix2") !important; --attack-panel-rogue-subtlety-v3: url("assets/ui/action_buttons/v125/attack/rogue/subtlety.png?v=V1.27Beta-action-alpha-seamfix2") !important; --attack-panel-shaman-elemental-v3: url("assets/ui/action_buttons/v125/attack/shaman/elemental.png?v=V1.27Beta-combatui4") !important; --attack-panel-shaman-enhancement-v3: url("assets/ui/action_buttons/v125/attack/shaman/enhancement.png?v=V1.27Beta-combatui4") !important; --attack-panel-shaman-restoration-v3: url("assets/ui/action_buttons/v125/attack/shaman/restoration.png?v=V1.27Beta-combatui4") !important; --attack-panel-warlock-affliction-v3: url("assets/ui/action_buttons/v125/attack/warlock/affliction.png?v=V1.27Beta-combatui4") !important; --attack-panel-warlock-demonology-v3: url("assets/ui/action_buttons/v125/attack/warlock/demonology.png?v=V1.27Beta-combatui4") !important; --attack-panel-warlock-destruction-v3: url("assets/ui/action_buttons/v125/attack/warlock/destruction.png?v=V1.27Beta-combatui4") !important; --attack-panel-warrior-arms-v3: url("assets/ui/action_buttons/v125/attack/warrior/arms.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-warrior-fury-v3: url("assets/ui/action_buttons/v125/attack/warrior/fury.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --attack-panel-warrior-protection-v3: url("assets/ui/action_buttons/v125/attack/warrior/protection.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --action-attack-panel-art: var(--attack-panel-paladin-retribution-v3) !important; --action-defend-panel-art: url("assets/ui/action-defend-user-panel-cutout-bgmatch-t14-codex71.png?v=V1.27Beta-action-equal-size") !important; --action-charge-panel-art: url("assets/ui/action-charge-user-panel-cutout-bgmatch-t22-codex71.png?v=V1.27Beta-action-equal-size") !important; } html body:not(.maintenance-mode) #cards[data-attack-style="blood-death-knight"] { --action-attack-panel-art: var(--attack-panel-death-knight-blood-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="frost-death-knight"] { --action-attack-panel-art: var(--attack-panel-death-knight-frost-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="unholy-death-knight"], html body:not(.maintenance-mode) #cards[data-attack-style="death-knight"] { --action-attack-panel-art: var(--attack-panel-death-knight-unholy-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="havoc-demon-hunter"], html body:not(.maintenance-mode) #cards[data-attack-style="demon-hunter"] { --action-attack-panel-art: var(--attack-panel-demon-hunter-havoc-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="vengeance-demon-hunter"] { --action-attack-panel-art: var(--attack-panel-demon-hunter-vengeance-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="balance-druid"] { --action-attack-panel-art: var(--attack-panel-druid-balance-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="feral-druid"], html body:not(.maintenance-mode) #cards[data-attack-style="druid"] { --action-attack-panel-art: var(--attack-panel-druid-feral-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="guardian-druid"] { --action-attack-panel-art: var(--attack-panel-druid-guardian-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="restoration-druid"] { --action-attack-panel-art: var(--attack-panel-druid-restoration-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="devastation-evoker"], html body:not(.maintenance-mode) #cards[data-attack-style="evoker"] { --action-attack-panel-art: var(--attack-panel-evoker-devastation-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="preservation-evoker"] { --action-attack-panel-art: var(--attack-panel-evoker-preservation-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="augmentation-evoker"] { --action-attack-panel-art: var(--attack-panel-evoker-augmentation-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="beastmaster-hunter"], html body:not(.maintenance-mode) #cards[data-attack-style="beast-mastery-hunter"], html body:not(.maintenance-mode) #cards[data-attack-style="hunter"] { --action-attack-panel-art: var(--attack-panel-hunter-beast-mastery-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="marksman-hunter"], html body:not(.maintenance-mode) #cards[data-attack-style="marksmanship-hunter"] { --action-attack-panel-art: var(--attack-panel-hunter-marksmanship-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="survival-hunter"] { --action-attack-panel-art: var(--attack-panel-hunter-survival-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="arcane-mage"], html body:not(.maintenance-mode) #cards[data-attack-style="mage"], html body:not(.maintenance-mode) #cards[data-attack-style="caster"] { --action-attack-panel-art: var(--attack-panel-mage-arcane-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="fire-mage"] { --action-attack-panel-art: var(--attack-panel-mage-fire-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="frost-mage"] { --action-attack-panel-art: var(--attack-panel-mage-frost-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="brewmaster-monk"] { --action-attack-panel-art: var(--attack-panel-monk-brewmaster-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="mistweaver-monk"] { --action-attack-panel-art: var(--attack-panel-monk-mistweaver-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="windwalker-monk"], html body:not(.maintenance-mode) #cards[data-attack-style="monk"] { --action-attack-panel-art: var(--attack-panel-monk-windwalker-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="holy-paladin"] { --action-attack-panel-art: var(--attack-panel-paladin-holy-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="protection-paladin"] { --action-attack-panel-art: var(--attack-panel-paladin-protection-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="retribution-paladin"], html body:not(.maintenance-mode) #cards[data-attack-style="paladin"] { --action-attack-panel-art: var(--attack-panel-paladin-retribution-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="discipline-priest"], html body:not(.maintenance-mode) #cards[data-attack-style="priest"] { --action-attack-panel-art: var(--attack-panel-priest-discipline-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="holy-priest"] { --action-attack-panel-art: var(--attack-panel-priest-holy-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="shadow-priest"] { --action-attack-panel-art: var(--attack-panel-priest-shadow-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="assassination-rogue"], html body:not(.maintenance-mode) #cards[data-attack-style="rogue"] { --action-attack-panel-art: var(--attack-panel-rogue-assassination-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="outlaw-rogue"] { --action-attack-panel-art: var(--attack-panel-rogue-outlaw-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="subtlety-rogue"] { --action-attack-panel-art: var(--attack-panel-rogue-subtlety-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="elemental-shaman"], html body:not(.maintenance-mode) #cards[data-attack-style="shaman"] { --action-attack-panel-art: var(--attack-panel-shaman-elemental-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="enhancement-shaman"] { --action-attack-panel-art: var(--attack-panel-shaman-enhancement-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="restoration-shaman"] { --action-attack-panel-art: var(--attack-panel-shaman-restoration-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="affliction-warlock"] { --action-attack-panel-art: var(--attack-panel-warlock-affliction-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="demonology-warlock"], html body:not(.maintenance-mode) #cards[data-attack-style="warlock"] { --action-attack-panel-art: var(--attack-panel-warlock-demonology-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="destruction-warlock"] { --action-attack-panel-art: var(--attack-panel-warlock-destruction-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="arms-warrior"], html body:not(.maintenance-mode) #cards[data-attack-style="warrior"] { --action-attack-panel-art: var(--attack-panel-warrior-arms-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="fury-warrior"] { --action-attack-panel-art: var(--attack-panel-warrior-fury-v3) !important; } html body:not(.maintenance-mode) #cards[data-attack-style="protection-warrior"] { --action-attack-panel-art: var(--attack-panel-warrior-protection-v3) !important; } html body:not(.maintenance-mode) #battle #cards.cards, html body:not(.maintenance-mode) #cards.cards { width: min(720px, calc(100vw - 44px)) !important; max-width: 100% !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(6px, 1vw, 11px) !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #battle #cards .action-card, html body:not(.maintenance-mode) #cards .action-card { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1983 / 793 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; color: transparent !important; background-color: transparent !important; box-shadow: none !important; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.24)) !important; } html body:not(.maintenance-mode) #battle #cards .action-card.attack, html body:not(.maintenance-mode) #cards .action-card.attack { background: var(--action-attack-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards .action-card.defend, html body:not(.maintenance-mode) #cards .action-card.defend { background: var(--action-defend-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards .action-card.charge, html body:not(.maintenance-mode) #cards .action-card.charge { background: var(--action-charge-panel-art) center center / 100% 100% 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, html body:not(.maintenance-mode) #battle #cards .action-card span, html body:not(.maintenance-mode) #cards .action-card span { content: none !important; display: none !important; opacity: 0 !important; background: none !important; -webkit-mask: none !important; mask: none !important; box-shadow: none !important; } /* V1.27Beta-battleframe2-eof: true final override for the 1v1 battle combatant frame. */ html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters { --combatant-frame-pad-x: clamp(24px, 2.3vw, 38px); --combatant-frame-pad-y: clamp(24px, 3.1dvh, 38px); --fighter-gap: clamp(18px, 2vw, 34px); --fighter-inner-gap: clamp(10px, 1vw, 15px); --fighter-panel-w: clamp(132px, 10.8vw, 184px); --fighter-card-w: clamp(218px, 17.2vw, 286px); --fighter-card-h: clamp(372px, 48dvh, 508px); --versus-size: clamp(48px, 6dvh, 62px); --combatant-w: calc(var(--fighter-panel-w) + var(--fighter-card-w) + var(--fighter-inner-gap) + var(--combatant-frame-pad-x) * 2); width: min(100%, calc(var(--combatant-w) * 2 + var(--versus-size) + var(--fighter-gap) * 2)) !important; min-height: 0 !important; height: auto !important; margin: clamp(8px, 1.1dvh, 14px) auto 0 !important; padding: 0 !important; grid-template-columns: minmax(0, var(--combatant-w)) var(--versus-size) minmax(0, var(--combatant-w)) !important; gap: var(--fighter-gap) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { position: relative !important; isolation: isolate !important; width: var(--combatant-w) !important; height: auto !important; min-height: calc(var(--fighter-card-h) + var(--combatant-frame-pad-y) * 2) !important; padding: var(--combatant-frame-pad-y) var(--combatant-frame-pad-x) !important; gap: var(--fighter-inner-gap) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant { grid-template-columns: var(--fighter-panel-w) minmax(0, var(--fighter-card-w)) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { grid-template-columns: minmax(0, var(--fighter-card-w)) var(--fighter-panel-w) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; border: 1px solid rgba(169, 196, 216, 0.68) !important; border-radius: 22px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 255, 0.9) 54%, rgba(226, 240, 250, 0.86)) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::after, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::after { content: "" !important; display: block !important; position: absolute !important; inset: clamp(7px, 0.8vw, 11px) !important; z-index: 1 !important; pointer-events: none !important; border-radius: 17px !important; box-shadow: inset 0 0 0 1px rgba(151, 185, 210, 0.42), inset 0 0 0 2px rgba(255, 255, 255, 0.2) !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant > * { position: relative !important; z-index: 3 !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel { height: auto !important; min-height: var(--fighter-card-h) !important; max-height: none !important; overflow: visible !important; clip-path: none !important; contain: none !important; } *** End of File /* V1.27Beta-battleframe2-final: final 1v1 combatant frame lock, after all older patches. */ html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters { --combatant-frame-pad-x: clamp(24px, 2.3vw, 38px); --combatant-frame-pad-y: clamp(24px, 3.1dvh, 38px); --fighter-gap: clamp(18px, 2vw, 34px); --fighter-inner-gap: clamp(10px, 1vw, 15px); --fighter-panel-w: clamp(132px, 10.8vw, 184px); --fighter-card-w: clamp(218px, 17.2vw, 286px); --fighter-card-h: clamp(372px, 48dvh, 508px); --versus-size: clamp(48px, 6dvh, 62px); --combatant-w: calc(var(--fighter-panel-w) + var(--fighter-card-w) + var(--fighter-inner-gap) + var(--combatant-frame-pad-x) * 2); box-sizing: border-box !important; width: min(100%, calc(var(--combatant-w) * 2 + var(--versus-size) + var(--fighter-gap) * 2)) !important; min-height: 0 !important; height: auto !important; margin: clamp(8px, 1.1dvh, 14px) auto 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, var(--combatant-w)) var(--versus-size) minmax(0, var(--combatant-w)) !important; align-items: center !important; justify-content: center !important; justify-items: center !important; gap: var(--fighter-gap) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { box-sizing: border-box !important; position: relative !important; isolation: isolate !important; width: var(--combatant-w) !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: calc(var(--fighter-card-h) + var(--combatant-frame-pad-y) * 2) !important; padding: var(--combatant-frame-pad-y) var(--combatant-frame-pad-x) !important; display: grid !important; gap: var(--fighter-inner-gap) !important; align-items: stretch !important; justify-items: stretch !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant { grid-template-columns: var(--fighter-panel-w) minmax(0, var(--fighter-card-w)) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { grid-template-columns: minmax(0, var(--fighter-card-w)) var(--fighter-panel-w) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; border: 1px solid rgba(169, 196, 216, 0.68) !important; border-radius: 22px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 255, 0.9) 54%, rgba(226, 240, 250, 0.86)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), inset 0 14px 28px rgba(255, 255, 255, 0.42), 0 14px 28px rgba(8, 26, 44, 0.18) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::after, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::after { content: "" !important; display: block !important; position: absolute !important; inset: clamp(7px, 0.8vw, 11px) !important; z-index: 1 !important; pointer-events: none !important; border-radius: 17px !important; background: linear-gradient(rgba(106, 150, 184, 0.68) 0 0) left top / 72px 2px no-repeat, linear-gradient(rgba(106, 150, 184, 0.68) 0 0) right top / 72px 2px no-repeat, linear-gradient(rgba(106, 150, 184, 0.56) 0 0) left bottom / 72px 2px no-repeat, linear-gradient(rgba(106, 150, 184, 0.56) 0 0) right bottom / 72px 2px no-repeat, linear-gradient(rgba(106, 150, 184, 0.62) 0 0) left top / 2px 64px no-repeat, linear-gradient(rgba(106, 150, 184, 0.62) 0 0) right top / 2px 64px no-repeat, linear-gradient(rgba(106, 150, 184, 0.5) 0 0) left bottom / 2px 64px no-repeat, linear-gradient(rgba(106, 150, 184, 0.5) 0 0) right bottom / 2px 64px no-repeat !important; box-shadow: inset 0 0 0 1px rgba(151, 185, 210, 0.36), inset 0 0 0 2px rgba(255, 255, 255, 0.18) !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant > * { position: relative !important; z-index: 3 !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel { box-sizing: border-box !important; height: auto !important; min-height: var(--fighter-card-h) !important; max-height: none !important; overflow: visible !important; clip-path: none !important; contain: none !important; } /* V1.27Beta-battleframe2: each combatant owns the white backing frame; the stage itself does not draw or clip a frame. */ 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; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) { overflow-x: visible !important; overflow-y: auto !important; padding-bottom: clamp(78px, 9dvh, 112px) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters { --combatant-frame-pad-x: clamp(24px, 2.3vw, 38px); --combatant-frame-pad-y: clamp(24px, 3.1dvh, 38px); --fighter-gap: clamp(18px, 2vw, 34px); --fighter-inner-gap: clamp(10px, 1vw, 15px); --fighter-panel-w: clamp(132px, 10.8vw, 184px); --fighter-card-w: clamp(218px, 17.2vw, 286px); --fighter-card-h: clamp(372px, 48dvh, 508px); --versus-size: clamp(48px, 6dvh, 62px); --combatant-content-w: calc(var(--fighter-panel-w) + var(--fighter-card-w) + var(--fighter-inner-gap)); --combatant-w: calc(var(--combatant-content-w) + var(--combatant-frame-pad-x) * 2); box-sizing: border-box !important; width: min(100%, calc(var(--combatant-w) * 2 + var(--versus-size) + var(--fighter-gap) * 2)) !important; min-height: 0 !important; height: auto !important; margin: clamp(8px, 1.1dvh, 14px) auto 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, var(--combatant-w)) var(--versus-size) minmax(0, var(--combatant-w)) !important; align-items: center !important; justify-content: center !important; justify-items: center !important; gap: var(--fighter-gap) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { box-sizing: border-box !important; position: relative !important; isolation: isolate !important; width: var(--combatant-w) !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: calc(var(--fighter-card-h) + var(--combatant-frame-pad-y) * 2) !important; padding: var(--combatant-frame-pad-y) var(--combatant-frame-pad-x) !important; display: grid !important; gap: var(--fighter-inner-gap) !important; align-items: stretch !important; justify-items: stretch !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant { grid-template-columns: var(--fighter-panel-w) minmax(0, var(--fighter-card-w)) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { grid-template-columns: minmax(0, var(--fighter-card-w)) var(--fighter-panel-w) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; border: 1px solid rgba(169, 196, 216, 0.68) !important; border-radius: 22px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 255, 0.9) 54%, rgba(226, 240, 250, 0.86)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), inset 0 14px 28px rgba(255, 255, 255, 0.42), 0 14px 28px rgba(8, 26, 44, 0.18) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::after, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::after { content: "" !important; display: block !important; position: absolute !important; inset: clamp(7px, 0.8vw, 11px) !important; z-index: 1 !important; pointer-events: none !important; border-radius: 17px !important; background: linear-gradient(rgba(106, 150, 184, 0.68) 0 0) left top / 72px 2px no-repeat, linear-gradient(rgba(106, 150, 184, 0.68) 0 0) right top / 72px 2px no-repeat, linear-gradient(rgba(106, 150, 184, 0.56) 0 0) left bottom / 72px 2px no-repeat, linear-gradient(rgba(106, 150, 184, 0.56) 0 0) right bottom / 72px 2px no-repeat, linear-gradient(rgba(106, 150, 184, 0.62) 0 0) left top / 2px 64px no-repeat, linear-gradient(rgba(106, 150, 184, 0.62) 0 0) right top / 2px 64px no-repeat, linear-gradient(rgba(106, 150, 184, 0.5) 0 0) left bottom / 2px 64px no-repeat, linear-gradient(rgba(106, 150, 184, 0.5) 0 0) right bottom / 2px 64px no-repeat !important; box-shadow: inset 0 0 0 1px rgba(151, 185, 210, 0.36), inset 0 0 0 2px rgba(255, 255, 255, 0.18) !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant > * { position: relative !important; z-index: 3 !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel { box-sizing: border-box !important; height: auto !important; min-height: var(--fighter-card-h) !important; max-height: none !important; overflow: visible !important; clip-path: none !important; contain: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter { border-radius: 12px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel { align-content: start !important; overflow-y: visible !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters { --combatant-frame-pad-x: 10px; --combatant-frame-pad-y: 12px; --fighter-panel-w: clamp(88px, 26vw, 112px); --fighter-card-w: minmax(0, 1fr); --fighter-card-h: clamp(268px, 42dvh, 388px); --combatant-w: 100%; width: 100% !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto var(--versus-size) auto !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { width: 100% !important; } } /* V1.27Beta-circlefix3: stop stray select glow plates, pin preview lock below card, and turn desktop battle libraries into rounded icons. */ 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; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview { overflow: visible !important; pointer-events: auto !important; z-index: 240 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview .preview-copy { overflow: visible !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #lockCharacter { position: absolute !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(-76px, -7.6vh, -58px) !important; z-index: 320 !important; width: min(260px, calc(100vw - 48px)) !important; min-width: 0 !important; height: clamp(46px, 5.6vh, 56px) !important; min-height: clamp(46px, 5.6vh, 56px) !important; max-height: clamp(46px, 5.6vh, 56px) !important; display: inline-grid !important; place-items: center !important; transform: translateX(-50%) !important; pointer-events: auto !important; cursor: pointer !important; border-radius: 14px !important; clip-path: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #lockCharacter::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #lockCharacter::after { pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-preview-backdrop { z-index: 120 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip { inline-size: fit-content !important; width: fit-content !important; min-width: 0 !important; max-width: min(96px, 100%) !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; justify-items: start !important; gap: 0 !important; margin: 0 !important; padding: 0 7px 1px 3px !important; border-left-width: 1px !important; text-align: left !important; text-indent: 0 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip .skill-inline-icon, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip .skill-inline-icon, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip .skill-inline-icon { display: none !important; width: 0 !important; margin: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip .skill-inline-text, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip .skill-inline-text, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip .skill-inline-text { display: inline !important; margin: 0 !important; padding: 0 !important; } html body:not(.maintenance-mode) #codexOpenArtifact.game-codex-card, html body:not(.maintenance-mode) #gameCodexDialog #codexOpenArtifact { background: linear-gradient(180deg, rgba(3, 5, 10, 0.22), rgba(3, 5, 10, 0.58) 66%, rgba(3, 5, 10, 0.78)), url("assets/ui/codex-card-artifact-relicvault-actual-artifacts-v1.png?v=V1.27Beta-codex-artifact-card") center / cover no-repeat !important; border-color: rgba(246, 200, 95, 0.64) !important; box-shadow: inset 0 0 0 1px rgba(255, 246, 208, 0.16), 0 18px 34px rgba(29, 18, 4, 0.34), 0 0 24px rgba(246, 200, 95, 0.16) !important; } html body:not(.maintenance-mode) #codexOpenArtifact.game-codex-card > span, html body:not(.maintenance-mode) #codexOpenArtifact.game-codex-card > small { color: #fff6d7 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.86), 0 0 12px rgba(246, 200, 95, 0.34) !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #battle .battle-libraries { box-sizing: border-box !important; width: auto !important; min-width: 0 !important; max-width: none !important; display: inline-flex !important; grid-template-columns: none !important; grid-auto-flow: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #battle .battle-libraries > button.library-action, html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle.library-action, html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle.library-action { --library-icon-art: none; box-sizing: border-box !important; width: clamp(58px, 5.6vh, 68px) !important; min-width: clamp(58px, 5.6vh, 68px) !important; max-width: clamp(58px, 5.6vh, 68px) !important; height: clamp(58px, 5.6vh, 68px) !important; min-height: clamp(58px, 5.6vh, 68px) !important; max-height: clamp(58px, 5.6vh, 68px) !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; border: 1px solid rgba(255, 246, 208, 0.42) !important; border-radius: 16px !important; clip-path: none !important; overflow: hidden !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 42%, rgba(0, 0, 0, 0.34)), var(--library-icon-art) center / cover no-repeat !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 -18px 28px rgba(0, 0, 0, 0.32), 0 10px 20px rgba(0, 0, 0, 0.28), 0 0 18px color-mix(in srgb, var(--library-glow, #f6c85f) 24%, transparent) !important; text-indent: -9999px !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle.library-action { --library-icon-art: url("assets/ui/library-opportunity-button-fatecards-gpt2.png?v=1.7-library-button"); --library-glow: #4ecdc4; } html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle.library-action { --library-icon-art: url("assets/ui/library-artifact-button-relicvault-gpt2.png?v=1.7-library-button"); --library-glow: #f6c85f; } html body:not(.maintenance-mode) #battle .battle-libraries > button.library-action > span, html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle.library-action > span, html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle.library-action > span { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #battle .battle-libraries > button.library-action:hover:not(:disabled), html body:not(.maintenance-mode) #battle .battle-libraries > button.library-action:focus-visible:not(:disabled) { transform: translateY(-2px) !important; border-color: rgba(255, 244, 207, 0.78) !important; filter: brightness(1.08) saturate(1.08) !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #lockCharacter { bottom: -58px !important; width: min(220px, calc(100vw - 40px)) !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; } } /* V1.27Beta-battleframe1: 1v1 battle uses one safe stage frame; cards/status are no longer decorative-frame containers. */ html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) { box-sizing: border-box !important; width: min(1420px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; min-height: calc(100dvh - 108px) !important; height: auto !important; margin-inline: auto !important; padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.4vw, 20px) clamp(74px, 10dvh, 118px) !important; display: grid !important; grid-template-rows: auto minmax(0, auto) auto auto auto !important; align-content: start !important; justify-items: center !important; gap: clamp(10px, 1.4dvh, 18px) !important; overflow-x: hidden !important; overflow-y: auto !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden])::before { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; background: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .battle-status.status-line { box-sizing: border-box !important; width: min(960px, 100%) !important; min-height: 54px !important; display: grid !important; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important; align-items: center !important; gap: clamp(8px, 1.4vw, 16px) !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .battle-status.status-line > span, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .battle-status.status-line > strong { min-width: 0 !important; max-width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters { --battle-stage-pad-x: clamp(42px, 4.5vw, 78px); --battle-stage-pad-y: clamp(38px, 5.8dvh, 70px); --fighter-gap: clamp(18px, 2.2vw, 38px); --fighter-inner-gap: clamp(9px, 1vw, 14px); --combatant-pad: 0px; --combatant-frame-outset-x: 0px; --combatant-frame-outset-y: 0px; --fighter-panel-w: clamp(128px, 10.6vw, 178px); --fighter-card-w: clamp(218px, 17.8vw, 288px); --fighter-card-h: clamp(430px, 55dvh, 548px); --versus-size: clamp(50px, 6.4dvh, 64px); --combatant-w: calc(var(--fighter-panel-w) + var(--fighter-card-w) + var(--fighter-inner-gap)); box-sizing: border-box !important; position: relative !important; isolation: isolate !important; width: min(100%, calc(var(--combatant-w) * 2 + var(--versus-size) + var(--fighter-gap) * 2 + var(--battle-stage-pad-x) * 2)) !important; min-height: calc(var(--fighter-card-h) + var(--battle-stage-pad-y) * 2) !important; height: auto !important; margin: 0 auto !important; padding: var(--battle-stage-pad-y) var(--battle-stage-pad-x) !important; display: grid !important; grid-template-columns: minmax(0, var(--combatant-w)) var(--versus-size) minmax(0, var(--combatant-w)) !important; align-items: center !important; justify-content: center !important; justify-items: center !important; gap: var(--fighter-gap) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; opacity: 0.96 !important; background: var(--arcane-panel-frame) center center / 100% 100% no-repeat !important; filter: drop-shadow(0 0 16px rgba(117, 212, 255, 0.18)) drop-shadow(0 24px 42px rgba(0, 0, 0, 0.42)) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::after { content: "" !important; display: block !important; position: absolute !important; inset: clamp(36px, 5.1dvh, 62px) clamp(34px, 4.4vw, 72px) !important; z-index: 1 !important; pointer-events: none !important; border: 1px solid rgba(142, 209, 238, 0.24) !important; border-radius: clamp(14px, 1.8vw, 24px) !important; background: radial-gradient(ellipse at 50% 4%, rgba(122, 215, 255, 0.12), transparent 42%), linear-gradient(180deg, rgba(9, 17, 26, 0.7), rgba(4, 8, 14, 0.56) 54%, rgba(2, 4, 8, 0.74)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 20px 42px rgba(255, 255, 255, 0.035), inset 0 -30px 54px rgba(0, 0, 0, 0.24) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters > * { position: relative !important; z-index: 2 !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { box-sizing: border-box !important; width: 100% !important; height: var(--fighter-card-h) !important; min-height: 0 !important; padding: 0 !important; display: grid !important; align-items: stretch !important; gap: var(--fighter-inner-gap) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; isolation: isolate !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant { grid-template-columns: var(--fighter-panel-w) minmax(0, var(--fighter-card-w)) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { grid-template-columns: minmax(0, var(--fighter-card-w)) var(--fighter-panel-w) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::after, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel { box-sizing: border-box !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: clamp(8px, 1dvh, 12px) !important; gap: clamp(6px, 0.75dvh, 9px) !important; border: 1px solid color-mix(in srgb, var(--fighter-accent) 40%, rgba(115, 158, 190, 0.34)) !important; border-radius: 12px !important; background: linear-gradient(180deg, rgba(255, 244, 207, 0.055), transparent 22%), linear-gradient(145deg, rgba(12, 18, 26, 0.94), rgba(5, 8, 13, 0.92)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 0 26px color-mix(in srgb, var(--fighter-accent) 9%, transparent), 0 14px 28px rgba(0, 0, 0, 0.24) !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter { --card-frame-outset-x: 8px; --card-frame-outset-y: 8px; box-sizing: border-box !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: clamp(8px, 1dvh, 12px) !important; gap: clamp(6px, 0.8dvh, 10px) !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; border: 1px solid color-mix(in srgb, var(--fighter-accent) 48%, rgba(116, 158, 190, 0.34)) !important; border-radius: 12px !important; background: linear-gradient(180deg, rgba(255, 244, 207, 0.07), transparent 20%), linear-gradient(145deg, rgba(18, 23, 32, 0.96), rgba(6, 9, 15, 0.97)) !important; background-color: rgba(8, 11, 17, 0.96) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), inset 0 0 34px color-mix(in srgb, var(--fighter-accent) 12%, transparent), 0 16px 32px rgba(0, 0, 0, 0.3) !important; overflow: visible !important; isolation: isolate !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter::before { content: "" !important; display: block !important; position: absolute !important; inset: 6px !important; z-index: 0 !important; pointer-events: none !important; border: 1px solid color-mix(in srgb, var(--fighter-accent) 18%, transparent) !important; border-radius: 9px !important; background: linear-gradient(90deg, color-mix(in srgb, var(--fighter-accent) 10%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--fighter-accent) 8%, transparent)), linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 26%, rgba(0, 0, 0, 0.12)) !important; opacity: 0.88 !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter.inspectable::after, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter.target-candidate::after, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter.selected-target::after { content: "" !important; display: block !important; position: absolute !important; inset: calc(var(--card-frame-outset-y) * -1) calc(var(--card-frame-outset-x) * -1) !important; z-index: 16 !important; pointer-events: none !important; border-radius: 14px !important; background: linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) left top / 36px 2px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) right top / 36px 2px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) left bottom / 36px 2px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) right bottom / 36px 2px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) left top / 2px 30px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) right top / 2px 30px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) left bottom / 2px 30px no-repeat, linear-gradient(var(--outer-frame-line, rgba(130, 232, 255, 0.82)) 0 0) right bottom / 2px 30px no-repeat !important; opacity: 0.84 !important; filter: drop-shadow(0 0 8px var(--position-frame-glow, rgba(130, 232, 255, 0.3))) !important; animation: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter > * { position: relative !important; z-index: 3 !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-head, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .role-card { border-radius: 8px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .character-face { min-height: 0 !important; height: 100% !important; border-radius: 10px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .avatar { min-height: 0 !important; border-radius: 10px 10px 0 0 !important; overflow: hidden !important; clip-path: inset(0 round 10px 10px 0 0) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .role-card { min-height: clamp(42px, 5.2dvh, 52px) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .versus { z-index: 4 !important; align-self: center !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) { width: 100% !important; max-width: 100% !important; min-height: 100dvh !important; padding: 8px 8px 92px !important; gap: 8px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .battle-status.status-line { width: 100% !important; min-height: 48px !important; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important; padding: 7px 9px !important; gap: 7px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters { --battle-stage-pad-x: 12px; --battle-stage-pad-y: 22px; --fighter-gap: 8px; --fighter-inner-gap: 6px; --fighter-panel-w: clamp(88px, 26vw, 112px); --fighter-card-w: minmax(0, 1fr); --fighter-card-h: clamp(268px, 42dvh, 388px); --versus-size: 40px; width: 100% !important; min-height: 0 !important; padding: var(--battle-stage-pad-y) var(--battle-stage-pad-x) !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto var(--versus-size) auto !important; align-items: stretch !important; gap: 8px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::after { inset: 14px 8px !important; border-radius: 14px !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { width: 100% !important; height: var(--fighter-card-h) !important; min-height: var(--fighter-card-h) !important; gap: var(--fighter-inner-gap) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant { grid-template-columns: var(--fighter-panel-w) minmax(0, 1fr) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { grid-template-columns: minmax(0, 1fr) var(--fighter-panel-w) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel { padding: 6px !important; gap: 5px !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter { padding: 6px !important; gap: 5px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .versus { width: var(--versus-size) !important; height: var(--versus-size) !important; justify-self: center !important; } } /* V1.27Beta-roomdesign1: complete room-lobby layout pass across all room modes. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) { width: min(1220px, calc(100vw - 48px)) !important; max-width: calc(100vw - 48px) !important; height: min(690px, calc(100dvh - 78px)) !important; min-height: min(620px, calc(100dvh - 78px)) !important; max-height: calc(100dvh - 78px) !important; padding: clamp(14px, 2vh, 24px) clamp(24px, 3vw, 42px) clamp(96px, 12vh, 132px) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto minmax(0, 1fr) !important; align-content: stretch !important; justify-content: center !important; gap: clamp(14px, 2vh, 24px) !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-lobby-head { width: min(760px, 100%) !important; max-width: 100% !important; margin: 0 auto !important; padding: clamp(12px, 1.5vh, 16px) clamp(18px, 2.2vw, 28px) !important; display: grid !important; gap: 6px !important; justify-items: center !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .identity-rules:not([hidden]) { width: min(900px, 100%) !important; max-width: 100% !important; margin: 0 auto !important; max-height: clamp(72px, 12vh, 118px) !important; overflow-y: auto !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat-grid { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-width: min(1120px, 100%) !important; margin: 0 auto !important; padding: clamp(8px, 1.2vh, 14px) clamp(6px, 1vw, 12px) 0 !important; display: grid !important; align-items: stretch !important; justify-items: stretch !important; justify-content: center !important; align-content: center !important; gap: clamp(20px, 3vh, 34px) clamp(18px, 2.4vw, 30px) !important; overflow: visible !important; transform: none !important; z-index: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="1v1"] .room-seat-grid { grid-template-columns: minmax(260px, 1fr) clamp(56px, 6vw, 84px) minmax(260px, 1fr) !important; max-width: min(900px, 100%) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="2v2"] .room-seat-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)) clamp(54px, 5vw, 76px) repeat(2, minmax(190px, 1fr)) !important; max-width: min(1120px, 100%) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="3v3"] .room-seat-grid { grid-template-columns: repeat(3, minmax(190px, 1fr)) !important; grid-auto-rows: minmax(142px, auto) !important; max-width: min(1080px, 100%) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-seat-grid { grid-template-columns: repeat(5, minmax(150px, 1fr)) !important; grid-auto-rows: minmax(118px, auto) !important; max-width: min(1180px, 100%) !important; gap: clamp(14px, 2vh, 22px) clamp(14px, 1.7vw, 22px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-team-versus { align-self: center !important; justify-self: center !important; min-width: clamp(46px, 5vw, 70px) !important; height: clamp(38px, 5vh, 54px) !important; display: grid !important; place-items: center !important; border-radius: 999px !important; color: #fff4cf !important; font-size: clamp(15px, 1.9vw, 22px) !important; font-weight: 950 !important; background: rgba(5, 9, 14, 0.56) !important; box-shadow: inset 0 0 0 1px rgba(255, 244, 207, 0.22), 0 0 22px rgba(246, 200, 95, 0.18) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="3v3"] .room-team-versus { grid-column: 1 / -1 !important; width: clamp(74px, 8vw, 104px) !important; height: 36px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat { width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: clamp(154px, 19vh, 218px) !important; max-height: none !important; padding: clamp(22px, 2.8vh, 34px) clamp(18px, 2.2vw, 30px) clamp(20px, 2.4vh, 30px) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(46px, auto) auto !important; align-content: center !important; justify-items: center !important; gap: clamp(12px, 1.7vh, 20px) !important; box-sizing: border-box !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-seat { min-height: clamp(118px, 15vh, 158px) !important; padding: clamp(17px, 2vh, 24px) clamp(14px, 1.6vw, 22px) clamp(15px, 1.8vh, 22px) !important; grid-template-rows: minmax(38px, auto) auto !important; gap: clamp(8px, 1.2vh, 12px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat > .room-seat-identity { position: static !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 42px !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(7px, 1vw, 12px) !important; transform: none !important; font-size: clamp(17px, 1.9vw, 23px) !important; line-height: 1.12 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-seat > .room-seat-identity { min-height: 34px !important; font-size: clamp(13px, 1.35vw, 16px) !important; column-gap: 6px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat .room-seat-slot, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat .room-seat-person, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat .room-seat-person .player-name, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat .room-seat-person .player-name-text { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: inherit !important; line-height: inherit !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat .room-seat-separator { width: auto !important; min-width: 8px !important; color: rgba(255, 244, 207, 0.64) !important; font-size: inherit !important; line-height: inherit !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat-actions { position: static !important; width: 100% !important; height: auto !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat-action { width: auto !important; min-width: clamp(102px, 9vw, 128px) !important; max-width: 100% !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 clamp(14px, 1.6vw, 22px) !important; font-size: clamp(12px, 1.2vw, 14px) !important; line-height: 1 !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) { width: calc(100vw - 18px) !important; max-width: calc(100vw - 18px) !important; min-height: calc(100dvh - 76px) !important; height: auto !important; max-height: none !important; padding: 10px 0 calc(max(112px, 16px + env(safe-area-inset-bottom)) + 8px) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; overflow-y: auto !important; overflow-x: visible !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat-grid, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-seat-grid { position: relative !important; left: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 8px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; gap: 10px !important; transform: none !important; overflow: visible !important; z-index: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="1v1"] .room-seat-grid { grid-template-columns: minmax(0, 1fr) !important; max-width: min(360px, 100%) !important; margin-inline: auto !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-team-versus { grid-column: 1 / -1 !important; justify-self: center !important; min-width: 68px !important; height: 28px !important; display: grid !important; place-items: center !important; border-radius: 999px !important; color: #fff4cf !important; background: rgba(5, 9, 14, 0.58) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-seat { position: relative !important; min-height: 104px !important; height: auto !important; padding: 14px 10px 12px !important; display: grid !important; align-content: center !important; gap: 8px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat > .room-seat-identity, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-seat > .room-seat-identity { position: static !important; width: 100% !important; max-width: 100% !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: 4px !important; transform: none !important; font-size: 12px !important; line-height: 1.05 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat-actions, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-seat-actions { position: static !important; width: 100% !important; height: auto !important; min-height: 28px !important; display: flex !important; justify-content: center !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby .room-seat-action, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] .room-seat-action { width: auto !important; min-width: 76px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; padding: 0 10px !important; font-size: 11px !important; } } /* V1.27Beta-roomdesign1: character select moves higher and the backing plate no longer reads as a square glow. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { top: calc(50dvh - 22px) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::after { inset: clamp(82px, 11.5vh, 132px) clamp(82px, 6.6vw, 122px) clamp(76px, 10.4vh, 122px) !important; border-radius: clamp(28px, 3.2vw, 46px) !important; clip-path: inset(0 round clamp(28px, 3.2vw, 46px)) !important; opacity: 0.72 !important; background: linear-gradient(180deg, rgba(242, 247, 251, 0.82), rgba(230, 240, 248, 0.76) 58%, rgba(214, 231, 244, 0.72)) !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select::after, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::before { content: none !important; display: none !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; } } /* V1.27Beta-roomdesign2: desktop character-select frame centers on the two-row card matrix. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { top: 50dvh !important; transform: translate(-50%, -50%) !important; place-items: center !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { align-self: center !important; justify-self: center !important; } } /* V1.27Beta: battle deck library buttons are rounded instead of cut-corner plates. */ html body:not(.maintenance-mode) #battle .battle-libraries > button.library-action, html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle.library-action, html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle.library-action { border-radius: 14px !important; clip-path: none !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .battle-libraries > button.library-action::before, html body:not(.maintenance-mode) #battle .battle-libraries > button.library-action::after, html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle.library-action::before, html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle.library-action::after, html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle.library-action::before, html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle.library-action::after { border-radius: inherit !important; clip-path: none !important; } /* V1.27Beta: desktop character-select white field is taller so cards sit on the field, not the frame. */ @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(104px, 12.8vh, 178px) !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 - 10px)) !important; max-height: calc(100dvh - 10px) !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; place-items: center !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { justify-self: center !important; align-self: center !important; } } /* V1.27Beta: thumbnail normal skill badges size to their text instead of using the special-mode badge width. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .skill-tip:not(.mode-tip) { width: fit-content !important; inline-size: fit-content !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: min(106px, 100%) !important; max-inline-size: min(106px, 100%) !important; height: 23px !important; min-height: 23px !important; max-height: 23px !important; padding: 0 7px 1px 8px !important; justify-self: start !important; align-self: start !important; justify-content: center !important; justify-items: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .skill-tip:not(.mode-tip) { max-width: min(96px, 100%) !important; max-inline-size: min(96px, 100%) !important; height: clamp(20px, 5.6vw, 23px) !important; min-height: clamp(20px, 5.6vw, 23px) !important; max-height: clamp(20px, 5.6vw, 23px) !important; padding: 0 6px 1px 7px !important; } } /* V1.27Beta: expanded character-preview skill badges should hug the skill name text. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewSkill.preview-skill-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden]) { width: fit-content !important; inline-size: fit-content !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: min(220px, 100%) !important; max-inline-size: min(220px, 100%) !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; justify-self: start !important; gap: 6px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewSkill.preview-skill-tip .skill-inline-text, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden]) .skill-inline-text { width: auto !important; min-width: 0 !important; max-width: min(164px, 42vw) !important; flex: 0 1 auto !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewSkill.preview-skill-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden]) { max-width: min(170px, 58vw) !important; max-inline-size: min(170px, 58vw) !important; padding-left: 7px !important; padding-right: 8px !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewSkill.preview-skill-tip .skill-inline-text, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden]) .skill-inline-text { max-width: min(128px, 46vw) !important; } } /* V1.27Beta: special-mode dialog opens on the closed portrait, with matching rounded crop and grey current-state buttons. */ html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-art { box-sizing: border-box !important; border-radius: 10px !important; background-repeat: no-repeat !important; background-size: var(--special-mode-art-size, cover) !important; background-position: var(--special-mode-art-position, 50% 50%) !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="false"]:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-art { border-radius: 10px !important; clip-path: inset(0 round 10px) !important; overflow: hidden !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="false"]:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-art::before, html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-preview-mode-active="false"]:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-art::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-actions > button.selected, html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-actions > button:disabled { color: #eef1f5 !important; -webkit-text-fill-color: currentColor !important; border-color: rgba(205, 214, 226, 0.66) !important; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.42), transparent 56%), linear-gradient(180deg, rgba(178, 188, 202, 0.72), rgba(92, 102, 118, 0.72) 58%, rgba(35, 40, 50, 0.82)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -2px 0 rgba(0, 0, 0, 0.26), 0 5px 12px rgba(0, 0, 0, 0.18) !important; filter: grayscale(0.28) saturate(0.78) !important; opacity: 0.96 !important; } html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-actions > button:disabled { cursor: default !important; } /* V1.27Beta: absolute final lock against persistent shimmer circles. One-shot VFX still come from JS events. */ html body:not(.maintenance-mode) .card-vfx-idle, html body:not(.maintenance-mode) .card-vfx-playable { animation: none !important; } html body:not(.maintenance-mode) .card-vfx-idle::before, html body:not(.maintenance-mode) .card-vfx-idle::after, html body:not(.maintenance-mode) .card-vfx-playable::before, html body:not(.maintenance-mode) .card-vfx-playable::after, html body:not(.maintenance-mode) .card-vfx-hover::before, html body:not(.maintenance-mode) .card-vfx-hover::after { content: none !important; display: none !important; opacity: 0 !important; visibility: hidden !important; animation: none !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #fxLayer .screen-flash { pointer-events: none !important; } /* V1.27Beta-circlefix2: remove residual click/status/screen circle flashes. */ html body:not(.maintenance-mode) .button-spark, html body:not(.maintenance-mode) #fxLayer .screen-flash { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #battle #cards .action-card, html body:not(.maintenance-mode) #cards .action-card { animation: none !important; } /* V1.27Beta-circlefix2: desktop character-select backing must fully sit behind both card rows. */ @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(124px, 16.8vh, 236px) !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 - 8px)) !important; max-height: calc(100dvh - 8px) !important; padding-top: var(--select-frame-inner-y) !important; padding-bottom: var(--select-frame-inner-y) !important; isolation: isolate !important; overflow: hidden !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::after { content: "" !important; display: block !important; position: absolute !important; z-index: 0 !important; pointer-events: none !important; inset: clamp(60px, 8.4vh, 96px) clamp(70px, 5.9vw, 108px) clamp(60px, 8.4vh, 96px) !important; border-radius: clamp(14px, 1.7vw, 24px) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 255, 0.95) 54%, rgba(232, 244, 255, 0.9)) !important; box-shadow: inset 0 0 0 1px rgba(180, 207, 226, 0.58), inset 0 18px 34px rgba(255, 255, 255, 0.5), 0 8px 18px rgba(18, 62, 94, 0.08) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll { position: relative !important; z-index: 2 !important; overflow-x: hidden !important; overflow-y: auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { position: relative !important; z-index: 2 !important; } } /* V1.27Beta-roompolish1: room lobby removes circle overlays, swaps Start/Return, and uses taller action buttons. */ html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby::after { content: "" !important; display: block !important; visibility: visible !important; opacity: 0.42 !important; animation: none !important; background: repeating-linear-gradient(90deg, rgba(119, 211, 255, 0.04) 0 1px, transparent 1px 54px), repeating-linear-gradient(0deg, rgba(236, 210, 138, 0.032) 0 1px, transparent 1px 48px), linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%, rgba(3, 10, 20, 0.14)) !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby .card-vfx-hover, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby .card-vfx-press, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby .card-vfx-playable, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby .card-vfx-idle { animation: none !important; box-shadow: none !important; filter: none !important; transform: none !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 58px !important; grid-auto-rows: 58px !important; width: min(760px, calc(100vw - 64px)) !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; gap: 10px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button:not(#copyRoomLobby) { height: 58px !important; min-height: 58px !important; max-height: 58px !important; padding: 0 18px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { grid-column: 1 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby { grid-column: 2 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby { grid-column: 3 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#startGame { grid-column: 4 !important; grid-row: 1 !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: 42px 42px !important; grid-auto-rows: 42px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button:not(#copyRoomLobby) { height: 42px !important; min-height: 42px !important; max-height: 42px !important; padding: 0 12px !important; font-size: 12px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { grid-column: 1 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby { grid-column: 2 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby { grid-column: 1 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#startGame { grid-column: 2 !important; grid-row: 2 !important; } } /* V1.27Beta-roompolish1: desktop character-select frame nudges upward and drops the stray white glow. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select::after { content: none !important; display: none !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout { top: calc(50dvh - 9px) !important; transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::after { opacity: 0.88 !important; background: linear-gradient(180deg, rgba(249, 252, 255, 0.94), rgba(239, 246, 251, 0.92) 55%, rgba(226, 239, 249, 0.9)) !important; box-shadow: inset 0 0 0 1px rgba(159, 191, 214, 0.42), inset 0 10px 18px rgba(255, 255, 255, 0.22) !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app .arena::after { background: linear-gradient(90deg, rgba(4, 13, 25, 0.28), transparent 22% 78%, rgba(4, 13, 25, 0.3)), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30% 72%, rgba(3, 10, 20, 0.34)) !important; } } /* V1.27Beta-battleframe2-tail: true final 1v1 battle combatant frame, after the old battleframe block. */ html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters { --combatant-frame-pad-x: clamp(24px, 2.3vw, 38px); --combatant-frame-pad-y: clamp(24px, 3.1dvh, 38px); --fighter-gap: clamp(18px, 2vw, 34px); --fighter-inner-gap: clamp(10px, 1vw, 15px); --fighter-panel-w: clamp(132px, 10.8vw, 184px); --fighter-card-w: clamp(218px, 17.2vw, 286px); --fighter-card-h: clamp(372px, 48dvh, 508px); --versus-size: clamp(48px, 6dvh, 62px); --combatant-w: calc(var(--fighter-panel-w) + var(--fighter-card-w) + var(--fighter-inner-gap) + var(--combatant-frame-pad-x) * 2); width: min(100%, calc(var(--combatant-w) * 2 + var(--versus-size) + var(--fighter-gap) * 2)) !important; min-height: 0 !important; height: auto !important; margin: clamp(8px, 1.1dvh, 14px) auto 0 !important; padding: 0 !important; grid-template-columns: minmax(0, var(--combatant-w)) var(--versus-size) minmax(0, var(--combatant-w)) !important; gap: var(--fighter-gap) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { position: relative !important; isolation: isolate !important; width: var(--combatant-w) !important; height: auto !important; min-height: calc(var(--fighter-card-h) + var(--combatant-frame-pad-y) * 2) !important; padding: var(--combatant-frame-pad-y) var(--combatant-frame-pad-x) !important; gap: var(--fighter-inner-gap) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant { grid-template-columns: var(--fighter-panel-w) minmax(0, var(--fighter-card-w)) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { grid-template-columns: minmax(0, var(--fighter-card-w)) var(--fighter-panel-w) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; border: 1px solid rgba(169, 196, 216, 0.68) !important; border-radius: 22px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 255, 0.9) 54%, rgba(226, 240, 250, 0.86)) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::after, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::after { content: "" !important; display: block !important; position: absolute !important; inset: clamp(7px, 0.8vw, 11px) !important; z-index: 1 !important; pointer-events: none !important; border-radius: 17px !important; box-shadow: inset 0 0 0 1px rgba(151, 185, 210, 0.42), inset 0 0 0 2px rgba(255, 255, 255, 0.2) !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant > * { position: relative !important; z-index: 3 !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel { height: auto !important; min-height: var(--fighter-card-h) !important; max-height: none !important; overflow: visible !important; clip-path: none !important; contain: none !important; } /* V1.27Beta-battleframe6: final battle/preview polish after the older frame experiments. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select::after, 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; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview { overflow: visible !important; z-index: 120 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview .preview-copy { overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #lockCharacter { position: absolute !important; top: calc(100% + 12px) !important; bottom: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; z-index: 260 !important; pointer-events: auto !important; min-width: min(220px, 72vw) !important; min-height: 44px !important; margin: 0 !important; touch-action: manipulation !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #lockCharacter::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #lockCharacter::after { pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip { width: fit-content !important; inline-size: fit-content !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: min(104px, 100%) !important; max-inline-size: min(104px, 100%) !important; padding-left: 4px !important; padding-right: 6px !important; text-indent: 0 !important; justify-content: center !important; gap: 3px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip .skill-inline-text, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip .skill-inline-text, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip .skill-inline-text { margin: 0 !important; padding: 0 !important; text-indent: 0 !important; } html body:not(.maintenance-mode) #codexOpenArtifact.game-codex-artifact { background: linear-gradient(180deg, rgba(3, 6, 12, 0.08), rgba(3, 6, 12, 0.42)), url("assets/ui/codex-card-artifact-relicvault-actual-artifacts-v1.png?v=V1.27Beta-codex-artifact-card") center / cover no-repeat !important; } html body:not(.maintenance-mode) #battle .battle-libraries { display: flex !important; justify-content: center !important; align-items: center !important; gap: 14px !important; } html body:not(.maintenance-mode) #battle .battle-libraries > button.library-action, html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle.library-action, html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle.library-action { width: clamp(76px, 7.4vw, 96px) !important; height: clamp(76px, 7.4vw, 96px) !important; min-width: clamp(76px, 7.4vw, 96px) !important; min-height: clamp(76px, 7.4vw, 96px) !important; padding: 0 !important; border-radius: 18px !important; clip-path: none !important; overflow: hidden !important; background: linear-gradient(180deg, rgba(5, 9, 16, 0.03), rgba(5, 9, 16, 0.24)), var(--library-icon-art) center / cover no-repeat !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 -18px 28px rgba(0, 0, 0, 0.16), 0 10px 22px rgba(0, 0, 0, 0.26) !important; } html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle.library-action { --library-icon-art: url("assets/ui/battle-library-opportunity-icon-crop-v1.png?v=V1.27Beta-battleframe6"); } html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle.library-action { --library-icon-art: url("assets/ui/battle-library-artifact-icon-crop-v1.png?v=V1.27Beta-battleframe6"); } html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle#showOpportunityLibraryBattle.library-action, html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle#showArtifactLibraryBattle.library-action { box-sizing: border-box !important; width: clamp(76px, 7.4vw, 96px) !important; min-width: clamp(76px, 7.4vw, 96px) !important; max-width: clamp(76px, 7.4vw, 96px) !important; height: clamp(76px, 7.4vw, 96px) !important; min-height: clamp(76px, 7.4vw, 96px) !important; max-height: clamp(76px, 7.4vw, 96px) !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; border: 1px solid rgba(255, 246, 208, 0.44) !important; border-radius: 18px !important; clip-path: none !important; overflow: hidden !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 -18px 28px rgba(0, 0, 0, 0.18), 0 10px 22px rgba(0, 0, 0, 0.26) !important; filter: none !important; } html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle#showOpportunityLibraryBattle.library-action { --library-icon-art: url("assets/ui/battle-library-opportunity-icon-crop-v1.png?v=V1.27Beta-battleframe6"); background-image: linear-gradient(180deg, rgba(5, 9, 16, 0.03), rgba(5, 9, 16, 0.24)), url("assets/ui/battle-library-opportunity-icon-crop-v1.png?v=V1.27Beta-battleframe6") !important; } html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle#showArtifactLibraryBattle.library-action { --library-icon-art: url("assets/ui/battle-library-artifact-icon-crop-v1.png?v=V1.27Beta-battleframe6"); background-image: linear-gradient(180deg, rgba(5, 9, 16, 0.03), rgba(5, 9, 16, 0.24)), url("assets/ui/battle-library-artifact-icon-crop-v1.png?v=V1.27Beta-battleframe6") !important; } html body:not(.maintenance-mode) #battle .battle-libraries > button.library-action > span { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) { box-sizing: border-box !important; width: min(1480px, calc(100vw - 18px)) !important; max-width: calc(100vw - 18px) !important; height: auto !important; min-height: auto !important; margin-inline: auto !important; padding: clamp(8px, 1.2dvh, 14px) clamp(8px, 1.2vw, 18px) clamp(72px, 9dvh, 112px) !important; display: grid !important; grid-template-rows: auto auto auto auto auto !important; align-content: start !important; justify-items: center !important; gap: clamp(10px, 1.35dvh, 18px) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden])::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters { --combatant-frame-pad-x: clamp(18px, 2.1vw, 34px); --combatant-frame-pad-y: clamp(18px, 2.8dvh, 32px); --fighter-gap: clamp(16px, 1.8vw, 30px); --fighter-inner-gap: clamp(10px, 1vw, 14px); --fighter-panel-w: clamp(132px, 10.4vw, 180px); --fighter-card-w: clamp(220px, 17vw, 284px); --fighter-card-h: clamp(384px, 48dvh, 514px); --versus-size: clamp(46px, 5.6dvh, 60px); --combatant-w: calc(var(--fighter-panel-w) + var(--fighter-card-w) + var(--fighter-inner-gap) + var(--combatant-frame-pad-x) * 2); box-sizing: border-box !important; position: relative !important; isolation: isolate !important; width: min(100%, calc(var(--combatant-w) * 2 + var(--versus-size) + var(--fighter-gap) * 2)) !important; height: auto !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, var(--combatant-w)) var(--versus-size) minmax(0, var(--combatant-w)) !important; align-items: center !important; justify-content: center !important; justify-items: center !important; gap: var(--fighter-gap) !important; overflow: visible !important; clip-path: none !important; contain: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { box-sizing: border-box !important; position: relative !important; isolation: isolate !important; width: var(--combatant-w) !important; height: auto !important; min-height: calc(var(--fighter-card-h) + var(--combatant-frame-pad-y) * 2) !important; padding: var(--combatant-frame-pad-y) var(--combatant-frame-pad-x) !important; display: grid !important; align-items: stretch !important; gap: var(--fighter-inner-gap) !important; overflow: visible !important; clip-path: none !important; contain: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant { grid-template-columns: var(--fighter-panel-w) minmax(0, var(--fighter-card-w)) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { grid-template-columns: minmax(0, var(--fighter-card-w)) var(--fighter-panel-w) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; border-radius: clamp(20px, 2.4vw, 32px) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 251, 255, 0.94) 55%, rgba(225, 239, 250, 0.9)) !important; box-shadow: inset 0 0 0 1px rgba(174, 204, 224, 0.52), inset 0 22px 38px rgba(255, 255, 255, 0.34), 0 18px 38px rgba(0, 0, 0, 0.24) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::after, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; border-radius: clamp(20px, 2.4vw, 32px) !important; background: var(--character-select-desktop-frame-art) center center / 100% 100% no-repeat !important; filter: drop-shadow(0 12px 18px rgba(8, 28, 45, 0.15)) !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant > * { position: relative !important; z-index: 3 !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel { box-sizing: border-box !important; width: 100% !important; height: var(--fighter-card-h) !important; min-width: 0 !important; min-height: var(--fighter-card-h) !important; max-height: none !important; border-radius: 14px !important; clip-path: none !important; contain: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter { border: 1px solid rgba(110, 153, 184, 0.36) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 22%), linear-gradient(145deg, rgba(15, 21, 31, 0.96), rgba(5, 8, 14, 0.96)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.24) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter::before { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel { border: 1px solid rgba(110, 153, 184, 0.32) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 24%), linear-gradient(145deg, rgba(13, 19, 28, 0.94), rgba(5, 8, 13, 0.92)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.2) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .character-face { min-height: 0 !important; height: 100% !important; border-radius: 12px !important; overflow: visible !important; clip-path: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .avatar { min-height: 0 !important; border-radius: 12px 12px 0 0 !important; overflow: hidden !important; clip-path: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .versus { z-index: 5 !important; align-self: center !important; } @media (max-width: 980px) { html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) { width: 100% !important; max-width: 100% !important; padding: 8px 8px 92px !important; gap: 8px !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters { --combatant-frame-pad-x: 10px; --combatant-frame-pad-y: 12px; --fighter-gap: 8px; --fighter-inner-gap: 6px; --fighter-panel-w: clamp(92px, 25vw, 116px); --fighter-card-w: minmax(0, 1fr); --fighter-card-h: clamp(286px, 42dvh, 388px); --versus-size: 40px; --combatant-w: 100%; width: 100% !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto var(--versus-size) auto !important; gap: var(--fighter-gap) !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { width: 100% !important; min-height: calc(var(--fighter-card-h) + var(--combatant-frame-pad-y) * 2) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant { grid-template-columns: var(--fighter-panel-w) minmax(0, 1fr) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { grid-template-columns: minmax(0, 1fr) var(--fighter-panel-w) !important; } } /* V1.27Beta-roompolish2: room lobby background uses a single arena layer, not stacked panel overlays. */ html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena { background: linear-gradient(90deg, rgba(4, 6, 11, 0.82) 0%, rgba(7, 10, 16, 0.42) 42%, rgba(4, 6, 11, 0.82) 100%), linear-gradient(180deg, rgba(255, 241, 188, 0.08) 0%, rgba(7, 10, 16, 0.38) 34%, rgba(3, 5, 9, 0.88) 100%), var(--room-mode-wallpaper) center / cover no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::before, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::after, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby::before, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; background: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby { background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#startGame { grid-column: 1 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby { grid-column: 2 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby { grid-column: 3 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { grid-column: 4 !important; grid-row: 1 !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#startGame { grid-column: 1 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby { grid-column: 2 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby { grid-column: 1 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { grid-column: 2 !important; grid-row: 2 !important; } } /* V1.27Beta-combatui4: final battle controls, stats, artifact slots, and utility button layout. */ html body:not(.maintenance-mode) #battle #cards.cards, html body:not(.maintenance-mode) #cards.cards { width: min(780px, calc(100vw - 36px)) !important; max-width: calc(100vw - 36px) !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(8px, 1vw, 12px) !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #battle #cards .action-card, html body:not(.maintenance-mode) #cards .action-card { box-sizing: border-box !important; position: relative !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1983 / 793 !important; padding: 0 8% 0 31% !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; color: #fff3c8 !important; background-color: transparent !important; box-shadow: none !important; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.24)) !important; } html body:not(.maintenance-mode) #battle #cards .action-card.attack, html body:not(.maintenance-mode) #cards .action-card.attack { background: var(--action-attack-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards .action-card.defend, html body:not(.maintenance-mode) #cards .action-card.defend { background: var(--action-defend-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards .action-card.charge, html body:not(.maintenance-mode) #cards .action-card.charge { background: var(--action-charge-panel-art) center center / 100% 100% 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; opacity: 0 !important; background: none !important; -webkit-mask: none !important; mask: none !important; box-shadow: 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; display: block !important; opacity: 1 !important; width: 100% !important; min-width: 0 !important; overflow: hidden !important; color: #fff3c8 !important; font-size: clamp(15px, 1.25vw, 22px) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 14px rgba(255, 217, 121, 0.38) !important; background: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #battle .battle-libraries { width: auto !important; max-width: min(100%, 300px) !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: clamp(10px, 1.2vw, 16px) !important; padding: 0 !important; margin: 0 auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle.library-action, html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle.library-action { box-sizing: border-box !important; position: relative !important; width: clamp(92px, 7.6vw, 116px) !important; min-width: clamp(92px, 7.6vw, 116px) !important; max-width: clamp(92px, 7.6vw, 116px) !important; height: clamp(76px, 6.3vw, 94px) !important; min-height: clamp(76px, 6.3vw, 94px) !important; max-height: clamp(76px, 6.3vw, 94px) !important; padding: 0 8px 8px !important; display: grid !important; place-items: end center !important; border: 1px solid rgba(255, 246, 208, 0.48) !important; border-radius: 18px !important; clip-path: none !important; overflow: hidden !important; background: linear-gradient(180deg, rgba(5, 9, 16, 0.02), rgba(5, 9, 16, 0.46)), var(--library-icon-art) center center / cover no-repeat !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 -22px 28px rgba(0, 0, 0, 0.28), 0 10px 22px rgba(0, 0, 0, 0.22) !important; filter: none !important; } html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle.library-action { --library-icon-art: url("assets/ui/battle-library-opportunity-icon-crop-v1.png?v=V1.27Beta-battleframe6"); } html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle.library-action { --library-icon-art: url("assets/ui/battle-library-artifact-icon-crop-v1.png?v=V1.27Beta-battleframe6"); } html body:not(.maintenance-mode) #battle .battle-libraries > button.library-action > span { position: relative !important; z-index: 2 !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 3px 7px !important; overflow: visible !important; clip-path: none !important; white-space: nowrap !important; color: #fff4ce !important; font-size: clamp(11px, 0.85vw, 13px) !important; font-weight: 950 !important; line-height: 1 !important; text-align: center !important; border: 0 !important; border-radius: 999px !important; background: rgba(3, 7, 12, 0.56) !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.88) !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; padding: 4px !important; min-height: clamp(40px, 4.8vh, 58px) !important; overflow: hidden !important; } html body:not(.maintenance-mode) #battle .equipment-slot { box-sizing: border-box !important; position: relative !important; min-width: 0 !important; min-height: clamp(34px, 4.2vh, 50px) !important; aspect-ratio: 1 / 1 !important; display: grid !important; place-items: center !important; overflow: hidden !important; border-radius: 8px !important; } html body:not(.maintenance-mode) #battle .equipment-slot.filled { color: transparent !important; text-shadow: none !important; background: #04070c !important; } html body:not(.maintenance-mode) #battle .equipment-slot.filled::before { content: "" !important; position: absolute !important; z-index: 1 !important; inset: 0 !important; border-radius: inherit !important; background: var(--equipment-art) center center / cover 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.filled::after { content: "" !important; position: absolute !important; z-index: 2 !important; inset: 0 !important; border-radius: inherit !important; box-shadow: inset 0 0 0 1px rgba(255, 246, 208, 0.2), inset 0 -16px 18px rgba(0, 0, 0, 0.26) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #battle .equipment-slot .equipment-cd { position: absolute !important; z-index: 3 !important; right: 3px !important; bottom: 3px !important; } html body:not(.maintenance-mode) #battle .energy .stat-marks { display: grid !important; grid-template-columns: repeat(4, var(--stat-mark-size)) !important; grid-template-rows: repeat(2, var(--stat-mark-size)) !important; grid-auto-rows: var(--stat-mark-size) !important; } html body:not(.maintenance-mode) #battle .fighter-panel .energy { min-height: clamp(34px, 4.4vh, 46px) !important; align-items: center !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.identity-battle .team-stat-stack { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.identity-battle .team-stat-line { display: grid !important; min-height: 20px !important; padding: 3px 5px !important; place-items: center !important; font-size: clamp(9px, 0.72vw, 11px) !important; font-weight: 950 !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #battle .utility { width: auto !important; max-width: min(100%, 460px) !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 10px !important; padding: 0 !important; margin: 0 auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #battle .utility button { flex: 0 0 auto !important; width: auto !important; min-width: 96px !important; max-width: 132px !important; height: 38px !important; min-height: 38px !important; padding: 0 14px !important; grid-column: auto !important; grid-row: auto !important; } html body:not(.maintenance-mode) #battle .utility #rematch:not([hidden]) { display: inline-grid !important; } html body:not(.maintenance-mode) #battle .utility #rematch[hidden] { display: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #battle #cards.cards, html body:not(.maintenance-mode) #cards.cards { width: min(100%, calc(100vw - 16px)) !important; gap: 5px !important; } html body:not(.maintenance-mode) #battle #cards .action-card, html body:not(.maintenance-mode) #cards .action-card { padding: 0 7% 0 31% !important; } html body:not(.maintenance-mode) #battle #cards .action-card span, html body:not(.maintenance-mode) #cards .action-card span { font-size: 12px !important; } html body:not(.maintenance-mode) #battle #showOpportunityLibraryBattle.library-action, html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle.library-action { width: 86px !important; min-width: 86px !important; max-width: 86px !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; border-radius: 14px !important; } html body:not(.maintenance-mode) #battle .fighter-panel .energy { min-height: 30px !important; } } html body:not(.maintenance-mode) #battle #cards.cards[data-attack-style="assassination-rogue"], html body:not(.maintenance-mode) #battle #cards.cards[data-attack-style="rogue"], html body:not(.maintenance-mode) #cards.cards[data-attack-style="assassination-rogue"], html body:not(.maintenance-mode) #cards.cards[data-attack-style="rogue"] { --action-attack-panel-art: var(--attack-panel-rogue-assassination-v3) !important; } html body:not(.maintenance-mode) #battle #cards.cards[data-attack-style="subtlety-rogue"], html body:not(.maintenance-mode) #cards.cards[data-attack-style="subtlety-rogue"] { --action-attack-panel-art: var(--attack-panel-rogue-subtlety-v3) !important; } html body:not(.maintenance-mode) #battle #cards.cards[data-attack-style="outlaw-rogue"], html body:not(.maintenance-mode) #cards.cards[data-attack-style="outlaw-rogue"] { --action-attack-panel-art: var(--attack-panel-rogue-outlaw-v3) !important; } html body:not(.maintenance-mode) #battle #cards.cards[data-attack-style="arms-warrior"], html body:not(.maintenance-mode) #battle #cards.cards[data-attack-style="warrior"], html body:not(.maintenance-mode) #cards.cards[data-attack-style="arms-warrior"], html body:not(.maintenance-mode) #cards.cards[data-attack-style="warrior"] { --action-attack-panel-art: var(--attack-panel-warrior-arms-v3) !important; } html body:not(.maintenance-mode) #battle #cards.cards[data-attack-style="elemental-shaman"], html body:not(.maintenance-mode) #battle #cards.cards[data-attack-style="shaman"], html body:not(.maintenance-mode) #cards.cards[data-attack-style="elemental-shaman"], html body:not(.maintenance-mode) #cards.cards[data-attack-style="shaman"] { --action-attack-panel-art: var(--attack-panel-shaman-elemental-v3) !important; } /* V1.27Beta-room-desktop-final: keep desktop room centered and remove the stray dark layer. */ html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::before, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::after, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby::before, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; animation: none !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(8, 14, 24, 0.08)), var(--room-mode-wallpaper) center / cover no-repeat !important; } /* V1.27Beta-modebadge-restore3: keep original special-mode button art; only tighten thumbnail text offset. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip { padding-left: 0 !important; padding-right: 2px !important; text-indent: 0 !important; gap: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Rhasta"] .mode-tip .skill-inline-text, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Lollipopz"] .mode-tip .skill-inline-text, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option[data-character="Xiaoyang"] .mode-tip .skill-inline-text { margin-left: 0 !important; padding-left: 0 !important; } @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) { position: fixed !important; left: 50% !important; top: calc(50% + 22px) !important; right: auto !important; bottom: auto !important; width: min(1400px, calc(100vw - 56px)) !important; height: min(800px, calc(100dvh - 128px)) !important; min-height: min(560px, calc(100dvh - 88px)) !important; max-height: calc(100dvh - 96px) !important; margin: 0 !important; padding: clamp(18px, 2.1vw, 30px) clamp(24px, 2.8vw, 42px) clamp(12px, 1.4vw, 22px) !important; transform: translate(-50%, -50%) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) 68px !important; gap: clamp(16px, 2.2vh, 24px) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 22 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-head, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .identity-rules { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: min(860px, 100%) !important; margin: 0 auto !important; z-index: 2 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-head { grid-row: 1 !important; min-height: 74px !important; padding: 12px 22px !important; display: grid !important; align-content: center !important; justify-items: center !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .identity-rules { position: absolute !important; top: clamp(16px, 2.2vw, 30px) !important; right: clamp(18px, 2.4vw, 38px) !important; left: auto !important; width: min(360px, 28vw) !important; max-height: min(390px, calc(100dvh - 190px)) !important; margin: 0 !important; overflow: auto !important; z-index: 8 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-seat-grid { grid-row: 2 !important; position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; padding: 0 clamp(8px, 1.2vw, 18px) !important; transform: none !important; display: grid !important; align-content: center !important; justify-content: center !important; align-items: stretch !important; justify-items: stretch !important; overflow: visible !important; z-index: 2 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="1v1"] > .room-seat-grid { grid-template-columns: repeat(2, minmax(340px, 440px)) !important; grid-auto-rows: clamp(210px, 27dvh, 280px) !important; gap: clamp(70px, 9vw, 150px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="2v2"] > .room-seat-grid { grid-template-columns: repeat(2, minmax(340px, 470px)) !important; grid-auto-rows: clamp(174px, 22dvh, 230px) !important; gap: clamp(34px, 4.4vh, 58px) clamp(72px, 8vw, 132px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="3v3"] > .room-seat-grid { grid-template-columns: repeat(3, minmax(260px, 360px)) !important; grid-auto-rows: clamp(160px, 19dvh, 205px) !important; gap: clamp(26px, 3.5vh, 46px) clamp(26px, 3.2vw, 46px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"] > .room-seat-grid { grid-template-columns: repeat(5, minmax(190px, 240px)) !important; grid-auto-rows: clamp(128px, 15dvh, 160px) !important; gap: clamp(14px, 2vh, 24px) clamp(14px, 1.6vw, 22px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-seat-grid > .room-team-versus { position: absolute !important; left: 50% !important; top: 50% !important; grid-column: auto !important; grid-row: auto !important; width: clamp(72px, 6.4vw, 104px) !important; min-width: 0 !important; height: clamp(46px, 4.6vw, 66px) !important; min-height: 0 !important; margin: 0 !important; transform: translate(-50%, -50%) !important; display: grid !important; place-items: center !important; border-radius: 999px !important; pointer-events: none !important; z-index: 4 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat { width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; height: 100% !important; max-height: none !important; margin: 0 !important; padding: clamp(22px, 2.8vh, 34px) clamp(20px, 2.4vw, 32px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: clamp(12px, 1.8vh, 20px) !important; overflow: visible !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions { grid-row: 3 !important; position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: min(980px, 100%) !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; padding: 0 !important; margin: 0 auto !important; align-self: end !important; justify-self: center !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 68px !important; gap: 14px !important; transform: none !important; pointer-events: none !important; z-index: 9 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button:not(#copyRoomLobby) { position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; margin: 0 !important; padding: 0 20px !important; transform: none !important; pointer-events: auto !important; display: grid !important; place-items: center !important; font-size: clamp(14px, 1.15vw, 16px) !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#copyRoomLobby { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#startGame { grid-column: 1 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#refreshRoomLobby { grid-column: 2 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#showRulesRoomLobby { grid-column: 3 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button#leaveRoomLobby { grid-column: 4 !important; grid-row: 1 !important; } } /* V1.27Beta-room-desktop-specificity-lock: override heavier legacy mobile room rules on PC. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) { position: fixed !important; left: 50% !important; top: calc(50% + 22px) !important; right: auto !important; bottom: auto !important; width: min(1400px, calc(100vw - 56px)) !important; height: min(800px, calc(100dvh - 128px)) !important; min-height: min(560px, calc(100dvh - 88px)) !important; max-height: calc(100dvh - 96px) !important; margin: 0 !important; padding: clamp(18px, 2.1vw, 30px) clamp(24px, 2.8vw, 42px) clamp(12px, 1.4vw, 22px) !important; transform: translate(-50%, -50%) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) 68px !important; gap: clamp(16px, 2.2vh, 24px) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 22 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-head { grid-row: 1 !important; position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: min(860px, 100%) !important; min-height: 74px !important; margin: 0 auto !important; padding: 12px 22px !important; display: grid !important; align-content: center !important; justify-items: center !important; text-align: center !important; z-index: 3 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .identity-rules { position: absolute !important; top: clamp(16px, 2.2vw, 30px) !important; right: clamp(18px, 2.4vw, 38px) !important; left: auto !important; width: min(360px, 28vw) !important; max-height: min(390px, calc(100dvh - 190px)) !important; margin: 0 !important; overflow: auto !important; transform: none !important; z-index: 8 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-seat-grid { grid-row: 2 !important; position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; padding: 0 clamp(8px, 1.2vw, 18px) !important; transform: none !important; display: grid !important; align-content: center !important; justify-content: center !important; align-items: stretch !important; justify-items: stretch !important; overflow: visible !important; z-index: 2 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="1v1"]:not([hidden]) > .room-seat-grid { grid-template-columns: repeat(2, minmax(340px, 440px)) !important; grid-auto-rows: clamp(210px, 27dvh, 280px) !important; gap: clamp(70px, 9vw, 150px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="2v2"]:not([hidden]) > .room-seat-grid { grid-template-columns: repeat(2, minmax(340px, 470px)) !important; grid-auto-rows: clamp(174px, 22dvh, 230px) !important; gap: clamp(34px, 4.4vh, 58px) clamp(72px, 8vw, 132px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="3v3"]:not([hidden]) > .room-seat-grid { grid-template-columns: repeat(3, minmax(260px, 360px)) !important; grid-auto-rows: clamp(160px, 19dvh, 205px) !important; gap: clamp(26px, 3.5vh, 46px) clamp(26px, 3.2vw, 46px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-seat-grid { grid-template-columns: repeat(5, minmax(190px, 240px)) !important; grid-auto-rows: clamp(128px, 15dvh, 160px) !important; gap: clamp(14px, 2vh, 24px) clamp(14px, 1.6vw, 22px) !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-seat-grid > .room-team-versus { position: absolute !important; left: 50% !important; top: 50% !important; grid-column: auto !important; grid-row: auto !important; width: clamp(72px, 6.4vw, 104px) !important; min-width: 0 !important; height: clamp(46px, 4.6vw, 66px) !important; min-height: 0 !important; margin: 0 !important; transform: translate(-50%, -50%) !important; display: grid !important; place-items: center !important; border-radius: 999px !important; pointer-events: none !important; z-index: 4 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: clamp(22px, 2.8vh, 34px) clamp(20px, 2.4vw, 32px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: clamp(12px, 1.8vh, 20px) !important; overflow: visible !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat-actions { width: 100% !important; min-height: 40px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat-action { width: min(128px, 72%) !important; min-width: 92px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 14px !important; font-size: 13px !important; line-height: 1 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions { grid-row: 3 !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: min(980px, 100%) !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; margin: 0 auto !important; padding: 0 !important; align-self: end !important; justify-self: center !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 68px !important; gap: 14px !important; pointer-events: none !important; z-index: 9 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button:not(#copyRoomLobby) { position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; margin: 0 !important; padding: 0 20px !important; transform: none !important; pointer-events: auto !important; display: grid !important; place-items: center !important; font-size: clamp(14px, 1.15vw, 16px) !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #copyRoomLobby { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #startGame { grid-column: 1 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #refreshRoomLobby { grid-column: 2 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #showRulesRoomLobby { grid-column: 3 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > #leaveRoomLobby { grid-column: 4 !important; grid-row: 1 !important; } } /* V1.27Beta-room-desktop-vs-pseudo: VS is decoration, not a grid child. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat { aspect-ratio: auto !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-seat-grid > .room-team-versus { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([data-mode="identity"]):not([hidden]) > .room-seat-grid::after { content: "VS" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: clamp(72px, 6.4vw, 104px) !important; height: clamp(46px, 4.6vw, 66px) !important; transform: translate(-50%, -50%) !important; display: grid !important; place-items: center !important; border-radius: 999px !important; color: #fff4cf !important; font-size: clamp(15px, 1.9vw, 22px) !important; font-weight: 950 !important; background: rgba(5, 9, 14, 0.56) !important; box-shadow: inset 0 0 0 1px rgba(255, 244, 207, 0.22), 0 0 22px rgba(246, 200, 95, 0.18) !important; pointer-events: none !important; z-index: 4 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-seat-grid::after { content: none !important; display: none !important; } } /* V1.27Beta-room-desktop-seat-flow: seats must not carry legacy explicit grid cells. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-seat-grid > .room-seat { grid-column: auto !important; grid-row: auto !important; } } /* V1.27Beta-room-desktop-identity-flow: identity room grid stays inside the desktop room. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) { align-items: stretch !important; justify-items: stretch !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .identity-rules.identity-rules { position: absolute !important; left: auto !important; top: clamp(16px, 2.2vw, 30px) !important; right: clamp(18px, 2.4vw, 38px) !important; bottom: auto !important; width: min(360px, 28vw) !important; max-height: min(390px, calc(100dvh - 190px)) !important; margin: 0 !important; transform: none !important; overflow: auto !important; z-index: 8 !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-seat-grid.room-seat-grid { grid-row: 2 !important; position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; padding: 0 clamp(8px, 1.2vw, 18px) !important; transform: none !important; display: grid !important; align-self: stretch !important; justify-self: stretch !important; align-content: center !important; justify-content: center !important; align-items: stretch !important; justify-items: stretch !important; overflow: visible !important; z-index: 2 !important; box-sizing: border-box !important; } } /* V1.27Beta-roommobile-label1: mobile room seat labels are centered as one text group; seat buttons no longer push names upward. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat, html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat { position: relative !important; display: block !important; min-height: 112px !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) .room-seat, html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) .room-seat { min-height: 96px !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat > .room-seat-identity, html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat > .room-seat-identity { position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; width: max-content !important; max-width: calc(100% - 42px) !important; min-width: 0 !important; margin: 0 !important; transform: translate(-50%, -50%) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; z-index: 3 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat .room-seat-slot, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat .room-seat-person, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat .room-seat-person .player-name, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat .room-seat-person .player-name-text { width: auto !important; min-width: 0 !important; max-width: 100% !important; text-align: center !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat .room-seat-actions, html body:not(.maintenance-mode) #appRoot.app.solo.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat .room-seat-actions { position: absolute !important; left: 50% !important; top: auto !important; right: auto !important; bottom: 8px !important; width: calc(100% - 28px) !important; height: 28px !important; min-height: 28px !important; margin: 0 !important; padding: 0 !important; transform: translateX(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 4 !important; } } /* V1.27Beta-roomselectfix3: final character-select frame, readable top board, and unified special-mode badges. */ @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-card-h: clamp(154px, calc((100dvh - 364px) / 2), 236px) !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-frame-inner-x: clamp(98px, 7.2vw, 146px) !important; --select-frame-inner-y: clamp(104px, 14.8vh, 188px) !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 - 2px)) !important; height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 2px)) !important; max-width: calc(100vw - 2px) !important; max-height: calc(100dvh - 2px) !important; padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important; margin: 0 !important; transform: translate(-50%, -50%) !important; display: grid !important; place-items: center !important; overflow: visible !important; isolation: isolate !important; background: var(--character-select-desktop-frame-art) center center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select::after, 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; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-options { justify-self: center !important; align-self: center !important; } } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select > .status-line, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .status-line, html body:not(.maintenance-mode) #characterSelect.character-select > .status-line, html body:not(.maintenance-mode) #characterSelect .status-line, html body:not(.maintenance-mode) > .status-line.character-select-status-portal, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] { position: fixed !important; top: clamp(10px, 1.8vh, 18px) !important; left: 50% !important; right: auto !important; width: min(860px, calc(100vw - 32px)) !important; min-height: clamp(42px, 5.1vh, 56px) !important; height: auto !important; padding: clamp(6px, 1vh, 9px) clamp(12px, 1.7vw, 20px) !important; transform: translateX(-50%) !important; display: grid !important; grid-template-columns: minmax(112px, 0.72fr) minmax(220px, 1fr) auto !important; gap: clamp(8px, 1.1vw, 14px) !important; align-items: center !important; justify-items: center !important; overflow: hidden !important; border: 1px solid rgba(174, 218, 243, 0.78) !important; border-radius: clamp(14px, 1.3vw, 18px) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(221, 238, 249, 0.92) 58%, rgba(190, 222, 241, 0.9)), rgba(235, 247, 255, 0.94) !important; color: #153d5b !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(121, 174, 209, 0.2), 0 10px 22px rgba(7, 31, 55, 0.16) !important; opacity: 1 !important; filter: none !important; z-index: 2147483000 !important; pointer-events: auto !important; box-sizing: border-box !important; } html body:not(.maintenance-mode) #characterSelect .status-line #selectRoomText, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #selectRoomText, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #selectRoomText { justify-self: start !important; min-width: 0 !important; max-width: 100% !important; color: #315c76 !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(11px, 0.9vw, 13px) !important; font-weight: 850 !important; line-height: 1.05 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #characterSelect .status-line #selectStatusText, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #selectStatusText, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #selectStatusText { justify-self: center !important; min-width: 0 !important; max-width: 100% !important; color: #103a5c !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(16px, 1.35vw, 20px) !important; font-weight: 950 !important; line-height: 1.08 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.94) !important; } html body:not(.maintenance-mode) #characterSelect .status-line #leaveCharacterSelect, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #leaveCharacterSelect, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #leaveCharacterSelect { justify-self: end !important; width: auto !important; min-width: clamp(96px, 8vw, 126px) !important; height: clamp(32px, 3.7vh, 40px) !important; min-height: clamp(32px, 3.7vh, 40px) !important; max-height: clamp(32px, 3.7vh, 40px) !important; padding: 0 clamp(14px, 1.4vw, 20px) !important; color: #123f62 !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(12px, 0.95vw, 14px) !important; font-weight: 950 !important; line-height: 1 !important; border: 1px solid rgba(116, 180, 221, 0.72) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(202, 229, 247, 0.9)), rgba(228, 244, 255, 0.94) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 5px 12px rgba(26, 84, 125, 0.14) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip.enabled, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden]) { box-sizing: border-box !important; appearance: none !important; -webkit-appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-items: center !important; place-items: center !important; width: fit-content !important; inline-size: fit-content !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: min(112px, 100%) !important; max-inline-size: min(112px, 100%) !important; height: 23px !important; min-height: 23px !important; max-height: 23px !important; margin: 0 !important; padding: 0 8px 1px !important; border: 1px solid rgba(255, 185, 197, 0.98) !important; border-left-width: 1px !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%) !important; color: #fff8ff !important; -webkit-text-fill-color: currentColor !important; background: linear-gradient(180deg, rgba(255, 235, 241, 0.28), transparent 36%), linear-gradient(90deg, #f34755 0%, #bc2337 54%, #4d0a16 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(33, 4, 10, 0.66), 0 1px 0 rgba(255, 233, 237, 0.52), 0 6px 12px rgba(41, 0, 12, 0.28) !important; font-size: clamp(10px, 0.78vw, 11px) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; text-indent: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em { justify-items: start !important; align-items: start !important; gap: 3px !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden]) { width: fit-content !important; inline-size: fit-content !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: min(220px, 100%) !important; max-inline-size: min(220px, 100%) !important; height: clamp(30px, 3.25vh, 36px) !important; min-height: clamp(30px, 3.25vh, 36px) !important; max-height: clamp(30px, 3.25vh, 36px) !important; padding: 0 12px 2px !important; font-size: clamp(12px, 1vw, 14px) !important; line-height: 1 !important; justify-self: start !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select > .status-line, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .status-line, html body:not(.maintenance-mode) #characterSelect.character-select > .status-line, html body:not(.maintenance-mode) #characterSelect .status-line, html body:not(.maintenance-mode) > .status-line.character-select-status-portal, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] { top: max(7px, env(safe-area-inset-top)) !important; width: min(398px, calc(100vw - 22px)) !important; min-height: 36px !important; height: 36px !important; padding: 5px 8px !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 7px !important; border-radius: 16px !important; } html body:not(.maintenance-mode) #characterSelect .status-line #selectRoomText, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #selectRoomText, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #selectRoomText { display: none !important; } html body:not(.maintenance-mode) #characterSelect .status-line #selectStatusText, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #selectStatusText, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #selectStatusText { font-size: clamp(12px, 3.2vw, 15px) !important; } html body:not(.maintenance-mode) #characterSelect .status-line #leaveCharacterSelect, html body:not(.maintenance-mode) > .status-line.character-select-status-portal #leaveCharacterSelect, html body:not(.maintenance-mode) > .status-line[data-character-select-portal="true"] #leaveCharacterSelect { min-width: 76px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; padding: 0 10px !important; font-size: 11px !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip.enabled, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em > .mode-tip { max-width: min(98px, 100%) !important; height: clamp(20px, 5.6vw, 23px) !important; min-height: clamp(20px, 5.6vw, 23px) !important; max-height: clamp(20px, 5.6vw, 23px) !important; padding: 0 7px 1px !important; font-size: clamp(9px, 2.45vw, 10.5px) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden]) { max-width: min(170px, 58vw) !important; max-inline-size: min(170px, 58vw) !important; height: clamp(25px, 6.6vw, 31px) !important; min-height: clamp(25px, 6.6vw, 31px) !important; max-height: clamp(25px, 6.6vw, 31px) !important; padding: 0 8px 1px !important; font-size: clamp(10px, 2.75vw, 12px) !important; } } /* V1.27Beta-mobilebattle1: phone 1v1 battle uses a clean vertical layout, not desktop combat frames. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app), html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])):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; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])):not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .arena { display: block !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) { box-sizing: border-box !important; position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; min-height: 0 !important; margin: 0 !important; padding: calc(max(8px, env(safe-area-inset-top)) + 48px) 8px max(10px, env(safe-area-inset-bottom)) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, auto) auto auto auto !important; align-content: start !important; justify-items: stretch !important; gap: 7px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; transform: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden])::after, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters::after, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .combatant::after, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::before, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #sidePanel.side:not([hidden]) { box-sizing: border-box !important; position: fixed !important; left: 8px !important; right: 8px !important; top: max(7px, env(safe-area-inset-top)) !important; bottom: auto !important; z-index: 90 !important; width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; pointer-events: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #sidePanel.side:not([hidden]) section:first-child { display: block !important; width: 100% !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #sidePanel.side:not([hidden]) section:first-child > h2, html body:not(.maintenance-mode) #sidePanel.side:not([hidden]) #log, html body:not(.maintenance-mode) #sidePanel.side:not([hidden]) .rules, html body:not(.maintenance-mode) #sidePanel.side:not([hidden]) section.rules { display: none !important; } html body:not(.maintenance-mode) #sidePanel.side:not([hidden]) .battle-status.status-line { box-sizing: border-box !important; width: 100% !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 !important; padding: 5px 8px !important; display: grid !important; grid-template-columns: minmax(74px, 0.42fr) minmax(0, 1fr) !important; align-items: center !important; justify-items: center !important; gap: 6px !important; overflow: hidden !important; border: 1px solid rgba(174, 218, 243, 0.76) !important; border-radius: 15px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(218, 237, 249, 0.9)), rgba(235, 247, 255, 0.92) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 7px 16px rgba(4, 20, 38, 0.2) !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #sidePanel.side:not([hidden]) .battle-status.status-line > span, html body:not(.maintenance-mode) #sidePanel.side:not([hidden]) .battle-status.status-line > strong { min-width: 0 !important; max-width: 100% !important; color: #123a58 !important; -webkit-text-fill-color: currentColor !important; font-weight: 950 !important; line-height: 1.05 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88) !important; } html body:not(.maintenance-mode) #sidePanel.side:not([hidden]) .battle-status.status-line > span { justify-self: start !important; font-size: 11px !important; } html body:not(.maintenance-mode) #sidePanel.side:not([hidden]) .battle-status.status-line > strong { justify-self: center !important; font-size: clamp(12px, 3.35vw, 15px) !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighters { --fighter-gap: 5px; --fighter-inner-gap: 5px; --fighter-panel-w: clamp(82px, 24vw, 96px); --fighter-card-h: clamp(186px, 28dvh, 242px); --versus-size: 26px; box-sizing: border-box !important; position: relative !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto var(--versus-size) auto !important; align-items: stretch !important; justify-content: stretch !important; justify-items: stretch !important; gap: var(--fighter-gap) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: var(--fighter-card-h) !important; min-height: var(--fighter-card-h) !important; max-height: var(--fighter-card-h) !important; margin: 0 !important; padding: 0 !important; display: grid !important; align-items: stretch !important; gap: var(--fighter-inner-gap) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .you-combatant { grid-template-columns: var(--fighter-panel-w) minmax(0, 1fr) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .opponent-combatant { grid-template-columns: minmax(0, 1fr) var(--fighter-panel-w) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: var(--fighter-card-h) !important; min-height: var(--fighter-card-h) !important; max-height: var(--fighter-card-h) !important; margin: 0 !important; border-radius: 10px !important; clip-path: none !important; contain: none !important; overflow: hidden !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter { padding: 5px !important; display: grid !important; grid-template-rows: 28px minmax(0, 1fr) !important; gap: 4px !important; border: 1px solid rgba(115, 160, 190, 0.42) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%), linear-gradient(145deg, rgba(14, 20, 30, 0.96), rgba(5, 8, 14, 0.96)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 6px 14px rgba(0, 0, 0, 0.22) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel { padding: 5px !important; display: grid !important; grid-template-rows: auto auto auto auto auto minmax(22px, 1fr) !important; gap: 3px !important; align-content: start !important; border: 1px solid rgba(115, 160, 190, 0.36) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 24%), linear-gradient(145deg, rgba(13, 19, 28, 0.94), rgba(5, 8, 13, 0.92)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 6px 14px rgba(0, 0, 0, 0.18) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-head { min-height: 0 !important; height: 28px !important; padding: 3px 5px !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 5px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-head strong, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-side { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 12px !important; line-height: 1 !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .character-face { min-height: 0 !important; height: 100% !important; display: grid !important; grid-template-rows: minmax(0, 1fr) auto !important; gap: 4px !important; overflow: hidden !important; border-radius: 8px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .avatar { min-height: 0 !important; height: 100% !important; border-radius: 8px 8px 0 0 !important; clip-path: inset(0 round 8px 8px 0 0) !important; overflow: hidden !important; background-size: var(--art-size, cover), cover, cover !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .role-card { min-height: 34px !important; max-height: 48px !important; padding: 5px 6px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .role-card b, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .role-card span { font-size: 10px !important; line-height: 1.15 !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .status-bar:not(.has-status) { display: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .status-bar, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .equipment-slots { min-height: 0 !important; height: 24px !important; padding: 2px !important; gap: 2px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .equipment-slots { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .equipment-slot { min-width: 0 !important; min-height: 0 !important; height: 20px !important; aspect-ratio: 1 / 1 !important; border-radius: 5px !important; font-size: 10px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .meter-row, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .energy, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fatigue, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .laziness { min-height: 20px !important; height: auto !important; padding: 2px 3px !important; gap: 2px 3px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .meter-row { grid-template-columns: auto minmax(0, 1fr) auto !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .stat-label { gap: 2px !important; font-size: 9px !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .stat-label-icon { width: 12px !important; height: 12px !important; flex-basis: 12px !important; border-radius: 4px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .meter { height: 6px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .energy, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fatigue, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .laziness { --stat-mark-size: 7px !important; grid-template-columns: minmax(32px, auto) minmax(0, 1fr) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .energy .stat-marks { grid-template-columns: repeat(4, var(--stat-mark-size)) !important; grid-template-rows: repeat(2, var(--stat-mark-size)) !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .stat-marks { gap: 1px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .fighter-panel .fatigue-row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 3px !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .choice { min-height: 22px !important; max-height: 34px !important; margin: 0 !important; padding: 2px 4px !important; display: grid !important; place-items: center !important; font-size: 10px !important; line-height: 1.08 !important; text-align: center !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .versus { width: var(--versus-size) !important; height: var(--versus-size) !important; min-width: var(--versus-size) !important; min-height: var(--versus-size) !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; place-items: center !important; border-radius: 999px !important; font-size: 11px !important; line-height: 1 !important; z-index: 2 !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle #cards .action-card { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 1983 / 793 !important; padding: 0 7% 0 31% !important; display: grid !important; place-items: center !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle #cards .action-card span { width: 100% !important; margin: 0 !important; font-size: clamp(11px, 3.15vw, 13px) !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .battle-libraries { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; justify-items: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle #showOpportunityLibraryBattle.library-action, html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle #showArtifactLibraryBattle.library-action { width: 88px !important; min-width: 88px !important; max-width: 88px !important; height: 66px !important; min-height: 66px !important; max-height: 66px !important; padding: 0 7px 7px !important; border-radius: 14px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .battle-libraries > button.library-action > span { padding: 3px 6px !important; font-size: 10px !important; } html body:not(.maintenance-mode) #appRoot.app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .utility { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app: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: repeat(3, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) #appRoot.app: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(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle .utility button { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 8px !important; display: inline-grid !important; place-items: center !important; font-size: 12px !important; line-height: 1 !important; white-space: nowrap !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: 92 !important; } } /* V1.27Beta-mobilebattle2: explicit mobile 1v1 battle shell; no topbar, no fixed side-panel overlay. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app { box-sizing: border-box !important; position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app .arena { box-sizing: border-box !important; position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; min-height: 0 !important; margin: 0 !important; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 42px minmax(0, 1fr) !important; align-items: stretch !important; gap: 7px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app .topbar, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #roomPill, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #teamBoard.team-board { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #sidePanel.side:not([hidden]) { box-sizing: border-box !important; position: relative !important; inset: auto !important; grid-column: 1 !important; grid-row: 1 !important; align-self: stretch !important; justify-self: stretch !important; z-index: 20 !important; width: 100% !important; max-width: 100% !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: hidden !important; pointer-events: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #sidePanel.side:not([hidden]) section:first-child { width: 100% !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #sidePanel.side:not([hidden]) section:first-child > h2, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #sidePanel.side:not([hidden]) #log, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #sidePanel.side:not([hidden]) .rules { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #sidePanel.side:not([hidden]) .battle-status.status-line { box-sizing: border-box !important; width: 100% !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 !important; padding: 5px 8px !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 7px !important; overflow: hidden !important; border: 1px solid rgba(178, 220, 244, 0.8) !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(223, 239, 248, 0.91)), rgba(237, 247, 252, 0.94) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 18px rgba(4, 16, 28, 0.24) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #sidePanel.side:not([hidden]) .battle-status.status-line > span, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #sidePanel.side:not([hidden]) .battle-status.status-line > strong { min-width: 0 !important; max-width: 100% !important; color: #133856 !important; -webkit-text-fill-color: currentColor !important; line-height: 1.05 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #sidePanel.side:not([hidden]) .battle-status.status-line > span { font-size: 11px !important; font-weight: 900 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #sidePanel.side:not([hidden]) .battle-status.status-line > strong { justify-self: center !important; font-size: clamp(12px, 3.25vw, 15px) !important; font-weight: 950 !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]) { box-sizing: border-box !important; position: relative !important; inset: auto !important; grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 0 2px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, auto) auto auto auto !important; align-content: start !important; justify-items: stretch !important; gap: 6px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden])::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .fighters::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .fighters::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .combatant::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .combatant::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .opponent-combatant::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .opponent-combatant::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .control-banner:not([hidden]) { min-height: 34px !important; margin: 0 !important; padding: 6px 9px !important; display: grid !important; gap: 2px !important; border-radius: 12px !important; font-size: 11px !important; line-height: 1.1 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .fighters { --fighter-gap: 5px; --fighter-inner-gap: 5px; --fighter-panel-w: clamp(88px, 27vw, 106px); --fighter-card-h: clamp(154px, calc((100dvh - 282px) / 2), 216px); --versus-size: 24px; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: var(--fighter-card-h) var(--versus-size) var(--fighter-card-h) !important; gap: var(--fighter-gap) !important; align-items: stretch !important; justify-items: stretch !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .combatant, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .opponent-combatant { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: var(--fighter-card-h) !important; min-height: var(--fighter-card-h) !important; max-height: var(--fighter-card-h) !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: var(--fighter-inner-gap) !important; align-items: stretch !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .you-combatant { grid-template-columns: var(--fighter-panel-w) minmax(0, 1fr) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .opponent-combatant { grid-template-columns: minmax(0, 1fr) var(--fighter-panel-w) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .fighter, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .fighter-panel { width: 100% !important; min-width: 0 !important; height: var(--fighter-card-h) !important; min-height: var(--fighter-card-h) !important; max-height: var(--fighter-card-h) !important; margin: 0 !important; border-radius: 10px !important; clip-path: none !important; contain: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .fighter { padding: 5px !important; display: grid !important; grid-template-rows: 26px minmax(0, 1fr) !important; gap: 4px !important; overflow: hidden !important; border: 1px solid rgba(128, 174, 205, 0.46) !important; background: linear-gradient(145deg, rgba(12, 18, 27, 0.97), rgba(4, 8, 14, 0.97)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 6px 13px rgba(0, 0, 0, 0.24) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .fighter-panel { padding: 4px !important; display: grid !important; grid-template-rows: 20px 22px 24px 30px minmax(20px, 1fr) 22px !important; gap: 2px !important; align-content: start !important; overflow: hidden !important; border: 1px solid rgba(128, 174, 205, 0.36) !important; background: linear-gradient(145deg, rgba(12, 18, 27, 0.94), rgba(4, 8, 13, 0.92)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 6px 13px rgba(0, 0, 0, 0.2) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .fighter-head { height: 26px !important; min-height: 26px !important; padding: 3px 5px !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 5px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .fighter-side, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .fighter-head strong { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 11px !important; line-height: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .character-face { min-height: 0 !important; display: grid !important; grid-template-rows: minmax(0, 1fr) 34px !important; gap: 4px !important; overflow: hidden !important; border-radius: 8px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .avatar { min-height: 0 !important; height: 100% !important; border-radius: 8px 8px 0 0 !important; clip-path: inset(0 round 8px 8px 0 0) !important; overflow: hidden !important; background-size: var(--art-size, cover), cover, cover !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .role-card { min-height: 34px !important; max-height: 34px !important; padding: 4px 6px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .role-card b, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .role-card span { font-size: 9px !important; line-height: 1.12 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .status-bar:not(.has-status) { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .status-bar, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .equipment-slots { height: 20px !important; min-height: 20px !important; max-height: 20px !important; padding: 1px !important; gap: 2px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .equipment-slots { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .equipment-slot { width: 18px !important; height: 18px !important; min-width: 0 !important; min-height: 0 !important; border-radius: 5px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .meter-row, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .energy, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .fatigue, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .laziness { min-height: 0 !important; height: auto !important; padding: 2px 3px !important; gap: 2px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .meter-row { grid-template-columns: auto minmax(0, 1fr) auto !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .stat-label { gap: 2px !important; min-width: 0 !important; font-size: 9px !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .stat-label-icon { width: 12px !important; height: 12px !important; flex-basis: 12px !important; border-radius: 4px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .meter { height: 6px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .energy, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .fatigue, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .laziness { --stat-mark-size: 6px !important; display: grid !important; grid-template-columns: minmax(32px, auto) minmax(0, 1fr) !important; align-items: center !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .energy .stat-marks { display: grid !important; grid-template-columns: repeat(4, var(--stat-mark-size)) !important; grid-template-rows: repeat(2, var(--stat-mark-size)) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .stat-marks { gap: 1px !important; justify-content: start !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .fighter-panel .fatigue-row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 2px !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .choice { min-height: 0 !important; height: 22px !important; max-height: 22px !important; margin: 0 !important; padding: 2px 4px !important; display: grid !important; place-items: center !important; overflow: hidden !important; font-size: 9px !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .versus { width: var(--versus-size) !important; height: var(--versus-size) !important; min-width: var(--versus-size) !important; min-height: var(--versus-size) !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; place-items: center !important; border-radius: 999px !important; font-size: 10px !important; line-height: 1 !important; z-index: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards .action-card { width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1983 / 793 !important; padding: 0 7% 0 31% !important; display: grid !important; place-items: center !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards .action-card span { width: 100% !important; margin: 0 !important; font-size: clamp(10px, 3vw, 12px) !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .battle-libraries { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; justify-items: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #showOpportunityLibraryBattle.library-action, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #showArtifactLibraryBattle.library-action { width: 84px !important; min-width: 84px !important; max-width: 84px !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; padding: 0 6px 6px !important; border-radius: 14px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .battle-libraries > button.library-action > span { padding: 3px 5px !important; font-size: 9px !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .utility { width: 100% !important; max-width: 100% !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .utility:has(#rematch:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .utility #rematch[hidden] { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle .utility button { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 6px !important; display: inline-grid !important; place-items: center !important; font-size: 11px !important; line-height: 1 !important; white-space: nowrap !important; } } /* V1.27Beta-actionbuttons3: transparent class-matched attack, AI-redrawn class defense, and charge panels. */ html body:not(.maintenance-mode) #cards.cards, html body:not(.maintenance-mode) #battle #cards.cards { --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/paladin/retribution.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/paladin/retribution.png?v=V1.27Beta-druid-feral-balance-standard1") !important; --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/paladin/retribution.png?v=V1.27Beta-druid-feral-balance-standard1") !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.attack, html body:not(.maintenance-mode) #cards.cards .action-card.attack { background: var(--action-attack-panel-art) center center / 100% 100% no-repeat !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.defend, html body:not(.maintenance-mode) #cards.cards .action-card.defend { background: var(--action-defend-panel-art) center center / 100% 100% no-repeat !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.charge, html body:not(.maintenance-mode) #cards.cards .action-card.charge { background: var(--action-charge-panel-art) center center / 100% 100% no-repeat !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.attack::before, html body:not(.maintenance-mode) #battle #cards.cards .action-card.attack::after, html body:not(.maintenance-mode) #cards.cards .action-card.attack::before, html body:not(.maintenance-mode) #cards.cards .action-card.attack::after, html body:not(.maintenance-mode) #battle #cards.cards .action-card.defend::before, html body:not(.maintenance-mode) #battle #cards.cards .action-card.defend::after, html body:not(.maintenance-mode) #cards.cards .action-card.defend::before, html body:not(.maintenance-mode) #cards.cards .action-card.defend::after, html body:not(.maintenance-mode) #battle #cards.cards .action-card.charge::before, html body:not(.maintenance-mode) #battle #cards.cards .action-card.charge::after, html body:not(.maintenance-mode) #cards.cards .action-card.charge::before, html body:not(.maintenance-mode) #cards.cards .action-card.charge::after, html body:not(.maintenance-mode) #battle #cards.cards .action-card .action-icon, html body:not(.maintenance-mode) #cards.cards .action-card .action-icon { content: none !important; display: none !important; width: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; background: none !important; -webkit-mask: none !important; mask: none !important; } /* V1.27Beta-mobilebattle3: final phone 1v1 battle layout. Keeps the status strip out of the battlefield and prevents character/status cards from collapsing into desktop remnants. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])), html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .arena { box-sizing: border-box !important; position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .arena { display: block !important; background-position: center center !important; background-size: cover !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .topbar, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #roomPill, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #teamBoard.team-board { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) { box-sizing: border-box !important; position: fixed !important; left: 6px !important; right: 6px !important; top: max(6px, env(safe-area-inset-top)) !important; bottom: auto !important; z-index: 95 !important; width: auto !important; max-width: none !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: hidden !important; pointer-events: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) section:first-child { width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) section:first-child > h2, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .rules { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line { box-sizing: border-box !important; width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 5px 10px !important; display: grid !important; grid-template-columns: minmax(68px, 0.32fr) minmax(0, 1fr) !important; align-items: center !important; justify-items: center !important; gap: 8px !important; overflow: hidden !important; border: 1px solid rgba(174, 218, 243, 0.82) !important; border-radius: 15px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(224, 239, 248, 0.93)), rgba(236, 247, 254, 0.95) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 8px 18px rgba(4, 20, 38, 0.22) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > span, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > strong { min-width: 0 !important; max-width: 100% !important; color: #143955 !important; -webkit-text-fill-color: currentColor !important; font-weight: 950 !important; line-height: 1.05 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > span { justify-self: start !important; font-size: 12px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > strong { font-size: clamp(13px, 3.65vw, 16px) !important; text-align: center !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) { box-sizing: border-box !important; position: fixed !important; left: 6px !important; right: 6px !important; top: calc(max(6px, env(safe-area-inset-top)) + 50px) !important; bottom: max(6px, env(safe-area-inset-bottom)) !important; inset-inline: 6px !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 0 12px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: max-content max-content max-content max-content !important; grid-auto-rows: max-content !important; align-content: start !important; justify-items: stretch !important; gap: 8px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden])::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighters::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighters::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .combatant::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .combatant::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .opponent-combatant::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .opponent-combatant::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .control-banner:not([hidden]) { min-height: 34px !important; margin: 0 !important; padding: 6px 9px !important; display: grid !important; gap: 2px !important; border-radius: 12px !important; font-size: 11px !important; line-height: 1.1 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighters { --mobile-fighter-card-h: clamp(206px, 25dvh, 226px); --mobile-status-panel-w: clamp(118px, 32vw, 136px); --mobile-fighter-gap: 7px; --mobile-versus-size: 25px; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: var(--mobile-fighter-card-h) var(--mobile-versus-size) var(--mobile-fighter-card-h) !important; gap: var(--mobile-fighter-gap) !important; align-items: stretch !important; justify-items: stretch !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .combatant, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .opponent-combatant { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: var(--mobile-fighter-card-h) !important; min-height: var(--mobile-fighter-card-h) !important; max-height: var(--mobile-fighter-card-h) !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) var(--mobile-status-panel-w) !important; grid-template-rows: minmax(0, 1fr) !important; align-items: stretch !important; justify-items: stretch !important; gap: 7px !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .you-combatant > .fighter, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .opponent-combatant > .fighter { grid-column: 1 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .you-combatant > .fighter-panel, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .opponent-combatant > .fighter-panel { grid-column: 2 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter-panel { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: var(--mobile-fighter-card-h) !important; min-height: var(--mobile-fighter-card-h) !important; max-height: var(--mobile-fighter-card-h) !important; margin: 0 !important; border-radius: 12px !important; clip-path: none !important; contain: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter { padding: 6px !important; display: grid !important; grid-template-rows: 30px minmax(0, 1fr) !important; gap: 5px !important; overflow: hidden !important; border: 1px solid rgba(128, 180, 210, 0.5) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%), linear-gradient(145deg, rgba(13, 19, 28, 0.97), rgba(5, 8, 14, 0.96)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 6px 14px rgba(0, 0, 0, 0.24) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter-panel { padding: 5px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto !important; gap: 4px !important; align-content: start !important; overflow: hidden !important; border: 1px solid rgba(128, 180, 210, 0.4) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%), linear-gradient(145deg, rgba(12, 18, 27, 0.94), rgba(4, 8, 13, 0.92)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 6px 13px rgba(0, 0, 0, 0.2) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter-head { height: 30px !important; min-height: 30px !important; padding: 4px 6px !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 5px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter-side, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter-head strong { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 12px !important; line-height: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .character-face { min-height: 0 !important; height: 100% !important; display: grid !important; grid-template-rows: minmax(0, 1fr) 52px !important; gap: 5px !important; overflow: hidden !important; border-radius: 9px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .avatar { min-height: 0 !important; height: 100% !important; border-radius: 9px 9px 0 0 !important; clip-path: inset(0 round 9px 9px 0 0) !important; overflow: hidden !important; background-size: var(--art-size, cover), cover, cover !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .role-card { min-height: 52px !important; max-height: 52px !important; padding: 5px 7px !important; display: grid !important; align-content: center !important; gap: 2px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .role-card b, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .role-card span { min-width: 0 !important; max-width: 100% !important; font-size: 10px !important; line-height: 1.1 !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .role-card span { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; white-space: normal !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .status-bar:not(.has-status) { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .status-bar, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .equipment-slots { min-height: 22px !important; max-height: 24px !important; padding: 1px !important; gap: 2px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .equipment-slots { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .equipment-slot { width: 22px !important; height: 22px !important; min-width: 0 !important; min-height: 0 !important; justify-self: center !important; border-radius: 6px !important; font-size: 10px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .meter-row, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .energy, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fatigue, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .laziness { box-sizing: border-box !important; min-height: 0 !important; height: auto !important; padding: 2px 3px !important; gap: 2px 3px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .meter-row { grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .stat-label { gap: 2px !important; min-width: 0 !important; font-size: 9px !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .stat-label-icon { width: 12px !important; height: 12px !important; flex-basis: 12px !important; border-radius: 4px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .meter { height: 6px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .energy, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fatigue, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .laziness { --stat-mark-size: 7px !important; display: grid !important; grid-template-columns: minmax(32px, auto) minmax(0, 1fr) !important; align-items: center !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .energy .stat-marks { display: grid !important; grid-template-columns: repeat(4, var(--stat-mark-size)) !important; grid-template-rows: repeat(2, var(--stat-mark-size)) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .stat-marks { gap: 1px !important; justify-content: start !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter-panel .fatigue-row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 3px !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .choice { min-height: 28px !important; height: 28px !important; max-height: 28px !important; margin: 0 !important; padding: 2px 5px !important; display: grid !important; place-items: center !important; overflow: hidden !important; font-size: 10px !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .versus { width: var(--mobile-versus-size) !important; height: var(--mobile-versus-size) !important; min-width: var(--mobile-versus-size) !important; min-height: var(--mobile-versus-size) !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; place-items: center !important; border-radius: 999px !important; font-size: 10px !important; line-height: 1 !important; z-index: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards .action-card { width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 1983 / 793 !important; padding: 0 7% 0 31% !important; display: grid !important; place-items: center !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards .action-card span { width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: clamp(11px, 3.15vw, 13px) !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.72) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .battle-libraries { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-height: 72px !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: 72px !important; grid-auto-rows: 72px !important; gap: 8px !important; align-items: center !important; justify-items: stretch !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #showOpportunityLibraryBattle.library-action, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #showArtifactLibraryBattle.library-action { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; padding: 0 8px 7px !important; display: grid !important; align-items: end !important; justify-items: center !important; border-radius: 14px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .battle-libraries > button.library-action > span { max-width: 100% !important; padding: 3px 7px !important; font-size: 11px !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .utility { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .utility:has(#rematch:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .utility #rematch[hidden] { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .utility button { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 0 8px !important; display: inline-grid !important; place-items: center !important; font-size: 12px !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* V1.27Beta-actionlabel1: action labels belong on the right-side nameplate, not over the circular icon or the whole panel. */ html body:not(.maintenance-mode) #battle #cards.cards .action-card, html body:not(.maintenance-mode) #cards.cards .action-card { box-sizing: border-box !important; position: relative !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 1983 / 793 !important; padding: 0 !important; display: block !important; overflow: visible !important; color: #fff8df !important; background-position: center center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card span, html body:not(.maintenance-mode) #cards.cards .action-card span { box-sizing: border-box !important; position: absolute !important; inset: auto !important; left: 36% !important; right: auto !important; top: 50% !important; bottom: auto !important; inset-block: auto !important; inset-inline-start: 36% !important; inset-inline-end: auto !important; z-index: 4 !important; width: 56% !important; min-width: 0 !important; max-width: none !important; height: 44% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: translateY(-50%) !important; opacity: 1 !important; color: #fff8df !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(15px, 1.35vw, 22px) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; pointer-events: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.96), 0 0 7px rgba(255, 244, 190, 0.46), 1px 0 0 rgba(0, 0, 0, 0.78), -1px 0 0 rgba(0, 0, 0, 0.78) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card { min-height: 0 !important; aspect-ratio: 1983 / 793 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card span, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card span { inset: auto !important; left: 36% !important; right: auto !important; top: 50% !important; bottom: auto !important; inset-inline-start: 36% !important; inset-inline-end: auto !important; width: 56% !important; height: 44% !important; font-size: clamp(12px, 3.25vw, 14px) !important; } } /* V1.27Beta-modebadge-final-tail: final word on special-mode badges after all older overrides. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip.enabled, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em > .mode-tip { box-sizing: border-box !important; width: 66px !important; inline-size: 66px !important; min-width: 66px !important; min-inline-size: 66px !important; max-width: 66px !important; max-inline-size: 66px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; padding: 0 5px 1px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-items: center !important; gap: 0 !important; text-align: center !important; text-indent: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip > .skill-inline-text { display: block !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; text-indent: 0 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip::after, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden])::after, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden])::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeSkill.preview-mode-skill-tip:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill.preview-mode-skill-tip:not([hidden]) { isolation: auto !important; overflow: hidden !important; border-radius: 0 !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip.enabled, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em > .mode-tip { width: clamp(60px, 17vw, 66px) !important; inline-size: clamp(60px, 17vw, 66px) !important; min-width: clamp(60px, 17vw, 66px) !important; min-inline-size: clamp(60px, 17vw, 66px) !important; max-width: clamp(60px, 17vw, 66px) !important; max-inline-size: clamp(60px, 17vw, 66px) !important; height: clamp(20px, 5.6vw, 23px) !important; min-height: clamp(20px, 5.6vw, 23px) !important; max-height: clamp(20px, 5.6vw, 23px) !important; padding: 0 4px 1px !important; } } /* V1.27Beta-modebadge-tight-text: keep the original badge shell, only remove text-node spacing. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip.enabled, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em > .mode-tip { text-indent: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option em > .mode-tip > .skill-inline-text { display: inline-block !important; position: static !important; width: auto !important; inline-size: auto !important; height: auto !important; block-size: auto !important; aspect-ratio: auto !important; min-width: 0 !important; min-inline-size: 0 !important; min-height: 0 !important; min-block-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; max-height: none !important; max-block-size: none !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-inline: 0 !important; text-indent: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; writing-mode: horizontal-tb !important; transform: none !important; } /* V1.27Beta-modebadge-colors-final: restore thumbnail-only character gradients after generic badge locks. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em > .mode-tip { color: #fffbe8 !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(255, 210, 120, 0.96) !important; border-left: 3px solid 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(235, 181, 68, 0.94) 52%, 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; text-shadow: 0 1px 3px rgba(25, 47, 20, 0.74), 0 0 10px rgba(255, 221, 112, 0.34) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em > .mode-tip { color: #f08fc4 !important; -webkit-text-fill-color: currentColor !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) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em > .mode-tip { 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; } /* V1.27Beta-modebadge-stripfix: special thumbnails only show the special-form badge, not the variable black skill strip above it. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em > .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em > .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em > .skill-tip:not(.mode-tip) { display: none !important; visibility: hidden !important; width: 0 !important; inline-size: 0 !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 0 !important; max-inline-size: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: hidden !important; } /* V1.27Beta-modebadge-thumbnail-layout1: special-mode thumbnails keep the normal skill badge in the same flow as every other card; the mode badge floats above it. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em { position: relative !important; display: grid !important; grid-auto-flow: row !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; justify-items: start !important; gap: 0 !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em > .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em > .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em > .skill-tip:not(.mode-tip) { display: inline-grid !important; visibility: visible !important; opacity: 1 !important; box-sizing: border-box !important; position: relative !important; z-index: 4 !important; width: fit-content !important; inline-size: fit-content !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: min(106px, 100%) !important; max-inline-size: min(106px, 100%) !important; height: 23px !important; min-height: 23px !important; max-height: 23px !important; margin: 0 !important; padding: 0 7px 1px 8px !important; align-self: start !important; justify-self: start !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #15110a !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(251, 215, 112, 0.92) !important; border-left: 3px solid rgba(18, 12, 6, 0.95) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.96), transparent 46%), linear-gradient(90deg, rgba(255, 248, 232, 0.96), rgba(255, 229, 124, 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; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em > .mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em > .mode-tip { position: absolute !important; left: 0 !important; top: auto !important; right: auto !important; bottom: calc(100% + 3px) !important; z-index: 6 !important; margin: 0 !important; transform: none !important; pointer-events: auto !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em > .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em > .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em > .skill-tip:not(.mode-tip) { max-width: min(96px, 100%) !important; max-inline-size: min(96px, 100%) !important; height: clamp(20px, 5.6vw, 23px) !important; min-height: clamp(20px, 5.6vw, 23px) !important; max-height: clamp(20px, 5.6vw, 23px) !important; padding: 0 6px 1px 7px !important; } } /* V1.27Beta-room-seat-identity-final: desktop room labels stay one-line and clear of the seat ornament. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat { position: relative !important; display: block !important; padding: 0 !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="1v1"]:not([hidden]) > .room-seat-grid { grid-template-rows: clamp(210px, 27dvh, 280px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="2v2"]:not([hidden]) > .room-seat-grid { grid-template-rows: repeat(2, clamp(174px, 22dvh, 230px)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="3v3"]:not([hidden]) > .room-seat-grid { grid-template-rows: repeat(2, clamp(160px, 19dvh, 205px)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-seat-grid { grid-template-columns: repeat(5, clamp(232px, 17.2vw, 330px)) !important; grid-template-rows: repeat(2, clamp(155px, 11.47vw, 220px)) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="1v1"]:not([hidden]) .room-seat { min-height: clamp(210px, 27dvh, 280px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="2v2"]:not([hidden]) .room-seat { min-height: clamp(174px, 22dvh, 230px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="3v3"]:not([hidden]) .room-seat { min-height: clamp(160px, 19dvh, 205px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) .room-seat { min-height: clamp(155px, 11.47vw, 220px) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat > .room-seat-identity { position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; width: max-content !important; max-width: calc(100% - 86px) !important; min-width: 0 !important; min-height: 34px !important; margin: 0 !important; padding: 0 clamp(12px, 1.2vw, 18px) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: clamp(5px, 0.6vw, 8px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: translate(-50%, -50%) !important; z-index: 7 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat .room-seat-slot, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat .room-seat-person, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat .room-seat-person .player-name, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat .room-seat-person .player-name-text, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat .room-seat-separator { min-width: 0 !important; width: auto !important; max-width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #17324d !important; -webkit-text-fill-color: currentColor !important; font-size: inherit !important; line-height: 1 !important; white-space: nowrap !important; text-align: center !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat .room-seat-separator { min-width: 0.75em !important; flex: 0 0 auto !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) .room-seat .room-seat-actions { position: absolute !important; left: 50% !important; right: auto !important; top: auto !important; bottom: clamp(16px, 1.8vh, 26px) !important; width: min(160px, calc(100% - 64px)) !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; transform: translateX(-50%) !important; z-index: 6 !important; } } /* V1.27Beta-settlement-pill1: keep the settlement lock functional but make the visible cue compact. */ html body:not(.maintenance-mode) .settlement-lock-overlay { position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important; pointer-events: auto !important; background: transparent !important; z-index: 230 !important; } html body:not(.maintenance-mode) .settlement-lock-overlay[hidden] { display: none !important; } html body:not(.maintenance-mode) .settlement-lock-overlay strong { width: max-content !important; min-width: 0 !important; max-width: min(176px, calc(100% - 28px)) !important; min-height: 30px !important; padding: 6px 12px 7px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; border: 1px solid rgba(246, 200, 95, 0.5) !important; border-radius: 999px !important; color: #fff4cf !important; -webkit-text-fill-color: currentColor !important; background: linear-gradient(180deg, rgba(20, 26, 37, 0.78), rgba(8, 12, 19, 0.72)), rgba(5, 7, 12, 0.72) !important; box-shadow: inset 0 1px 0 rgba(255, 246, 208, 0.18), 0 8px 22px rgba(0, 0, 0, 0.24), 0 0 14px rgba(246, 200, 95, 0.14) !important; font-size: clamp(13px, 1.05vw, 15px) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.68), 0 0 8px rgba(246, 200, 95, 0.18) !important; animation: settlementLockPulse 980ms ease-in-out infinite alternate !important; } html body:not(.maintenance-mode) .settlement-hourglass { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; } html body:not(.maintenance-mode) .settlement-lock-overlay strong span { display: block !important; transform: none !important; white-space: nowrap !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) .settlement-lock-overlay strong { max-width: min(152px, calc(100% - 22px)) !important; min-height: 27px !important; padding: 5px 10px 6px !important; gap: 6px !important; font-size: 12px !important; } html body:not(.maintenance-mode) .settlement-hourglass { width: 15px !important; height: 15px !important; flex-basis: 15px !important; } } /* V1.27Beta-identity-codex-role-costumes1: codex identity art uses the cast in identity-role costumes, not generic mode art. */ html body:not(.maintenance-mode) { --identity-role-costume-codex-art: url("assets/ui/codex-card-identity-role-costumes-v1.png?v=V1.27Beta-identity-costumes1"); } html body:not(.maintenance-mode) #gameCodexDialog #codexOpenIdentity.game-codex-card, html body:not(.maintenance-mode) #codexOpenIdentity.game-codex-identity { background: linear-gradient(180deg, rgba(4, 7, 14, 0.08), rgba(4, 7, 14, 0.42) 58%, rgba(5, 6, 11, 0.78)), var(--identity-role-costume-codex-art) center / cover no-repeat !important; border-color: rgba(150, 218, 255, 0.58) !important; box-shadow: inset 0 0 0 1px rgba(255, 246, 208, 0.12), 0 18px 34px rgba(16, 16, 38, 0.34), 0 0 24px rgba(126, 82, 255, 0.18) !important; } html body:not(.maintenance-mode) .identity-rule-card, html body:not(.maintenance-mode) .identity-rules-box, html body:not(.maintenance-mode) .identity-rules-hero { background: linear-gradient(180deg, rgba(4, 7, 14, 0.16), rgba(4, 7, 14, 0.68) 62%, rgba(5, 6, 11, 0.88)), var(--identity-role-costume-codex-art) center / cover no-repeat, rgba(8, 10, 18, 0.94) !important; } html body:not(.maintenance-mode) .identity-rules-hero { background-position: center 42% !important; } /* V1.27Beta-identity-battle-position1: move identity battlefield content without moving the battle log. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle.battle.identity-battle:not([hidden]) { overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle #teamBoard.team-board:not([hidden]) { transform: translate(clamp(42px, 3.8vw, 78px), clamp(24px, 3vh, 44px)) !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards { transform: translate(clamp(42px, 3.8vw, 78px), clamp(24px, 3vh, 44px)) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle .battle-libraries { position: fixed !important; left: clamp(18px, 2.2vw, 34px) !important; right: auto !important; top: auto !important; bottom: max(clamp(18px, 2.8vh, 36px), env(safe-area-inset-bottom)) !important; width: auto !important; min-width: 0 !important; max-width: calc(50vw - 220px) !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; grid-template-columns: none !important; grid-auto-flow: column !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; z-index: 78 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle .utility { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(clamp(18px, 2.8vh, 36px), env(safe-area-inset-bottom)) !important; width: min(340px, calc(100vw - 520px)) !important; min-width: 260px !important; max-width: 340px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 150px)) !important; justify-content: center !important; gap: 10px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: translateX(-50%) !important; z-index: 82 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle .utility:has(#rematch:not([hidden])) { width: min(500px, calc(100vw - 480px)) !important; max-width: 500px !important; grid-template-columns: repeat(3, minmax(0, 150px)) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle .utility #rematch[hidden] { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle .utility button { height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding: 0 14px !important; display: inline-grid !important; place-items: center !important; font-size: 13px !important; line-height: 1 !important; white-space: nowrap !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle .battle-libraries { position: fixed !important; left: max(8px, env(safe-area-inset-left)) !important; right: auto !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; width: auto !important; display: inline-flex !important; gap: 6px !important; z-index: 84 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle .utility { position: fixed !important; left: 50% !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; width: min(196px, calc(100vw - 190px)) !important; min-width: 156px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; transform: translateX(-50%) !important; z-index: 86 !important; } } /* V1.27Beta-home-mode-whitegold1: homepage mode cards use independent white-gold framed art. */ :root { --home-mode-1v1-art: url("assets/ui/mode-1v1-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-whitegold-mobile1") !important; --home-mode-2v2-art: url("assets/ui/mode-2v2-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-whitegold-mobile1") !important; --home-mode-3v3-art: url("assets/ui/mode-3v3-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-whitegold-mobile1") !important; --home-mode-identity-art: url("assets/ui/mode-identity-home-whitegold-council-v1.png?v=V1.27Beta-home-mode-whitegold-mobile1") !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"] { --mode-art: var(--home-mode-1v1-art) !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="2v2"] { --mode-art: var(--home-mode-2v2-art) !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="3v3"] { --mode-art: var(--home-mode-3v3-art) !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="identity"] { --mode-art: var(--home-mode-identity-art) !important; } /* V1.27Beta-modebadge-thumb-final-align1: special thumbnails use one clean left edge and no inherited black rounded shell. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) em { position: relative !important; display: grid !important; grid-auto-flow: row !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; justify-items: start !important; place-items: start start !important; gap: 0 !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) em > .skill-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) em > .mode-tip { box-sizing: border-box !important; appearance: none !important; -webkit-appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-items: center !important; place-items: center !important; width: fit-content !important; inline-size: fit-content !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: min(106px, 100%) !important; max-inline-size: min(106px, 100%) !important; height: 23px !important; min-height: 23px !important; max-height: 23px !important; margin: 0 !important; padding: 0 7px 1px 8px !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; isolation: auto !important; text-align: center !important; text-indent: 0 !important; white-space: nowrap !important; overflow: hidden !important; overflow-wrap: normal !important; text-overflow: ellipsis !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) em > .skill-tip::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) em > .skill-tip::after, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) em > .mode-tip::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) em > .mode-tip::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) em > .skill-tip:not(.mode-tip) { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; z-index: 4 !important; visibility: visible !important; opacity: 1 !important; color: #15110a !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(251, 215, 112, 0.92) !important; border-left: 3px solid rgba(18, 12, 6, 0.95) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.96), transparent 46%), linear-gradient(90deg, rgba(255, 248, 232, 0.96), rgba(255, 229, 124, 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; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) em > .mode-tip { position: absolute !important; left: 0 !important; top: auto !important; right: auto !important; bottom: calc(100% + 3px) !important; z-index: 6 !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] em > .mode-tip { color: #fffbe8 !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(255, 210, 120, 0.96) !important; border-left: 3px solid 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(235, 181, 68, 0.94) 52%, 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; text-shadow: 0 1px 3px rgba(25, 47, 20, 0.74), 0 0 10px rgba(255, 221, 112, 0.34) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] em > .mode-tip { color: #f08fc4 !important; -webkit-text-fill-color: currentColor !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) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] em > .mode-tip { 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) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) em > .mode-tip > .skill-inline-text { display: inline-block !important; position: static !important; width: auto !important; inline-size: auto !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-indent: 0 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) em > .skill-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) em > .mode-tip { max-width: min(96px, 100%) !important; max-inline-size: min(96px, 100%) !important; height: clamp(20px, 5.6vw, 23px) !important; min-height: clamp(20px, 5.6vw, 23px) !important; max-height: clamp(20px, 5.6vw, 23px) !important; padding: 0 6px 1px 7px !important; font-size: clamp(9px, 2.45vw, 10.5px) !important; } } /* V1.27Beta-modebadge-thumb-final-align2: defeat older per-character badge rules and remove every thumbnail shell. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-items: start !important; align-items: start !important; place-items: start start !important; gap: 0 !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: 23px !important; min-height: 23px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; clip-path: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.mode-tip.mode-tip, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip:not(.mode-tip) { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-items: center !important; place-items: center !important; width: fit-content !important; inline-size: fit-content !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: min(106px, 100%) !important; max-inline-size: min(106px, 100%) !important; height: 23px !important; min-height: 23px !important; max-height: 23px !important; margin: 0 !important; padding: 0 7px 1px 8px !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%) !important; text-align: center !important; text-indent: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip:not(.mode-tip) { position: relative !important; left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important; z-index: 4 !important; color: #15110a !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(251, 215, 112, 0.92) !important; border-left: 3px solid rgba(18, 12, 6, 0.95) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.96), transparent 46%), linear-gradient(90deg, rgba(255, 248, 232, 0.96), rgba(255, 229, 124, 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; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.mode-tip.mode-tip { position: absolute !important; left: 0 !important; top: auto !important; right: auto !important; bottom: calc(100% + 3px) !important; z-index: 6 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip::after, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip > .skill-inline-text::before, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip > .skill-inline-text::after { content: none !important; display: none !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip > .skill-inline-text { display: inline-block !important; position: static !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-indent: 0 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* V1.27Beta-home-mode-mobile-whitegold2: phone homepage mode buttons use the new framed art directly. */ html body:not(.maintenance-mode) { --home-mode-1v1-art: url("assets/ui/mode-1v1-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold2") !important; --home-mode-2v2-art: url("assets/ui/mode-2v2-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold2") !important; --home-mode-3v3-art: url("assets/ui/mode-3v3-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold2") !important; --home-mode-identity-art: url("assets/ui/mode-identity-home-whitegold-council-v1.png?v=V1.27Beta-home-mode-mobile-whitegold2") !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] { background-color: #061425 !important; background-size: cover, cover, cover !important; background-position: center center, center center, center center !important; background-repeat: no-repeat, no-repeat, 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]::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[data-mode]::after { content: none !important; display: none !important; background: none !important; opacity: 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) .mode-select button[data-mode="1v1"] { --mode-art: url("assets/ui/mode-1v1-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold2") !important; background: linear-gradient(90deg, rgba(5, 15, 28, 0.44) 0%, rgba(5, 15, 28, 0.22) 42%, rgba(5, 15, 28, 0.04) 82%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(4, 18, 31, 0.08)), url("assets/ui/mode-1v1-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold2") 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="2v2"] { --mode-art: url("assets/ui/mode-2v2-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold2") !important; background: linear-gradient(90deg, rgba(5, 15, 28, 0.44) 0%, rgba(5, 15, 28, 0.22) 42%, rgba(5, 15, 28, 0.04) 82%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(4, 18, 31, 0.08)), url("assets/ui/mode-2v2-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold2") 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="3v3"] { --mode-art: url("assets/ui/mode-3v3-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold2") !important; background: linear-gradient(90deg, rgba(5, 15, 28, 0.44) 0%, rgba(5, 15, 28, 0.22) 42%, rgba(5, 15, 28, 0.04) 82%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(4, 18, 31, 0.08)), url("assets/ui/mode-3v3-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold2") 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="identity"] { --mode-art: url("assets/ui/mode-identity-home-whitegold-council-v1.png?v=V1.27Beta-home-mode-mobile-whitegold2") !important; background: linear-gradient(90deg, rgba(5, 15, 28, 0.44) 0%, rgba(5, 15, 28, 0.22) 42%, rgba(5, 15, 28, 0.04) 82%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(4, 18, 31, 0.08)), url("assets/ui/mode-identity-home-whitegold-council-v1.png?v=V1.27Beta-home-mode-mobile-whitegold2") center / cover no-repeat !important; } /* V1.27Beta-home-mode-mobile-whitegold3: higher-specificity lock over legacy mobile mode-card backgrounds. */ html body:not(.maintenance-mode) main#appRoot#appRoot.app.solo.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select.mode-select button[data-mode][data-mode] { background-color: #061425 !important; background-size: cover, cover, cover !important; background-position: center center, center center, center center !important; background-repeat: no-repeat, no-repeat, no-repeat !important; } html body:not(.maintenance-mode) main#appRoot#appRoot.app.solo.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select.mode-select button[data-mode="1v1"][data-mode] { --mode-art: url("assets/ui/mode-1v1-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold3") !important; background: linear-gradient(90deg, rgba(5, 15, 28, 0.44) 0%, rgba(5, 15, 28, 0.22) 42%, rgba(5, 15, 28, 0.04) 82%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(4, 18, 31, 0.08)), url("assets/ui/mode-1v1-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold3") center / cover no-repeat !important; } html body:not(.maintenance-mode) main#appRoot#appRoot.app.solo.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select.mode-select button[data-mode="2v2"][data-mode] { --mode-art: url("assets/ui/mode-2v2-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold3") !important; background: linear-gradient(90deg, rgba(5, 15, 28, 0.44) 0%, rgba(5, 15, 28, 0.22) 42%, rgba(5, 15, 28, 0.04) 82%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(4, 18, 31, 0.08)), url("assets/ui/mode-2v2-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold3") center / cover no-repeat !important; } html body:not(.maintenance-mode) main#appRoot#appRoot.app.solo.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select.mode-select button[data-mode="3v3"][data-mode] { --mode-art: url("assets/ui/mode-3v3-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold3") !important; background: linear-gradient(90deg, rgba(5, 15, 28, 0.44) 0%, rgba(5, 15, 28, 0.22) 42%, rgba(5, 15, 28, 0.04) 82%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(4, 18, 31, 0.08)), url("assets/ui/mode-3v3-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold3") center / cover no-repeat !important; } html body:not(.maintenance-mode) main#appRoot#appRoot.app.solo.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) .mode-select.mode-select button[data-mode="identity"][data-mode] { --mode-art: url("assets/ui/mode-identity-home-whitegold-council-v1.png?v=V1.27Beta-home-mode-mobile-whitegold3") !important; background: linear-gradient(90deg, rgba(5, 15, 28, 0.44) 0%, rgba(5, 15, 28, 0.22) 42%, rgba(5, 15, 28, 0.04) 82%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(4, 18, 31, 0.08)), url("assets/ui/mode-identity-home-whitegold-council-v1.png?v=V1.27Beta-home-mode-mobile-whitegold3") center / cover no-repeat !important; } /* V1.27Beta-home-mode-mobile-whitegold4: broad solo lock because mobile can keep stale state classes while showing home controls. */ html body:not(.maintenance-mode) #appRoot#appRoot.app.solo.solo .mode-select.mode-select button[data-mode][data-mode] { background-color: #061425 !important; background-size: cover, cover, cover !important; background-position: center center, center center, center center !important; background-repeat: no-repeat, no-repeat, no-repeat !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app.solo.solo .mode-select.mode-select button[data-mode="1v1"][data-mode] { --mode-art: url("assets/ui/mode-1v1-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold4") !important; background: linear-gradient(90deg, rgba(5, 15, 28, 0.44) 0%, rgba(5, 15, 28, 0.22) 42%, rgba(5, 15, 28, 0.04) 82%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(4, 18, 31, 0.08)), url("assets/ui/mode-1v1-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold4") center / cover no-repeat !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app.solo.solo .mode-select.mode-select button[data-mode="2v2"][data-mode] { --mode-art: url("assets/ui/mode-2v2-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold4") !important; background: linear-gradient(90deg, rgba(5, 15, 28, 0.44) 0%, rgba(5, 15, 28, 0.22) 42%, rgba(5, 15, 28, 0.04) 82%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(4, 18, 31, 0.08)), url("assets/ui/mode-2v2-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold4") center / cover no-repeat !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app.solo.solo .mode-select.mode-select button[data-mode="3v3"][data-mode] { --mode-art: url("assets/ui/mode-3v3-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold4") !important; background: linear-gradient(90deg, rgba(5, 15, 28, 0.44) 0%, rgba(5, 15, 28, 0.22) 42%, rgba(5, 15, 28, 0.04) 82%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(4, 18, 31, 0.08)), url("assets/ui/mode-3v3-home-whitegold-frame-v1.png?v=V1.27Beta-home-mode-mobile-whitegold4") center / cover no-repeat !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app.solo.solo .mode-select.mode-select button[data-mode="identity"][data-mode] { --mode-art: url("assets/ui/mode-identity-home-whitegold-council-v1.png?v=V1.27Beta-home-mode-mobile-whitegold4") !important; background: linear-gradient(90deg, rgba(5, 15, 28, 0.44) 0%, rgba(5, 15, 28, 0.22) 42%, rgba(5, 15, 28, 0.04) 82%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(4, 18, 31, 0.08)), url("assets/ui/mode-identity-home-whitegold-council-v1.png?v=V1.27Beta-home-mode-mobile-whitegold4") center / cover no-repeat !important; } /* V1.27Beta-identity-room-mobile-lift3: move the identity-room controls up and make the rules panel readable. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) { --identity-room-head-top: clamp(92px, 10.8dvh, 104px); --identity-room-seat-top: clamp(196px, 23dvh, 214px); --identity-room-action-bottom: max(92px, calc(env(safe-area-inset-bottom) + 88px)); overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > .room-lobby-head { position: fixed !important; left: 50% !important; top: var(--identity-room-head-top) !important; width: min(360px, calc(100vw - 28px)) !important; margin: 0 !important; padding: 8px 12px 10px !important; transform: translateX(-50%) !important; z-index: 30 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > #identityRules.identity-rules { position: fixed !important; left: max(14px, calc(50vw - 180px + 8px)) !important; top: calc(var(--identity-room-head-top) - 34px) !important; right: auto !important; bottom: auto !important; width: auto !important; min-width: 0 !important; max-width: calc(100vw - 28px) !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; z-index: 46 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > #identityRules.identity-rules > summary { box-sizing: border-box !important; min-height: 28px !important; height: 28px !important; width: max-content !important; max-width: calc(100vw - 28px) !important; padding: 0 11px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; border: 1px solid rgba(247, 216, 136, 0.82) !important; border-radius: 7px !important; color: #173d5c !important; -webkit-text-fill-color: currentColor !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(231, 246, 255, 0.78)), linear-gradient(90deg, rgba(255, 239, 176, 0.46), rgba(126, 213, 255, 0.24)) !important; box-shadow: 0 8px 16px rgba(16, 56, 86, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important; font-size: 11px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.74) !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > #identityRules.identity-rules > summary::after { width: 16px !important; height: 16px !important; min-width: 16px !important; border-color: rgba(68, 130, 174, 0.5) !important; color: #9b6a12 !important; background: rgba(255, 255, 255, 0.54) !important; font-size: 12px !important; line-height: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > #identityRules.identity-rules[open] > .identity-rules-body { position: fixed !important; left: 50% !important; top: calc(var(--identity-room-head-top) + 92px) !important; width: min(360px, calc(100vw - 24px)) !important; max-width: min(360px, calc(100vw - 24px)) !important; max-height: min(360px, calc(100dvh - 288px)) !important; margin: 0 !important; padding: 14px 16px 16px !important; display: grid !important; gap: 9px !important; overflow: auto !important; transform: translateX(-50%) !important; z-index: 47 !important; border: 1px solid rgba(245, 213, 132, 0.74) !important; border-radius: 12px !important; color: #17324d !important; -webkit-text-fill-color: currentColor !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(235, 248, 255, 0.94)), rgba(255, 255, 255, 0.94) !important; box-shadow: 0 18px 34px rgba(8, 35, 60, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important; font-size: 12.5px !important; font-weight: 800 !important; line-height: 1.52 !important; text-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > #identityRules.identity-rules[open] > .identity-rules-body p, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > #identityRules.identity-rules[open] > .identity-rules-body ul, html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > #identityRules.identity-rules[open] > .identity-rules-body li { color: #17324d !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > #identityRules.identity-rules[open] > .identity-rules-body b { color: #8b5b09 !important; -webkit-text-fill-color: currentColor !important; } html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="identity"]:not([hidden]) > #roomSeatGrid.room-seat-grid { position: fixed !important; left: 50% !important; top: var(--identity-room-seat-top) !important; bottom: calc(var(--identity-room-action-bottom) + 108px) !important; width: min(430px, calc(100vw - 18px)) !important; max-width: min(430px, calc(100vw - 18px)) !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 2px 0 8px !important; transform: translateX(-50%) !important; overflow-y: auto !important; overflow-x: visible !important; align-content: start !important; justify-content: center !important; z-index: 18 !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: var(--identity-room-action-bottom) !important; width: min(430px, calc(100vw - 18px)) !important; max-width: min(430px, calc(100vw - 18px)) !important; margin: 0 !important; transform: translateX(-50%) !important; z-index: 34 !important; } } /* V1.27Beta-room-1v1-mobile-actions-lift1: keep 1v1 room buttons clear of the floating controls. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby[data-mode="1v1"]:not([hidden]) > #roomSeatGrid.room-seat-grid { max-height: min(448px, calc(100dvh - 292px)) !important; align-content: start !important; overflow: visible !important; } } /* V1.27Beta-thumb-special-skill-align1: special-form thumbnails keep the normal skill badge aligned with normal cards. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em { width: min(96px, calc(100% - 10px)) !important; min-width: 0 !important; max-width: min(96px, calc(100% - 10px)) !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 7px 8px !important; gap: 2px !important; align-self: end !important; justify-self: start !important; align-items: start !important; justify-items: start !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; clip-path: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip:not(.mode-tip) { position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; z-index: 7 !important; display: grid !important; width: fit-content !important; inline-size: fit-content !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: min(96px, 100%) !important; max-inline-size: min(96px, 100%) !important; height: clamp(20px, 5.6vw, 23px) !important; min-height: clamp(20px, 5.6vw, 23px) !important; max-height: clamp(20px, 5.6vw, 23px) !important; margin: 0 !important; padding: 0 6px 1px 7px !important; align-items: center !important; justify-content: center !important; justify-items: center !important; place-items: center !important; color: #18334b !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(159, 205, 230, 0.88) !important; border-left: 3px solid rgba(76, 141, 185, 0.94) !important; border-radius: 0 !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 243, 252, 0.92)), rgba(228, 244, 255, 0.94) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 5px 12px rgba(26, 84, 125, 0.14) !important; clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%) !important; font-size: clamp(9px, 2.45vw, 10.5px) !important; font-weight: 950 !important; line-height: 1 !important; text-align: center !important; text-indent: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.mode-tip.mode-tip { left: 7px !important; right: auto !important; bottom: calc(100% + 3px) !important; } } /* V1.27Beta-thumb-special-mode-left-align1: align special-mode badges with the normal skill badge left edge on mobile thumbnails. */ /* V1.27Beta-rhasta-closed-mode-crop-down1: nudge 61's closed special-mode portrait body lower on phones. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-character="Rhasta"][data-mode="devour-world"][data-preview-mode-active="false"] .mode-dialog-art { background-position: 50% 46% !important; } } /* V1.27Beta-mobile-duel-open-frame1: open up phone 1v1 battle cards and shrink the deck row. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighters { --mobile-fighter-card-h: clamp(220px, 26.6dvh, 242px) !important; --mobile-status-panel-w: clamp(104px, 28vw, 118px) !important; --mobile-fighter-gap: 5px !important; --mobile-versus-size: 23px !important; gap: var(--mobile-fighter-gap) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .combatant, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .opponent-combatant { gap: 5px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .combatant::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .combatant::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .opponent-combatant::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .opponent-combatant::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter::after { content: none !important; display: none !important; opacity: 0 !important; visibility: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter { position: relative !important; padding: 0 !important; grid-template-rows: minmax(0, 1fr) !important; gap: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter-head { position: absolute !important; left: 6px !important; top: 6px !important; z-index: 16 !important; box-sizing: border-box !important; width: max-content !important; max-width: calc(100% - 12px) !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; margin: 0 !important; padding: 0 7px !important; display: inline-grid !important; grid-template-columns: auto minmax(0, auto) !important; align-items: center !important; justify-content: start !important; gap: 4px !important; overflow: hidden !important; border: 1px solid rgba(219, 237, 248, 0.58) !important; border-radius: 7px !important; background: linear-gradient(180deg, rgba(9, 17, 28, 0.74), rgba(5, 10, 18, 0.62)), rgba(8, 18, 30, 0.62) !important; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter-side, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter-head strong { min-width: 0 !important; max-width: 100% !important; color: rgba(245, 251, 255, 0.96) !important; -webkit-text-fill-color: currentColor !important; font-size: 9px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.86) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter-side { display: inline-flex !important; align-items: center !important; gap: 2px !important; opacity: 0.88 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .character-face { width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; align-self: stretch !important; justify-self: stretch !important; aspect-ratio: auto !important; grid-template-rows: minmax(0, 1fr) 50px !important; gap: 0 !important; overflow: hidden !important; border: 1px solid rgba(130, 185, 218, 0.56) !important; border-radius: 12px !important; background: rgba(5, 9, 16, 0.78) !important; box-shadow: 0 7px 14px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .avatar { border-radius: 11px 11px 0 0 !important; clip-path: inset(0 round 11px 11px 0 0) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .role-card { min-height: 50px !important; max-height: 50px !important; border-radius: 0 0 11px 11px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter-panel { padding: 4px !important; gap: 3px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) { gap: 6px !important; padding-bottom: 8px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .battle-libraries { min-height: 54px !important; grid-template-rows: 54px !important; grid-auto-rows: 54px !important; gap: 6px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #showOpportunityLibraryBattle.library-action, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #showArtifactLibraryBattle.library-action { height: 54px !important; min-height: 54px !important; max-height: 54px !important; padding: 0 6px 5px !important; border-radius: 10px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .battle-libraries > button.library-action > span { padding: 2px 6px !important; font-size: 10px !important; } } /* V1.27Beta-mobile-duel-target-frame1: anchor phone 1v1 target selection to the portrait panel, not the removed outer fighter frame. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter.target-candidate, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter.selected-target, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter.attack-target-candidate { outline: 0 !important; outline-offset: 0 !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target)::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target) .character-face { --mobile-target-frame: rgba(108, 214, 255, 0.96); --mobile-target-node: rgba(255, 250, 217, 0.98); --mobile-target-glow: rgba(93, 198, 255, 0.38); position: relative !important; isolation: isolate !important; border-color: color-mix(in srgb, var(--mobile-target-frame) 70%, rgba(255, 255, 255, 0.28)) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--mobile-target-frame) 34%, transparent), 0 0 16px var(--mobile-target-glow), 0 8px 18px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter.attack-target-candidate .character-face { --mobile-target-frame: rgba(255, 125, 92, 0.98); --mobile-target-node: rgba(255, 231, 150, 1); --mobile-target-glow: rgba(255, 101, 77, 0.44); } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter[data-target-kind="ally"] .character-face { --mobile-target-frame: rgba(91, 235, 181, 0.96); --mobile-target-node: rgba(216, 255, 236, 0.98); --mobile-target-glow: rgba(77, 226, 169, 0.38); } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter[data-target-kind="self"] .character-face { --mobile-target-frame: rgba(246, 207, 92, 0.98); --mobile-target-node: rgba(255, 252, 210, 1); --mobile-target-glow: rgba(246, 200, 95, 0.42); } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target) .character-face::after { content: "" !important; position: absolute !important; inset: 2px !important; z-index: 30 !important; pointer-events: none !important; border: 2px solid color-mix(in srgb, var(--mobile-target-frame) 78%, rgba(255, 255, 255, 0.24)) !important; border-radius: 10px !important; background: radial-gradient(circle at 0 0, var(--mobile-target-node) 0 2px, transparent 4px), radial-gradient(circle at 100% 0, var(--mobile-target-node) 0 2px, transparent 4px), radial-gradient(circle at 0 100%, var(--mobile-target-node) 0 2px, transparent 4px), radial-gradient(circle at 100% 100%, var(--mobile-target-node) 0 2px, transparent 4px), linear-gradient(var(--mobile-target-frame) 0 0) left top / 34px 2px no-repeat, linear-gradient(var(--mobile-target-frame) 0 0) right top / 34px 2px no-repeat, linear-gradient(var(--mobile-target-frame) 0 0) left bottom / 34px 2px no-repeat, linear-gradient(var(--mobile-target-frame) 0 0) right bottom / 34px 2px no-repeat, linear-gradient(var(--mobile-target-frame) 0 0) left top / 2px 28px no-repeat, linear-gradient(var(--mobile-target-frame) 0 0) right top / 2px 28px no-repeat, linear-gradient(var(--mobile-target-frame) 0 0) left bottom / 2px 28px no-repeat, linear-gradient(var(--mobile-target-frame) 0 0) right bottom / 2px 28px no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--mobile-target-frame) 12%, transparent), transparent 34%, color-mix(in srgb, var(--mobile-target-frame) 9%, transparent)) !important; box-shadow: inset 0 0 18px color-mix(in srgb, var(--mobile-target-frame) 12%, transparent), 0 0 14px var(--mobile-target-glow), 0 0 28px color-mix(in srgb, var(--mobile-target-glow) 72%, transparent) !important; opacity: 0.94 !important; animation: mobileDuelTargetFramePulse 1.85s ease-in-out infinite !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter.selected-target .character-face::after { inset: 0 !important; border-color: color-mix(in srgb, var(--mobile-target-frame) 88%, #ffffff 12%) !important; opacity: 1 !important; box-shadow: inset 0 0 22px color-mix(in srgb, var(--mobile-target-frame) 18%, transparent), 0 0 18px var(--mobile-target-glow), 0 0 34px color-mix(in srgb, var(--mobile-target-glow) 82%, transparent) !important; } } @keyframes mobileDuelTargetFramePulse { 0%, 100% { opacity: 0.78; filter: drop-shadow(0 0 5px var(--mobile-target-glow)); } 50% { opacity: 1; filter: drop-shadow(0 0 11px var(--mobile-target-glow)); } } /* V1.27Beta-action-standard-1280x720-1: render every action button with the approved 1280x720 source geometry. */ html body:not(.maintenance-mode) #battle #cards.cards .action-card, html body:not(.maintenance-mode) #cards.cards .action-card, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card { position: relative !important; aspect-ratio: 16 / 9 !important; min-height: 0 !important; height: auto !important; overflow: visible !important; background-position: center center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.attack, html body:not(.maintenance-mode) #cards.cards .action-card.attack, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card.attack, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.attack { background: var(--action-attack-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.defend, html body:not(.maintenance-mode) #cards.cards .action-card.defend, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card.defend, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.defend { background: var(--action-defend-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.charge, html body:not(.maintenance-mode) #cards.cards .action-card.charge, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card.charge, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.charge { background: var(--action-charge-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card span, html body:not(.maintenance-mode) #cards.cards .action-card span, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card span, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card span { position: absolute !important; left: 34.921875% !important; top: 22.916667% !important; width: 64.6875% !important; height: 48.333333% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 4% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1 !important; letter-spacing: 0 !important; transform: none !important; z-index: 2 !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card { aspect-ratio: 16 / 9 !important; background-size: 100% 100% !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card span, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card span { left: 34.921875% !important; top: 22.916667% !important; width: 64.6875% !important; height: 48.333333% !important; padding: 0 3.5% !important; font-size: clamp(10px, 3.1vw, 13px) !important; } } /* V1.27Beta-mobile-home-join-fit1: give the phone home "join room" button enough breathing room. */ @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, 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: 100% !important; max-width: 100% !important; min-height: 56px !important; padding: 6px !important; grid-template-columns: minmax(0, 1fr) clamp(118px, 34vw, 138px) !important; gap: 7px !important; align-items: 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) .join-row #joinCode, 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 #joinRoom { height: 44px !important; min-height: 44px !important; max-height: 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) .join-row #joinRoom { min-width: 118px !important; padding: 0 10px 1px !important; display: inline-grid !important; place-items: center !important; font-size: clamp(11px, 3.05vw, 12px) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; } } @media (max-width: 380px) { 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, 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 { grid-template-columns: minmax(0, 1fr) 116px !important; } } /* V1.27Beta-mobile-duel-1v1-status-actions1: readable phone 1v1 stat rail and non-distorted action panels. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighters { --mobile-fighter-card-h: clamp(248px, 31dvh, 286px) !important; --mobile-status-panel-w: clamp(128px, 36vw, 150px) !important; --mobile-fighter-gap: 6px !important; grid-template-rows: var(--mobile-fighter-card-h) var(--mobile-versus-size) var(--mobile-fighter-card-h) !important; gap: var(--mobile-fighter-gap) !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .combatant, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .opponent-combatant { height: var(--mobile-fighter-card-h) !important; min-height: var(--mobile-fighter-card-h) !important; max-height: var(--mobile-fighter-card-h) !important; grid-template-columns: minmax(0, 1fr) var(--mobile-status-panel-w) !important; gap: 7px !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel { height: var(--mobile-fighter-card-h) !important; min-height: var(--mobile-fighter-card-h) !important; max-height: var(--mobile-fighter-card-h) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter { padding: 4px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .character-face { grid-template-rows: minmax(0, 1fr) 48px !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; background: transparent !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar { background-image: var(--character-art, none) !important; background-size: cover !important; background-position: var(--art-position, center 18%) !important; background-repeat: no-repeat !important; background-color: transparent !important; border-radius: 10px 10px 0 0 !important; clip-path: inset(0 round 10px 10px 0 0) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel { padding: 5px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto 32px 22px 25px 23px 23px 24px !important; gap: 3px !important; align-content: start !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-bar:not(.has-status) { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-bar { min-height: 0 !important; max-height: 22px !important; padding: 0 !important; display: flex !important; align-items: center !important; gap: 2px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-token { height: 20px !important; min-height: 20px !important; padding: 0 4px !important; gap: 2px !important; font-size: 8px !important; line-height: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .equipment-slots { height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 3px !important; align-items: center !important; justify-items: center !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .equipment-slot { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; border-radius: 7px !important; font-size: 11px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .equipment-slot.filled::before { inset: 1px !important; border-radius: 6px !important; background: var(--equipment-art) center center / cover no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .meter-row { height: 22px !important; min-height: 22px !important; max-height: 22px !important; padding: 2px 3px !important; grid-template-columns: 32px minmax(0, 1fr) auto !important; gap: 3px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fatigue-row { display: contents !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .energy, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fatigue, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .laziness { --stat-mark-size: 7px !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: 23px !important; min-height: 23px !important; max-height: 25px !important; padding: 2px 4px !important; display: grid !important; grid-template-columns: 32px minmax(0, 1fr) !important; align-items: center !important; gap: 2px !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .energy { height: 25px !important; min-height: 25px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .energy > .stat-label, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fatigue > .stat-label, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .laziness > .stat-label { min-width: 0 !important; font-size: 9px !important; line-height: 1 !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .energy .stat-marks { display: grid !important; grid-template-columns: repeat(4, var(--stat-mark-size)) !important; grid-template-rows: repeat(2, var(--stat-mark-size)) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fatigue .stat-marks { display: grid !important; grid-template-columns: repeat(2, var(--stat-mark-size)) !important; grid-template-rows: var(--stat-mark-size) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .laziness .stat-marks { display: grid !important; grid-template-columns: repeat(4, var(--stat-mark-size)) !important; grid-template-rows: var(--stat-mark-size) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .stat-marks { gap: 1px !important; align-items: center !important; align-content: center !important; justify-content: start !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .stat-marks i { width: var(--stat-mark-size) !important; height: var(--stat-mark-size) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .choice { height: 24px !important; min-height: 24px !important; max-height: 24px !important; padding: 2px 4px !important; font-size: 9px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; gap: 6px !important; align-items: start !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 16 / 9 !important; padding: 0 !important; display: block !important; overflow: visible !important; background-size: contain !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.attack { background: var(--action-attack-panel-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.defend { background: var(--action-defend-panel-art) center center / contain no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.charge { background: var(--action-charge-panel-art) center center / contain no-repeat !important; } } /* V1.27Beta-mobile-preview-inscription-right-center1: keep the expanded character card name/title centered inside the card's right-side name area. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]) #previewArt.preview-art { position: relative !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]) #previewArt.preview-art .preview-inscription.card-inscription { left: 62% !important; right: clamp(10px, 4.5vw, 18px) !important; top: 50% !important; bottom: auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; transform: translateY(-50%) !important; display: grid !important; justify-items: center !important; justify-content: center !important; align-items: center !important; text-align: center !important; gap: clamp(5px, 1.1vh, 9px) !important; pointer-events: none !important; z-index: 12 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]) #previewArt.preview-art .preview-inscription.card-inscription small, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]) #previewArt.preview-art .preview-inscription.card-inscription strong { justify-self: center !important; max-width: 100% !important; text-align: center !important; white-space: nowrap !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview.character-preview:not([hidden]) #previewArt.preview-art .preview-inscription.card-inscription small { padding-right: 8px !important; padding-left: 8px !important; } } /* V1.27Beta-persistent-preload1: keep the global resource preload indicator alive after leaving the promo screen. */ body:not(.maintenance-mode) #enterScreen[hidden] + .preload-panel:not([data-preload-ready="true"]) { display: grid !important; opacity: 1 !important; transform: translateX(-50%) !important; } body:not(.maintenance-mode) .preload-panel[data-preload-ready="true"] { pointer-events: none !important; } /* V1.27Beta-lala-art-lower1: nudge Lala's portrait body slightly downward across card, preview, and battle crops. */ body:not(.maintenance-mode) .preview-art[data-character="Lala"], body:not(.maintenance-mode) .mini-art[data-character="Lala"] { --art-position: center 14% !important; } body:not(.maintenance-mode) .avatar[data-character="Lala"] { --art-position: center 14% !important; } body:not(.maintenance-mode) .team-art[data-character="Lala"] { --team-art-position: center 13% !important; } body:not(.maintenance-mode) .battle.identity-battle .team-art[data-character="Lala"] { --team-art-position: center 10% !important; } /* V1.27Beta-discipline-ban-settlement1: Letmetalk's discipline effect slams a large prohibition mark onto the target portrait during settlement. */ body:not(.maintenance-mode) .discipline-ban-mark { position: absolute; z-index: 34; transform: translate(-50%, -50%) scale(0.72); pointer-events: none; border-radius: 50%; opacity: 0; animation: disciplineBanSlam 1120ms cubic-bezier(0.18, 0.86, 0.22, 1) forwards; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.82)) drop-shadow(0 0 22px rgba(239, 45, 67, 0.86)) drop-shadow(0 0 42px rgba(123, 10, 28, 0.62)); } body:not(.maintenance-mode) .discipline-ban-mark::before, body:not(.maintenance-mode) .discipline-ban-mark::after { content: ""; position: absolute; pointer-events: none; } body:not(.maintenance-mode) .discipline-ban-mark::before { inset: 2%; border-radius: 50%; border: clamp(7px, 0.72vw, 12px) solid rgba(255, 246, 235, 0.98); background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), transparent 44%), conic-gradient(from 0deg, rgba(255, 57, 74, 0.98), rgba(255, 205, 160, 0.88), rgba(225, 18, 42, 0.98), rgba(255, 57, 74, 0.98)); box-shadow: inset 0 0 0 clamp(5px, 0.42vw, 8px) rgba(178, 8, 29, 0.98), inset 0 0 34px rgba(255, 12, 48, 0.56), 0 0 0 clamp(2px, 0.22vw, 4px) rgba(93, 4, 18, 0.9), 0 0 30px rgba(255, 50, 75, 0.72); } body:not(.maintenance-mode) .discipline-ban-mark::after { left: 50%; top: 50%; width: 116%; height: clamp(14px, 1.12vw, 20px); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 204, 194, 0.94) 46%, rgba(205, 0, 35, 0.98)); box-shadow: inset 0 -3px 0 rgba(115, 0, 20, 0.74), 0 0 16px rgba(255, 255, 255, 0.78), 0 0 28px rgba(255, 28, 58, 0.82); transform: translate(-50%, -50%) rotate(-42deg); } body:not(.maintenance-mode) .discipline-ban-mark > i, body:not(.maintenance-mode) .discipline-ban-mark > b { position: absolute; inset: -18%; border-radius: 50%; pointer-events: none; } body:not(.maintenance-mode) .discipline-ban-mark > i { border: 1px solid rgba(255, 222, 188, 0.42); animation: disciplineBanRing 780ms ease-out 90ms forwards; } body:not(.maintenance-mode) .discipline-ban-mark > b { background: conic-gradient(from 0turn, transparent 0 8%, rgba(255, 255, 255, 0.86) 9%, transparent 12% 28%, rgba(255, 58, 86, 0.58) 31%, transparent 37% 100%); mix-blend-mode: screen; opacity: 0.72; animation: disciplineBanSpin 1120ms ease-out forwards; } body:not(.maintenance-mode) .settlement-discipline-ban .avatar, body:not(.maintenance-mode) .settlement-discipline-ban .team-art { box-shadow: inset 0 0 0 2px rgba(255, 236, 220, 0.28), inset 0 0 38px rgba(209, 10, 36, 0.28), 0 0 34px rgba(239, 45, 67, 0.44) !important; filter: saturate(1.28) brightness(0.92) contrast(1.08) drop-shadow(0 0 16px rgba(239, 45, 67, 0.44)) !important; } @keyframes disciplineBanSlam { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8) rotate(-15deg); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(0.9) rotate(3deg); } 34% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); } 74% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.14) rotate(0deg); } } @keyframes disciplineBanRing { 0% { opacity: 0.86; transform: scale(0.82); } 100% { opacity: 0; transform: scale(1.45); } } @keyframes disciplineBanSpin { 0% { transform: rotate(-0.12turn) scale(0.8); } 100% { transform: rotate(0.18turn) scale(1.16); } } @media (max-width: 720px) { body:not(.maintenance-mode) .discipline-ban-mark { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.74)) drop-shadow(0 0 18px rgba(239, 45, 67, 0.82)); } } /* V1.27Beta-mobile-duel-status-order1: phone 1v1 stat rail order is health first, then resources, artifacts, statuses, choice. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "hp" "energy" "fatigue" "laziness" "equipment" "status" "choice" !important; grid-template-rows: 26px 27px 25px 25px 36px 22px 24px !important; gap: 3px !important; align-content: start !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel:has(.status-bar:not(.has-status)) { grid-template-areas: "hp" "energy" "fatigue" "laziness" "equipment" "choice" !important; grid-template-rows: 26px 27px 25px 25px 36px 24px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .meter-row { grid-area: hp !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; padding: 2px 4px !important; grid-template-columns: 34px minmax(0, 1fr) auto !important; align-self: stretch !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .energy { grid-area: energy !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .fatigue-row { display: contents !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .fatigue { grid-area: fatigue !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .laziness { grid-area: laziness !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .equipment-slots { grid-area: equipment !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; align-self: stretch !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .equipment-slot { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .status-bar { grid-area: status !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .status-bar:not(.has-status) { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .choice { grid-area: choice !important; align-self: stretch !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .stat-label { min-width: 0 !important; font-size: 9px !important; } } /* V1.27Beta-action-clean-align1: final action button geometry, row alignment, transparent cutouts, and exact template text placement. */ html body:not(.maintenance-mode) #battle #cards.cards, html body:not(.maintenance-mode) #cards.cards, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards { --action-template-left: 34.921875%; --action-template-top: 22.916667%; --action-template-width: 64.6875%; --action-template-height: 48.333333%; box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; align-items: center !important; justify-items: stretch !important; gap: clamp(6px, 1vw, 11px) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card, html body:not(.maintenance-mode) #cards.cards .action-card, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card { position: relative !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 16 / 9 !important; align-self: center !important; justify-self: stretch !important; padding: 0 !important; display: block !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-position: center center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; box-shadow: none !important; color: transparent !important; transform: none !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.attack, html body:not(.maintenance-mode) #cards.cards .action-card.attack, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card.attack, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.attack { background: var(--action-attack-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.defend, html body:not(.maintenance-mode) #cards.cards .action-card.defend, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card.defend, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.defend { background: var(--action-defend-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.charge, html body:not(.maintenance-mode) #cards.cards .action-card.charge, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card.charge, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.charge { background: var(--action-charge-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card::before, html body:not(.maintenance-mode) #battle #cards.cards .action-card::after, html body:not(.maintenance-mode) #cards.cards .action-card::before, html body:not(.maintenance-mode) #cards.cards .action-card::after, html body:not(.maintenance-mode) #battle #cards.cards .action-card .action-icon, html body:not(.maintenance-mode) #cards.cards .action-card .action-icon { content: none !important; display: none !important; opacity: 0 !important; visibility: hidden !important; background: none !important; box-shadow: none !important; -webkit-mask: none !important; mask: none !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card span, html body:not(.maintenance-mode) #cards.cards .action-card span, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card span, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card span { position: absolute !important; left: var(--action-template-left) !important; top: var(--action-template-top) !important; width: var(--action-template-width) !important; height: var(--action-template-height) !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 4% !important; box-sizing: border-box !important; display: grid !important; place-items: center !important; color: #f8fbff !important; -webkit-text-fill-color: #f8fbff !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 0 8px rgba(255, 255, 255, 0.2) !important; transform: none !important; z-index: 3 !important; pointer-events: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards { width: 100% !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: center !important; justify-items: stretch !important; gap: 6px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card { aspect-ratio: 16 / 9 !important; align-self: center !important; background-size: 100% 100% !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card span, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle #cards.cards .action-card span { left: var(--action-template-left) !important; top: var(--action-template-top) !important; width: var(--action-template-width) !important; height: var(--action-template-height) !important; padding: 0 3.5% !important; font-size: clamp(10px, 3vw, 13px) !important; } } /* V1.27Beta-mobile-duel-cleanhud1: cleaner phone 1v1 stat HUD, full-height portraits, and fixed action panel aspect. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighters { --mobile-status-panel-w: clamp(132px, 36vw, 154px) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .character-face { grid-template-rows: minmax(0, 1fr) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar { min-height: 100% !important; border-radius: 10px !important; clip-path: inset(0 round 10px) !important; background-size: cover !important; background-position: var(--art-position, center 18%) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar[data-character="Lollipopz"] { --art-position: center 10% !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card { position: absolute !important; left: 5px !important; right: 5px !important; bottom: 5px !important; z-index: 8 !important; min-height: 0 !important; height: auto !important; padding: 0 !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card > span { width: auto !important; max-width: 100% !important; display: flex !important; justify-content: center !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .skill-label { max-width: 100% !important; display: inline-flex !important; justify-content: center !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-action, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-name { max-width: min(100%, 116px) !important; min-height: 20px !important; padding: 3px 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; border-radius: 999px !important; border: 1px solid rgba(235, 244, 255, 0.38) !important; background: rgba(8, 12, 18, 0.34) !important; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18) !important; color: #f7fbff !important; -webkit-text-fill-color: #f7fbff !important; font-size: 9px !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; pointer-events: auto !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .skill-inline-icon { width: 12px !important; height: 12px !important; flex: 0 0 12px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .battle-card-inscription { bottom: clamp(48px, 6.2vh, 58px) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel { grid-template-rows: 27px 28px 27px 27px 38px minmax(0, 22px) 24px !important; gap: 4px !important; padding: 5px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015)), rgba(7, 10, 15, 0.52) !important; border: 1px solid rgba(210, 226, 246, 0.26) !important; border-radius: 9px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 18px rgba(0, 0, 0, 0.2) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel:has(.status-bar:not(.has-status)) { grid-template-rows: 27px 28px 27px 27px 38px 24px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .meter-row, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .energy, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fatigue, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .laziness { width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; max-height: none !important; padding: 3px 5px !important; border-radius: 7px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)), rgba(5, 8, 13, 0.5) !important; border: 1px solid rgba(210, 226, 246, 0.18) !important; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.14) !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .energy, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fatigue, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .laziness { grid-template-columns: 31px minmax(0, 1fr) 27px !important; align-items: center !important; gap: 4px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .meter-row { grid-template-columns: 31px minmax(0, 1fr) 26px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .stat-label { min-width: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 2px !important; font-size: 9px !important; font-weight: 950 !important; line-height: 1 !important; white-space: nowrap !important; color: rgba(245, 249, 255, 0.92) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .stat-label-icon { width: 10px !important; height: 10px !important; flex: 0 0 10px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .stat-value, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .meter-row > b { justify-self: end !important; min-width: 24px !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 10px !important; font-weight: 950 !important; line-height: 1 !important; text-align: right !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .stat-marks { width: 100% !important; min-width: 0 !important; gap: 2px !important; align-items: center !important; align-content: center !important; justify-content: stretch !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .energy .stat-marks { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, 5px) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fatigue .stat-marks { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: 7px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .laziness .stat-marks { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 7px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .stat-marks i { width: auto !important; height: 100% !important; min-width: 0 !important; border-radius: 2px !important; background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; opacity: 1 !important; filter: none !important; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.18) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .energy .stat-marks i.filled { background: linear-gradient(180deg, #fff8bb, #ffc74a 58%, #d88920) !important; box-shadow: 0 0 8px rgba(255, 207, 74, 0.42) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fatigue .stat-marks i.filled { background: linear-gradient(180deg, #ffb8ad, #ef5b50 58%, #9e272b) !important; box-shadow: 0 0 8px rgba(255, 93, 74, 0.36) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .laziness .stat-marks i.filled { background: linear-gradient(180deg, #ffe2a4, #d99b3a 58%, #8d5b1d) !important; box-shadow: 0 0 8px rgba(230, 165, 67, 0.34) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .equipment-slots { height: 38px !important; min-height: 38px !important; max-height: 38px !important; gap: 4px !important; padding: 1px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .equipment-slot { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; border-radius: 8px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)), rgba(5, 8, 13, 0.5) !important; border: 1px solid rgba(210, 226, 246, 0.2) !important; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.18) !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-token { border-radius: 999px !important; background: rgba(5, 8, 13, 0.5) !important; border: 1px solid rgba(210, 226, 246, 0.18) !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: center !important; justify-items: stretch !important; gap: 6px !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; background-size: 100% 100% !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.attack { background: var(--action-attack-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.defend { background: var(--action-defend-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.charge { background: var(--action-charge-panel-art) center center / 100% 100% no-repeat !important; } } /* V1.27Beta-mobile-battle-polish1-TAIL: true final phone 1v1 cleanup after every legacy mobile battle rule. */ @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards { width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: clamp(48px, calc((100vw - 34px) * 0.1875), 74px) !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: clamp(48px, calc((100vw - 34px) * 0.1875), 74px) !important; align-items: center !important; justify-items: stretch !important; gap: clamp(4px, 1.45vw, 6px) !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card { position: relative !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 16 / 9 !important; align-self: center !important; justify-self: stretch !important; padding: 0 !important; display: block !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-position: center center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; box-shadow: none !important; transform: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.attack { background: var(--action-attack-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.defend { background: var(--action-defend-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card.charge { background: var(--action-charge-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards .action-card span { left: 34.921875% !important; top: 22.916667% !important; width: 64.6875% !important; height: 48.333333% !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .skill-label, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-action, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-name { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .skill-label::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .skill-label::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-action::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-action::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-name::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-name::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .status-bar, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-bar { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-token { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-token::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-token::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-bar::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .status-bar::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; } } /* V1.27Beta-battle-premium1-eof: final override pinned to the end of this file. */ html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { --battle-stage-art: url("assets/ui/battle-arena-celestial-duel-v1.png?v=V1.27Beta-battle-premium1"); --battle-energy-art: url("assets/vfx/battle-arcane-energy-screen-v1.png?v=V1.27Beta-battle-premium1"); position: relative !important; isolation: isolate !important; overflow: hidden !important; border: 1px solid rgba(var(--battle-accent-rgb, 120, 233, 255), 0.34) !important; border-radius: 18px !important; background: radial-gradient(circle at 50% 42%, rgba(var(--battle-hot-rgb, 245, 207, 122), 0.18), transparent 30%), radial-gradient(circle at 16% 28%, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.22), transparent 34%), radial-gradient(circle at 84% 26%, rgba(255, 142, 214, 0.14), transparent 32%), linear-gradient(180deg, rgba(5, 10, 18, 0.08), rgba(4, 7, 12, 0.82)), var(--battle-stage-art) center center / cover no-repeat !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -42px 80px rgba(2, 6, 10, 0.48), 0 28px 80px rgba(0, 0, 0, 0.44), 0 0 38px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.16) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::before { z-index: 0 !important; background: linear-gradient(90deg, rgba(2, 5, 9, 0.64), transparent 18% 82%, rgba(2, 5, 9, 0.66)), radial-gradient(ellipse at 50% 52%, transparent 0 26%, rgba(2, 5, 9, 0.32) 64%, rgba(2, 5, 9, 0.74) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 20%, rgba(0, 0, 0, 0.34)) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after { z-index: 1 !important; opacity: 0.38 !important; mix-blend-mode: screen !important; background: var(--battle-energy-art) center center / cover no-repeat !important; filter: saturate(1.1) contrast(1.05) !important; animation: battlePremiumEnergyDrift 18s ease-in-out infinite alternate !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) > * { position: relative !important; z-index: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]) .fighters { width: min(1080px, 100%) !important; margin: 0 auto !important; padding: clamp(8px, 1.4vw, 18px) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(58px, 7vw, 88px) minmax(0, 1fr) !important; align-items: stretch !important; gap: clamp(10px, 1.6vw, 18px) !important; border: 1px solid rgba(var(--battle-accent-rgb, 120, 233, 255), 0.2) !important; border-radius: 16px !important; background: linear-gradient(90deg, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.1), transparent 30% 70%, rgba(var(--battle-hot-rgb, 245, 207, 122), 0.1)), linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), rgba(4, 10, 16, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 44px rgba(0, 0, 0, 0.24) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .combatant { position: relative !important; min-width: 0 !important; padding: clamp(8px, 1vw, 12px) !important; border: 1px solid rgba(var(--battle-accent-rgb, 120, 233, 255), 0.24) !important; border-radius: 14px !important; background: radial-gradient(circle at 50% 0%, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.16), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1)), rgba(5, 12, 19, 0.44) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 26px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.07), 0 14px 34px rgba(0, 0, 0, 0.24) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter-head, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter-panel, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .meter-row, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .energy, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fatigue, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .laziness, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .choice, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .equipment-slot { border-color: rgba(var(--battle-accent-rgb, 120, 233, 255), 0.3) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)), linear-gradient(135deg, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.09), rgba(var(--battle-hot-rgb, 245, 207, 122), 0.05)), rgba(8, 18, 28, 0.68) !important; color: #ecfbff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.56) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 18px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.07), 0 8px 18px rgba(0, 0, 0, 0.16) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .avatar { border: 1px solid rgba(var(--battle-accent-rgb, 120, 233, 255), 0.42) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -18px 30px rgba(0, 0, 0, 0.18), 0 0 22px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.22), 0 12px 26px rgba(0, 0, 0, 0.28) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .meter > i { border-radius: inherit !important; background: linear-gradient(90deg, #ff6b7a, #ffd27d 42%, #8fffc6) !important; box-shadow: 0 0 14px rgba(255, 210, 125, 0.32) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .versus { align-self: center !important; justify-self: center !important; width: clamp(54px, 6.2vw, 82px) !important; height: clamp(54px, 6.2vw, 82px) !important; display: grid !important; place-items: center !important; border: 1px solid rgba(var(--battle-hot-rgb, 245, 207, 122), 0.46) !important; border-radius: 50% !important; color: #fff8d8 !important; background: radial-gradient(circle, rgba(var(--battle-hot-rgb, 245, 207, 122), 0.28), transparent 56%), radial-gradient(circle, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.16), rgba(4, 9, 14, 0.72) 68%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 26px rgba(var(--battle-hot-rgb, 245, 207, 122), 0.28), 0 0 44px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.2) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards { width: min(780px, 100%) !important; margin: clamp(10px, 1.6vw, 18px) auto 0 !important; padding: clamp(7px, 1vw, 10px) !important; gap: clamp(7px, 1vw, 12px) !important; border: 1px solid rgba(var(--battle-accent-rgb, 120, 233, 255), 0.28) !important; border-radius: 14px !important; background: linear-gradient(90deg, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.08), rgba(var(--battle-hot-rgb, 245, 207, 122), 0.06)), rgba(4, 9, 14, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 36px rgba(0, 0, 0, 0.24), 0 0 24px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.1) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card { transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease !important; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 12px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.16)) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card:hover:not(:disabled), html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card:focus-visible:not(:disabled) { transform: translateY(-3px) scale(1.02) !important; filter: brightness(1.1) saturate(1.08) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 18px rgba(var(--battle-accent-rgb, 120, 233, 255), 0.32)) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { width: 100% !important; padding: 8px 6px 112px !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; background-position: center top !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]) .fighters { width: 100% !important; padding: 7px !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; border-radius: 12px !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .versus { width: 48px !important; height: 48px !important; font-size: 13px !important; } } /* V1.27Beta-battle-premium2-eof-final: stable layered arena art after every battle override. */ html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { background-color: #050b13 !important; background-image: radial-gradient(circle at 50% 42%, rgba(var(--battle-hot-rgb, 245, 207, 122), 0.18) 0%, transparent 30%), radial-gradient(circle at 16% 28%, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.22) 0%, transparent 34%), radial-gradient(circle at 84% 26%, rgba(255, 142, 214, 0.14) 0%, transparent 32%), linear-gradient(180deg, rgba(5, 10, 18, 0.08) 0%, rgba(4, 7, 12, 0.82) 100%), var(--battle-stage-art) !important; background-position: center center, center center, center center, center center, center center !important; background-size: auto, auto, auto, auto, cover !important; background-repeat: no-repeat !important; } /* V1.27Beta-battle-premium3-eof: literal arena layers for reliable Chromium rendering. */ html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { background-color: #050b13 !important; background-image: radial-gradient(circle at 50% 42%, rgba(255, 130, 200, 0.18) 0%, transparent 30%), radial-gradient(circle at 16% 28%, rgba(128, 234, 255, 0.22) 0%, transparent 34%), radial-gradient(circle at 84% 26%, rgba(255, 142, 214, 0.14) 0%, transparent 32%), linear-gradient(180deg, rgba(5, 10, 18, 0.08) 0%, rgba(4, 7, 12, 0.82) 100%), url("assets/ui/battle-arena-celestial-duel-v1.png?v=V1.27Beta-battle-premium3") !important; background-position: center center, center center, center center, center center, center center !important; background-size: auto, auto, auto, auto, cover !important; background-repeat: no-repeat !important; } /* V1.27Beta-battle-premium3-specific-eof: beat legacy transparent battle reset specificity. */ html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) { background-color: #050b13 !important; background-image: radial-gradient(circle at 50% 42%, rgba(255, 130, 200, 0.18) 0%, transparent 30%), radial-gradient(circle at 16% 28%, rgba(128, 234, 255, 0.22) 0%, transparent 34%), radial-gradient(circle at 84% 26%, rgba(255, 142, 214, 0.14) 0%, transparent 32%), linear-gradient(180deg, rgba(5, 10, 18, 0.08) 0%, rgba(4, 7, 12, 0.82) 100%), url("assets/ui/battle-arena-celestial-duel-v1.png?v=V1.27Beta-battle-premium3") !important; background-position: center center, center center, center center, center center, center center !important; background-size: auto, auto, auto, auto, cover !important; background-repeat: no-repeat !important; } /* V1.27Beta-tiantian-battle-scale1: keep Tiantian's battle portrait larger after mobile combat cleanup. */ html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar[data-character="Tiantian"] { --art-size: auto 186% !important; --art-position: center 30% !important; background-size: var(--art-size), cover, cover !important; background-position: var(--art-position), center, center !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar[data-character="Tiantian"] { --art-size: auto 196% !important; --art-position: center 31% !important; } } /* V1.27Beta-tiantian-select-scale1: enlarge and lift Tiantian in character select. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Tiantian"] .mini-art { --art-size: auto 168% !important; --art-position: center 7% !important; background-size: var(--art-size), cover, cover !important; background-position: var(--art-position), center, center !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Tiantian"] .preview-art, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview .preview-art[data-character="Tiantian"] { --art-size: auto 176% !important; --art-position: center 8% !important; background-size: var(--art-size), cover, cover !important; background-position: var(--art-position), center, center !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Tiantian"] .mini-art { --art-size: auto 176% !important; --art-position: center 6% !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Tiantian"] .preview-art, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview .preview-art[data-character="Tiantian"] { --art-size: auto 184% !important; --art-position: center 6% !important; } } /* V1.27Beta-tiantian-battle-scale2: desktop battle portrait needed another size bump. */ html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar[data-character="Tiantian"] { --art-size: auto 224% !important; --art-position: center 34% !important; background-size: var(--art-size), cover, cover !important; background-position: var(--art-position), center, center !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar[data-character="Tiantian"] { --art-size: auto 206% !important; --art-position: center 32% !important; } } /* V1.27Beta-duel-library-desktop1: restore full premium library plaques in desktop battle. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .battle-libraries { display: grid !important; grid-template-columns: repeat(2, minmax(188px, 216px)) !important; grid-template-rows: 64px !important; grid-auto-rows: 64px !important; justify-content: center !important; align-items: center !important; gap: 10px !important; width: min(452px, 100%) !important; max-width: min(452px, 100%) !important; min-height: 64px !important; margin: 0 auto !important; padding: 0 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #showOpportunityLibraryBattle#showOpportunityLibraryBattle.library-action, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #showArtifactLibraryBattle#showArtifactLibraryBattle.library-action { box-sizing: border-box !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; aspect-ratio: auto !important; padding: 0 14px 0 72px !important; border: 1px solid rgba(255, 242, 197, 0.48) !important; border-radius: 10px !important; clip-path: none !important; overflow: hidden !important; isolation: isolate !important; background-image: linear-gradient(90deg, rgba(3, 8, 15, 0.05) 0%, rgba(3, 8, 15, 0) 46%, rgba(3, 8, 15, 0.58) 100%), var(--library-icon-art) !important; background-size: 100% 100%, 100% 100% !important; background-position: center, center !important; background-repeat: no-repeat, no-repeat !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 -14px 26px rgba(0, 0, 0, 0.22), 0 10px 22px rgba(0, 0, 0, 0.24) !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #showOpportunityLibraryBattle#showOpportunityLibraryBattle.library-action { --library-icon-art: url("assets/ui/library-opportunity-button-fatecards-gpt2.png?v=V1.27Beta-duel-library-desktop1"); } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #showArtifactLibraryBattle#showArtifactLibraryBattle.library-action { --library-icon-art: url("assets/ui/library-artifact-button-relicvault-gpt2.png?v=V1.27Beta-duel-library-desktop1"); } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .battle-libraries > button.library-action > span { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; min-width: 66px !important; max-width: 84px !important; margin: 0 !important; padding: 4px 8px !important; overflow: visible !important; clip-path: none !important; white-space: nowrap !important; border: 1px solid rgba(255, 236, 188, 0.34) !important; border-radius: 999px !important; background: rgba(6, 12, 22, 0.62) !important; color: #fff3ca !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.82) !important; box-shadow: inset 0 0 10px rgba(255, 242, 198, 0.12) !important; } } /* V1.27Beta-mage-action-icons1: final desktop mage action panel lock. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards:is([data-attack-style="mage"], [data-attack-style="arcane-mage"], [data-attack-style="caster"]) { --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/mage/arcane.png?v=V1.27Beta-action-alpha-seamfix2") !important; --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/mage/arcane.png?v=V1.27Beta-action-alpha-seamfix2") !important; --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/mage/arcane.png?v=V1.27Beta-action-alpha-seamfix2") !important; --action-defend-user-panel-art: url("assets/ui/action_buttons/v125/defend/mage/arcane.png?v=V1.27Beta-action-alpha-seamfix2") !important; --action-charge-user-panel-art: url("assets/ui/action_buttons/v125/charge/mage/arcane.png?v=V1.27Beta-action-alpha-seamfix2") !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards[data-attack-style="fire-mage"] { --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/mage/fire.png?v=V1.27Beta-action-alpha-seamfix2") !important; --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/mage/fire.png?v=V1.27Beta-action-alpha-seamfix2") !important; --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/mage/fire.png?v=V1.27Beta-action-alpha-seamfix2") !important; --action-defend-user-panel-art: url("assets/ui/action_buttons/v125/defend/mage/fire.png?v=V1.27Beta-action-alpha-seamfix2") !important; --action-charge-user-panel-art: url("assets/ui/action_buttons/v125/charge/mage/fire.png?v=V1.27Beta-action-alpha-seamfix2") !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards[data-attack-style="frost-mage"] { --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/mage/frost.png?v=V1.27Beta-action-alpha-seamfix2") !important; --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/mage/frost.png?v=V1.27Beta-action-alpha-seamfix2") !important; --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/mage/frost.png?v=V1.27Beta-action-alpha-seamfix2") !important; --action-defend-user-panel-art: url("assets/ui/action_buttons/v125/defend/mage/frost.png?v=V1.27Beta-action-alpha-seamfix2") !important; --action-charge-user-panel-art: url("assets/ui/action_buttons/v125/charge/mage/frost.png?v=V1.27Beta-action-alpha-seamfix2") !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards:is([data-attack-style="mage"], [data-attack-style="arcane-mage"], [data-attack-style="caster"], [data-attack-style="fire-mage"], [data-attack-style="frost-mage"]) .action-card.attack { background: var(--action-attack-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards:is([data-attack-style="mage"], [data-attack-style="arcane-mage"], [data-attack-style="caster"], [data-attack-style="fire-mage"], [data-attack-style="frost-mage"]) .action-card.defend { background: var(--action-defend-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle #cards.cards:is([data-attack-style="mage"], [data-attack-style="arcane-mage"], [data-attack-style="caster"], [data-attack-style="fire-mage"], [data-attack-style="frost-mage"]) .action-card.charge { background: var(--action-charge-panel-art) center center / 100% 100% no-repeat !important; } } /* V1.27Beta-battle-toast-visible1: keep combat feedback in the visible viewport. */ html body:not(.maintenance-mode) #appRoot.app.battle-app:has(#battle.battle:not([hidden])) ~ #toast.toast, html body:not(.maintenance-mode) #appRoot.app.battle-app:has(#battle.battle:not([hidden])) + .toast, html body:not(.maintenance-mode) #toast.toast { position: fixed !important; left: 50vw !important; top: clamp(18px, 5vh, 48px) !important; bottom: auto !important; z-index: 26000 !important; width: max-content !important; max-width: min(620px, calc(100vw - 32px)) !important; transform: translateX(-50%) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .skill-label.has-tooltip::after, html body:not(.maintenance-mode) #appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .skill-tip::after { position: fixed !important; left: 50vw !important; top: clamp(62px, 10vh, 104px) !important; bottom: auto !important; z-index: 26001 !important; max-width: min(640px, calc(100vw - 32px)) !important; transform: translateX(-50%) !important; } /* V1.27Beta-battle-toast-visible2: direct fallback for desktop browsers and stale battle layouts. */ html > body:not(.maintenance-mode) > #toast.toast, html body:not(.maintenance-mode) > #toast.toast, body:not(.maintenance-mode) > #toast.toast { position: fixed !important; left: 50vw !important; top: clamp(18px, 5vh, 48px) !important; right: auto !important; bottom: auto !important; z-index: 26000 !important; width: max-content !important; max-width: min(620px, calc(100vw - 32px)) !important; transform: translateX(-50%) !important; pointer-events: none !important; } /* V1.27Beta-rules-professions1: clickable profession overview in the rules dialog. */ html body:not(.maintenance-mode) #rulesDialog .rules-points .profession-rule-card { grid-column: 1 / -1 !important; min-height: 0 !important; gap: 12px !important; padding: 14px !important; background: linear-gradient(135deg, rgba(252, 226, 150, 0.13), rgba(103, 224, 255, 0.08) 45%, rgba(175, 120, 255, 0.12)), rgba(10, 18, 34, 0.84) !important; border-color: rgba(246, 202, 92, 0.36) !important; box-shadow: inset 0 0 28px rgba(246, 202, 92, 0.08), 0 18px 34px rgba(0, 0, 0, 0.18) !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-title { align-items: flex-start !important; gap: 10px !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-title strong { color: #ffe39a !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-hint { color: rgba(226, 238, 255, 0.72) !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.45 !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-buttons { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important; gap: 8px !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-button { appearance: none !important; min-height: 58px !important; display: grid !important; align-content: center !important; gap: 3px !important; padding: 9px 10px !important; border: 1px solid rgba(168, 190, 226, 0.25) !important; border-radius: 8px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 18px rgba(0, 0, 0, 0.16) !important; color: #f7fbff !important; cursor: pointer !important; text-align: left !important; transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-button > span { color: #fff4c6 !important; font-size: 14px !important; font-weight: 950 !important; line-height: 1.15 !important; overflow-wrap: anywhere !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-button > small { color: rgba(214, 230, 255, 0.74) !important; display: block !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.2 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-button:hover, html body:not(.maintenance-mode) #rulesDialog .profession-rule-button:focus-visible { transform: translateY(-1px) !important; border-color: rgba(103, 224, 255, 0.68) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 12px 24px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(103, 224, 255, 0.12) !important; outline: none !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-button.selected, html body:not(.maintenance-mode) #rulesDialog .profession-rule-button[aria-pressed="true"] { border-color: rgba(246, 202, 92, 0.86) !important; background: linear-gradient(180deg, rgba(246, 202, 92, 0.2), rgba(103, 224, 255, 0.08)) !important; box-shadow: inset 0 0 22px rgba(246, 202, 92, 0.12), 0 14px 26px rgba(0, 0, 0, 0.23), 0 0 0 1px rgba(246, 202, 92, 0.18) !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-detail { display: grid !important; gap: 5px !important; min-height: 54px !important; padding: 10px 12px !important; border: 1px solid rgba(103, 224, 255, 0.25) !important; border-radius: 8px !important; background: rgba(3, 10, 22, 0.42) !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-detail strong { color: #ffe6a8 !important; font-size: 15px !important; font-weight: 950 !important; line-height: 1.2 !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-detail span { color: rgba(231, 239, 255, 0.84) !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.42 !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #rulesDialog .rules-points .profession-rule-card { padding: 12px !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-title { display: grid !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-button { min-height: 56px !important; padding: 8px !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-button > span { font-size: 13px !important; } } /* V1.27Beta-identity-battle-redesign1: clean identity combat layout and complete player cards. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option.taken { cursor: not-allowed !important; filter: grayscale(0.48) brightness(0.72) saturate(0.72) !important; opacity: 0.64 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option.taken span { border-color: rgba(172, 184, 204, 0.34) !important; box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.32) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-option.taken::after { content: attr(data-taken-label) !important; position: absolute !important; left: 50% !important; top: 50% !important; z-index: 24 !important; transform: translate(-50%, -50%) !important; padding: 7px 12px !important; border: 1px solid rgba(235, 242, 255, 0.44) !important; border-radius: 8px !important; background: rgba(5, 9, 16, 0.82) !important; color: #f5f8ff !important; font-size: 13px !important; font-weight: 950 !important; white-space: nowrap !important; pointer-events: none !important; } body:not(.maintenance-mode) .preview-art[data-character="Lala"], body:not(.maintenance-mode) .mini-art[data-character="Lala"], body:not(.maintenance-mode) .avatar[data-character="Lala"] { --art-position: center 8% !important; } body:not(.maintenance-mode) .team-art[data-character="Lala"], body:not(.maintenance-mode) .battle.identity-battle .team-art[data-character="Lala"] { --team-art-position: center 6% !important; } body:not(.maintenance-mode) .character-codex-card[data-character="Lala"] .character-codex-art { background: linear-gradient(180deg, transparent 68%, rgba(5, 7, 12, 0.72)), var(--character-art, none) center 8% / cover no-repeat, radial-gradient(circle at 50% 20%, rgba(130, 232, 255, 0.12), transparent 48%), #050811 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) { overflow-x: hidden !important; overflow-y: auto !important; padding: clamp(30px, 4vh, 54px) clamp(12px, 2vw, 24px) 122px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-board { min-height: auto !important; padding: clamp(34px, 5vh, 62px) 0 clamp(10px, 2vh, 24px) !important; align-self: stretch !important; place-items: start center !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-ring { --seat-size: minmax(0, 1fr) !important; --seat-card-h: auto !important; --seat-art-h: clamp(120px, 13vh, 158px) !important; width: min(1260px, 100%) !important; height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)) !important; gap: clamp(10px, 1.2vw, 16px) !important; align-items: stretch !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-ring-core { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; min-height: clamp(292px, 32vh, 360px) !important; transform: none !important; grid-template-rows: var(--seat-art-h) minmax(0, auto) !important; overflow: visible !important; border-radius: 12px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(4, 8, 14, 0.9)), rgba(5, 10, 18, 0.78) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-art { height: var(--seat-art-h) !important; min-height: var(--seat-art-h) !important; border-radius: 11px 11px 0 0 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-info { min-height: 0 !important; align-content: start !important; gap: 6px !important; padding: 9px 10px 10px !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-info header { display: grid !important; gap: 2px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-info header strong, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-info header small { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-mini-bars { gap: 5px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-stat-stack { gap: 3px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter .team-stat { --stat-mark-size: 7px !important; min-height: 22px !important; grid-template-columns: 18px minmax(0, 1fr) !important; gap: 4px !important; padding: 2px 5px !important; border-radius: 6px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter .team-stat > .stat-label { justify-content: center !important; font-size: 12px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter .team-stat .stat-label-icon { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter .team-stat .stat-marks { gap: 2px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-status-bar { max-height: none !important; min-height: 26px !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-equipment { min-height: 30px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-choice { min-height: 20px !important; overflow: visible !important; white-space: normal !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .battle-libraries, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .utility { width: min(760px, 100%) !important; margin: 10px auto 0 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards { width: min(720px, 100%) !important; margin: 14px auto 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(8px, 1vw, 12px) !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards .action-card { min-height: 74px !important; aspect-ratio: 2.25 / 1 !important; display: grid !important; grid-template-columns: auto auto !important; justify-content: center !important; align-items: center !important; gap: 8px !important; border: 1px solid rgba(136, 224, 255, 0.35) !important; border-radius: 12px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)), rgba(4, 10, 18, 0.72) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 24px rgba(0, 0, 0, 0.26) !important; clip-path: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards .action-card::before, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards .action-card::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards .action-card .action-icon { width: 26px !important; height: 26px !important; display: grid !important; place-items: center !important; color: #eaf9ff !important; opacity: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards .action-card .action-icon svg { width: 100% !important; height: 100% !important; display: block !important; fill: none !important; stroke: currentColor !important; stroke-width: 2.2 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards .action-card span { position: static !important; transform: none !important; color: #f7fbff !important; font-size: clamp(16px, 1.45vw, 20px) !important; font-weight: 950 !important; letter-spacing: 0 !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.56) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) { padding: 16px 8px 104px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-board { padding-top: 18px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-ring { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter { min-height: 286px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards { position: sticky !important; bottom: 8px !important; z-index: 30 !important; margin-top: 10px !important; gap: 7px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards .action-card { min-height: 58px !important; grid-template-columns: 1fr !important; gap: 2px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards .action-card .action-icon { width: 22px !important; height: 22px !important; justify-self: center !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards .action-card span { font-size: 13px !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) #appRoot.app.character-select-app #characterSelect.character-select .character-option .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] .skill-tip:not(.mode-tip), html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #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) #appRoot.app.character-select-app #characterSelect.character-select .character-option .skill-tip:not(.mode-tip) .skill-inline-text, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Rhasta"] .skill-tip:not(.mode-tip) .skill-inline-text, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Lollipopz"] .skill-tip:not(.mode-tip) .skill-inline-text, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Xiaoyang"] .skill-tip:not(.mode-tip) .skill-inline-text, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #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; } } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-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; } /* V1.27Beta-select-taken1: show occupied character cards clearly. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken { position: relative !important; cursor: not-allowed !important; filter: grayscale(0.52) brightness(0.72) saturate(0.7) !important; opacity: 0.68 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken::after { content: attr(data-taken-label) !important; display: inline-grid !important; place-items: center !important; position: absolute !important; left: 50% !important; top: 50% !important; z-index: 80 !important; transform: translate(-50%, -50%) !important; min-width: 82px !important; min-height: 30px !important; padding: 6px 13px 7px !important; box-sizing: border-box !important; border: 1px solid rgba(235, 242, 255, 0.64) !important; border-radius: 7px !important; background: linear-gradient(180deg, rgba(17, 24, 36, 0.94), rgba(4, 8, 15, 0.9)), rgba(5, 9, 16, 0.9) !important; color: #f5f8ff !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(12px, 1.15vw, 14px) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; pointer-events: none !important; opacity: 1 !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.82) !important; } /* V1.27Beta-battle-actions-laugh1: stable duel action panels, clean footer, and readable library buttons. */ html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden])::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; filter: none !important; animation: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards, html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards:not([hidden]) { --action-template-left: 34.921875%; --action-template-top: 22.916667%; --action-template-width: 64.6875%; --action-template-height: 48.333333%; box-sizing: border-box !important; width: min(780px, 100%) !important; max-width: 100% !important; margin: clamp(10px, 1.5vw, 16px) auto 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: center !important; justify-items: stretch !important; gap: clamp(6px, 1vw, 11px) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards::before, html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards .action-card { position: relative !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 1983 / 793 !important; padding: 0 !important; display: block !important; align-self: center !important; justify-self: stretch !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-position: center center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; box-shadow: none !important; clip-path: none !important; color: transparent !important; overflow: visible !important; transform: none !important; filter: drop-shadow(0 8px 14px rgba(2, 11, 22, 0.22)) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards .action-card.attack { background: var(--action-attack-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards .action-card.defend { background: var(--action-defend-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards .action-card.charge { background: var(--action-charge-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards .action-card::before, html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards .action-card::after, html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards .action-card .action-icon { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; -webkit-mask: none !important; mask: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards .action-card span { position: absolute !important; left: var(--action-template-left) !important; top: var(--action-template-top) !important; width: var(--action-template-width) !important; height: var(--action-template-height) !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 4% !important; box-sizing: border-box !important; display: grid !important; place-items: center !important; color: #f8fbff !important; -webkit-text-fill-color: #f8fbff !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: clamp(12px, 1.2vw, 16px) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-indent: 0 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 0 8px rgba(255, 255, 255, 0.2) !important; transform: none !important; z-index: 3 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle .battle-libraries, html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle .battle-libraries:not([hidden]) { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle .battle-libraries::before, html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle .battle-libraries::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle .battle-libraries > button.library-action { text-indent: 0 !important; color: #fff3ca !important; -webkit-text-fill-color: currentColor !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle .battle-libraries > button.library-action > span { position: relative !important; left: auto !important; top: auto !important; z-index: 4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; min-width: 66px !important; max-width: 100% !important; margin: 0 !important; padding: 4px 8px !important; border: 1px solid rgba(255, 236, 188, 0.38) !important; border-radius: 999px !important; background: rgba(6, 12, 22, 0.66) !important; color: #fff3ca !important; -webkit-text-fill-color: currentColor !important; clip: auto !important; clip-path: none !important; overflow: visible !important; text-indent: 0 !important; white-space: nowrap !important; font-size: clamp(10px, 1vw, 12px) !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.82) !important; box-shadow: inset 0 0 10px rgba(255, 242, 198, 0.12) !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards { width: 100% !important; margin-top: 0 !important; gap: 6px !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards .action-card { aspect-ratio: 1983 / 793 !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards .action-card span { padding: 0 3.5% !important; font-size: clamp(10px, 3vw, 13px) !important; } } /* V1.27Beta-rules-profession-art1: image-backed rules entries and profession intro art cards. */ html body:not(.maintenance-mode) #rulesDialog .rules-points article { --rules-entry-backplate: url("assets/ui/rules-entry-backplate-v1.png?v=V1.27Beta-rules-profession-art1"); position: relative !important; isolation: isolate !important; min-height: 102px !important; overflow: hidden !important; border: 0 !important; border-radius: 12px !important; background: linear-gradient(180deg, rgba(4, 7, 14, 0.56), rgba(4, 8, 16, 0.84)), linear-gradient(115deg, rgba(246, 200, 95, 0.13), rgba(83, 214, 255, 0.07) 54%, rgba(158, 104, 255, 0.1)), var(--rules-entry-backplate) center center / cover no-repeat, rgba(8, 12, 20, 0.94) !important; box-shadow: inset 0 0 0 1px rgba(255, 243, 199, 0.11), inset 0 -18px 42px rgba(0, 0, 0, 0.25), 0 14px 28px rgba(0, 0, 0, 0.2) !important; } html body:not(.maintenance-mode) #rulesDialog .rules-points article::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; background: radial-gradient(circle at 18% 14%, rgba(255, 238, 169, 0.13), transparent 34%), linear-gradient(90deg, rgba(1, 5, 11, 0.18), rgba(1, 5, 11, 0.54)) !important; pointer-events: none !important; } html body:not(.maintenance-mode) #rulesDialog .rules-points article > strong, html body:not(.maintenance-mode) #rulesDialog .rules-points article .rule-title-row > strong { color: #ffe39a !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.62) !important; } html body:not(.maintenance-mode) #rulesDialog .rules-points article > span, html body:not(.maintenance-mode) #rulesDialog .rules-points article .rule-title-row + span { color: rgba(235, 244, 255, 0.84) !important; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.62) !important; } html body:not(.maintenance-mode) #rulesDialog .rules-points .profession-rule-card.profession-codex-rule-card { grid-column: auto !important; min-height: 102px !important; gap: 8px !important; padding: 12px !important; border: 0 !important; } html body:not(.maintenance-mode) #rulesDialog .profession-rule-buttons, html body:not(.maintenance-mode) #rulesDialog .profession-rule-detail, html body:not(.maintenance-mode) #rulesDialog .profession-rule-hint { display: none !important; } html body:not(.maintenance-mode) #rulesDialog .profession-codex-rule-button { flex: 0 0 auto !important; white-space: nowrap !important; } body:not(.maintenance-mode) .character-codex-box { width: min(1240px, 100%) !important; } body:not(.maintenance-mode) .character-codex-grid { align-items: stretch !important; } body:not(.maintenance-mode) .profession-codex-card { --profession-color: #82e8ff; --profession-bg: none; position: relative !important; isolation: isolate !important; grid-column: span 2 !important; min-height: clamp(198px, 24vw, 268px) !important; display: grid !important; align-items: end !important; overflow: hidden !important; border: 1px solid rgba(230, 241, 255, 0.2) !important; border-color: color-mix(in srgb, var(--profession-color) 54%, rgba(230, 241, 255, 0.18)) !important; border-radius: 10px !important; background: linear-gradient(180deg, rgba(4, 7, 13, 0.1), rgba(3, 5, 10, 0.68)), rgba(6, 10, 18, 0.94) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 42px rgba(0, 0, 0, 0.34), 0 0 26px color-mix(in srgb, var(--profession-color) 18%, transparent) !important; } body:not(.maintenance-mode) .profession-codex-bg { position: absolute !important; inset: 0 !important; z-index: -2 !important; background: linear-gradient(90deg, rgba(2, 5, 11, 0.82) 0%, rgba(2, 5, 11, 0.56) 46%, rgba(2, 5, 11, 0.16) 100%), linear-gradient(180deg, rgba(3, 6, 12, 0.06), rgba(3, 6, 12, 0.72)), var(--profession-bg) center center / cover no-repeat, rgba(5, 9, 16, 0.96) !important; transform: scale(1.015) !important; pointer-events: none !important; } body:not(.maintenance-mode) .profession-codex-card::before { content: "" !important; position: absolute !important; inset: 0 auto 0 0 !important; z-index: -1 !important; width: 5px !important; background: var(--profession-color) !important; box-shadow: 0 0 18px var(--profession-color), 0 0 42px color-mix(in srgb, var(--profession-color) 44%, transparent) !important; } body:not(.maintenance-mode) .profession-codex-card::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; background: radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--profession-color) 22%, transparent), transparent 34%), linear-gradient(180deg, transparent 58%, rgba(2, 5, 10, 0.74)) !important; pointer-events: none !important; } body:not(.maintenance-mode) .profession-codex-copy { width: min(560px, 100%) !important; display: grid !important; gap: 9px !important; padding: clamp(14px, 2vw, 20px) !important; color: #f8fbff !important; } body:not(.maintenance-mode) .profession-codex-copy em { width: max-content !important; padding: 4px 9px !important; border: 1px solid color-mix(in srgb, var(--profession-color) 58%, rgba(255, 255, 255, 0.18)) !important; border-radius: 999px !important; background: rgba(4, 8, 16, 0.62) !important; color: var(--profession-color) !important; font-size: 11px !important; font-style: normal !important; font-weight: 950 !important; line-height: 1 !important; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.78) !important; } body:not(.maintenance-mode) .profession-codex-copy strong { color: var(--profession-color) !important; -webkit-text-fill-color: var(--profession-color) !important; font-size: clamp(25px, 3.1vw, 38px) !important; font-weight: 1000 !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.82), 0 0 18px color-mix(in srgb, var(--profession-color) 42%, transparent) !important; } body:not(.maintenance-mode) .profession-spec-list { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; } body:not(.maintenance-mode) .profession-spec-chip { --role-color: var(--profession-color); min-width: 0 !important; display: inline-grid !important; grid-template-columns: auto auto !important; align-items: center !important; gap: 5px !important; padding: 5px 8px !important; border: 1px solid color-mix(in srgb, var(--role-color) 56%, rgba(255, 255, 255, 0.16)) !important; border-radius: 999px !important; background: rgba(3, 7, 14, 0.68) !important; box-shadow: inset 0 0 12px color-mix(in srgb, var(--role-color) 12%, transparent) !important; } body:not(.maintenance-mode) .profession-spec-chip[data-role="TANK"] { --role-color: #75d7ff; } body:not(.maintenance-mode) .profession-spec-chip[data-role="HEALER"] { --role-color: #7effb3; } body:not(.maintenance-mode) .profession-spec-chip[data-role="RDPS"] { --role-color: #b6a2ff; } body:not(.maintenance-mode) .profession-spec-chip[data-role="MDPS"] { --role-color: #ffd37d; } body:not(.maintenance-mode) .profession-spec-chip[data-role="SUPPORT"] { --role-color: #8ee9ff; } body:not(.maintenance-mode) .profession-spec-chip b { color: #fff8df !important; font-size: 13px !important; font-weight: 950 !important; line-height: 1 !important; } body:not(.maintenance-mode) .profession-spec-chip small { color: var(--role-color) !important; font-size: 10px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; } body:not(.maintenance-mode) .profession-roster { max-width: min(520px, 100%) !important; color: rgba(236, 244, 255, 0.84) !important; font-size: 12px !important; font-weight: 850 !important; line-height: 1.35 !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.78) !important; } body:not(.maintenance-mode) .character-codex-divider { grid-column: 1 / -1 !important; margin: 4px 0 0 !important; padding: 8px 2px 2px !important; color: #ffe39a !important; font-size: 15px !important; font-weight: 950 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.62) !important; } @media (max-width: 900px) { body:not(.maintenance-mode) .profession-codex-card { grid-column: 1 / -1 !important; min-height: clamp(210px, 44vw, 292px) !important; } } @media (max-width: 560px) { html body:not(.maintenance-mode) #rulesDialog .rules-points .profession-rule-card.profession-codex-rule-card { grid-column: 1 / -1 !important; } body:not(.maintenance-mode) .profession-codex-copy { padding: 14px !important; } body:not(.maintenance-mode) .profession-codex-copy strong { font-size: clamp(24px, 9vw, 34px) !important; } body:not(.maintenance-mode) .profession-spec-chip { padding: 5px 7px !important; } } /* V1.27Beta-action-icons-asset-clean1: action button art owns its transparency and proportions. */ html body:not(.maintenance-mode) #battle #cards.cards .action-card, html body:not(.maintenance-mode) #cards.cards .action-card, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle #cards.cards .action-card, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle #cards.cards .action-card, html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.team-battle-app):not(.identity-battle-app) #battle #cards.cards .action-card { aspect-ratio: 16 / 9 !important; background-size: 100% 100% !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.attack, html body:not(.maintenance-mode) #cards.cards .action-card.attack, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle #cards.cards .action-card.attack { background: var(--action-attack-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.defend, html body:not(.maintenance-mode) #cards.cards .action-card.defend, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle #cards.cards .action-card.defend { background: transparent var(--action-defend-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.charge, html body:not(.maintenance-mode) #cards.cards .action-card.charge, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle #cards.cards .action-card.charge { background: var(--action-charge-panel-art) center center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card::before, html body:not(.maintenance-mode) #battle #cards.cards .action-card::after, html body:not(.maintenance-mode) #cards.cards .action-card::before, html body:not(.maintenance-mode) #cards.cards .action-card::after, html body:not(.maintenance-mode) #battle #cards.cards .action-card .action-icon, html body:not(.maintenance-mode) #cards.cards .action-card .action-icon { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; -webkit-mask: none !important; mask: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #battle #cards.cards .action-card, html body:not(.maintenance-mode) #cards.cards .action-card, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle #cards.cards .action-card { aspect-ratio: 16 / 9 !important; } } /* V1.27Beta-warlock-unholy-bgfix1: restore the battle view to a clean readable board. The generated arena image and animated energy layer were too noisy behind combat UI. */ html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { --battle-stage-art: none !important; --battle-energy-art: none !important; background-color: rgba(235, 247, 255, 0.42) !important; background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.66), transparent 48%), radial-gradient(ellipse at 18% 18%, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.12), transparent 38%), radial-gradient(ellipse at 82% 16%, rgba(var(--battle-hot-rgb, 245, 207, 122), 0.1), transparent 36%), linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(214, 233, 248, 0.34) 58%, rgba(236, 210, 138, 0.12)), linear-gradient(180deg, rgba(245, 250, 255, 0.72), rgba(201, 224, 238, 0.44)) !important; background-position: center center !important; background-size: cover !important; border-color: rgba(214, 229, 242, 0.7) !important; box-shadow: 0 18px 44px rgba(7, 26, 44, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -24px 44px rgba(49, 115, 160, 0.08) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::before { inset: 12px !important; z-index: 0 !important; border: 1px solid rgba(236, 210, 138, 0.24) !important; border-radius: 12px !important; background: var(--celestial-linework), linear-gradient(90deg, rgba(119, 211, 255, 0.12), transparent 18% 82%, rgba(236, 210, 138, 0.1)) !important; opacity: 0.42 !important; mix-blend-mode: normal !important; filter: none !important; animation: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after { content: none !important; display: none !important; background: none !important; animation: none !important; filter: none !important; } /* V1.27Beta-single-battle-bg1: use one battle background only, the stage art behind the characters. */ html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) { background-color: #050b13 !important; background-image: url("assets/ui/battle-arena-celestial-duel-v1.png?v=V1.27Beta-single-battle-bg1") !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden])::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; filter: none !important; opacity: 0 !important; mix-blend-mode: normal !important; } /* V1.27Beta-lollipopz-defend-gem1: readable battle value deltas and final portrait crop fixes. */ html body:not(.maintenance-mode) #battle .meter-row, html body:not(.maintenance-mode) #battle .hp-mini { position: relative !important; } html body:not(.maintenance-mode) #battle .hp-delta-pop { position: absolute !important; right: 4px !important; top: 50% !important; z-index: 8 !important; transform: translate(112%, -50%) !important; min-width: 24px !important; pointer-events: none !important; color: #ff6f68 !important; -webkit-text-fill-color: currentColor !important; font-size: 13px !important; font-weight: 1000 !important; line-height: 1 !important; text-align: left !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(255, 72, 72, 0.55) !important; animation: hpDeltaPopV126 1120ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; } html body:not(.maintenance-mode) #battle .hp-delta-pop.heal { color: #65ff93 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(101, 255, 147, 0.55) !important; } @keyframes hpDeltaPopV126 { 0% { opacity: 0; transform: translate(80%, -50%) scale(0.84); } 16% { opacity: 1; transform: translate(112%, -78%) scale(1.08); } 72% { opacity: 1; transform: translate(112%, -118%) scale(1); } 100% { opacity: 0; transform: translate(112%, -152%) scale(0.94); } } html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-art { background-color: transparent !important; background-size: cover !important; background-position: center 16% !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] .mode-dialog-art { background-size: cover !important; background-position: center 14% !important; } } html body:not(.maintenance-mode) #battle .avatar[data-character="Jiego"], html body:not(.maintenance-mode) #battle .team-art[data-character="Jiego"] { --art-position: center 30% !important; --team-art-position: center 30% !important; background-position: var(--art-position, center 30%) !important; } html body:not(.maintenance-mode) #battle .team-art[data-character="Jiego"] { background: var(--team-art) var(--team-art-position, center 30%) / var(--team-art-size, cover) no-repeat !important; } /* V1.27Beta-select-taken-clear1: keep occupied character cards visible and move the badge off the portrait center. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken:disabled { cursor: not-allowed !important; filter: none !important; opacity: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken span, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken:disabled:not(.selected) span { opacity: 1 !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken .mini-art { opacity: 1 !important; filter: grayscale(0.16) brightness(0.9) saturate(0.9) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken span::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 26%, rgba(6, 20, 35, 0.1) 58%, rgba(4, 12, 22, 0.42) 100%) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken::after { content: attr(data-taken-label) !important; display: inline-grid !important; place-items: center !important; position: absolute !important; left: auto !important; right: calc(var(--select-card-frame-x, 12px) + 8px) !important; top: calc(var(--select-card-frame-y, 12px) + 8px) !important; z-index: 90 !important; transform: none !important; min-width: 0 !important; min-height: 0 !important; padding: 4px 8px 5px !important; box-sizing: border-box !important; border: 1px solid rgba(227, 247, 221, 0.86) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(235, 255, 230, 0.96), rgba(145, 207, 168, 0.92)), rgba(220, 247, 219, 0.94) !important; color: #10271d !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(10px, 0.9vw, 12px) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; pointer-events: none !important; opacity: 1 !important; box-shadow: 0 3px 8px rgba(8, 22, 16, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.66) !important; text-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken::after { right: calc(var(--select-card-frame-x, 10px) + 5px) !important; top: calc(var(--select-card-frame-y, 12px) + 5px) !important; padding: 3px 6px 4px !important; font-size: 10px !important; } } /* V1.27Beta-battle-cleanup2: plain battle table, clean action art, status tokens, and identity ellipse seating. */ html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) { background-color: #0a1017 !important; background-image: radial-gradient(ellipse at 16% 84%, rgba(var(--battle-accent-rgb, 120, 180, 220), 0.13), transparent 38%), radial-gradient(ellipse at 88% 14%, rgba(246, 200, 95, 0.08), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 100%), linear-gradient(180deg, #0e151e, #070b11) !important; background-size: auto, auto, 46px 46px, auto !important; background-position: center !important; background-repeat: no-repeat, no-repeat, repeat, no-repeat !important; border: 1px solid rgba(180, 205, 226, 0.16) !important; border-radius: 10px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 48px rgba(0, 0, 0, 0.38) !important; } html body:not(.maintenance-mode) #battle.battle:not([hidden])::before, html body:not(.maintenance-mode) #battle.battle:not([hidden])::after, html body:not(.maintenance-mode) #battle .fighters::before, html body:not(.maintenance-mode) #battle .fighters::after, html body:not(.maintenance-mode) #battle .team-board::before, html body:not(.maintenance-mode) #battle .team-board::after, html body:not(.maintenance-mode) #battle #cards.cards::before, html body:not(.maintenance-mode) #battle #cards.cards::after, html body:not(.maintenance-mode) #battle .battle-libraries::before, html body:not(.maintenance-mode) #battle .battle-libraries::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; filter: none !important; opacity: 0 !important; } html body:not(.maintenance-mode) #battle .fighters, html body:not(.maintenance-mode) #battle .team-board, html body:not(.maintenance-mode) #battle #cards.cards, html body:not(.maintenance-mode) #battle .battle-libraries, html body:not(.maintenance-mode) #battle .utility { border: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #battle #cards.cards, html body:not(.maintenance-mode) #battle #cards.cards:not([hidden]) { width: min(760px, 100%) !important; margin: clamp(8px, 1.2vw, 14px) auto 0 !important; padding: 0 !important; gap: clamp(8px, 1vw, 12px) !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card { aspect-ratio: 16 / 9 !important; min-height: clamp(72px, 7.2vw, 92px) !important; border: 0 !important; border-radius: 0 !important; clip-path: none !important; overflow: visible !important; box-shadow: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.attack { background: transparent var(--action-attack-panel-art) center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.defend { background: transparent var(--action-defend-panel-art) center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card.charge { background: transparent var(--action-charge-panel-art) center / 100% 100% no-repeat !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card::before, html body:not(.maintenance-mode) #battle #cards.cards .action-card::after, html body:not(.maintenance-mode) #battle #cards.cards .action-card .action-icon { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; -webkit-mask: none !important; mask: none !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card span { position: absolute !important; left: 50% !important; bottom: 12% !important; transform: translateX(-50%) !important; color: #f8fbff !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(14px, 1.35vw, 18px) !important; font-weight: 950 !important; letter-spacing: 0 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 9px rgba(0, 0, 0, 0.5) !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card:hover:not(:disabled), html body:not(.maintenance-mode) #battle #cards.cards .action-card:focus-visible:not(:disabled) { transform: translateY(-2px) !important; filter: brightness(1.06) saturate(1.03) !important; outline: none !important; } html body:not(.maintenance-mode) #battle .utility { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; width: min(520px, 100%) !important; margin: 8px auto 0 !important; padding: 0 !important; } html body:not(.maintenance-mode) #battle .utility button { min-height: 30px !important; height: 30px !important; padding: 0 12px !important; border: 1px solid rgba(190, 210, 230, 0.38) !important; border-radius: 6px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)), rgba(12, 18, 26, 0.88) !important; color: #edf4fb !important; -webkit-text-fill-color: currentColor !important; box-shadow: none !important; font-size: 12px !important; font-weight: 850 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) #battle .battle-libraries { display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; width: min(460px, 100%) !important; margin: 8px auto 0 !important; padding: 0 !important; } html body:not(.maintenance-mode) #battle .battle-libraries > button.library-action { --library-card-art: url("assets/ui/codex-card-opportunity-fatecards-v3-gpt2.png"); position: relative !important; width: clamp(132px, 16vw, 188px) !important; min-height: 0 !important; aspect-ratio: 1672 / 941 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(220, 232, 242, 0.28) !important; border-radius: 7px !important; background: linear-gradient(180deg, transparent 48%, rgba(3, 8, 13, 0.72) 100%), var(--library-card-art) center / 100% 100% no-repeat !important; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2) !important; } html body:not(.maintenance-mode) #battle #showArtifactLibraryBattle.library-action { --library-card-art: url("assets/ui/codex-card-artifact-relicvault-actual-artifacts-v1.png"); } html body:not(.maintenance-mode) #battle .battle-libraries > button.library-action > span { position: absolute !important; left: 8px !important; right: 8px !important; bottom: 6px !important; display: block !important; padding: 3px 6px !important; border-radius: 5px !important; background: rgba(3, 8, 13, 0.66) !important; color: #f8fbff !important; -webkit-text-fill-color: currentColor !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1 !important; text-align: center !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important; } html body:not(.maintenance-mode) #battle .status-token b, html body:not(.maintenance-mode) #battle .status-token em, html body:not(.maintenance-mode) #battle .team-status-bar .status-token b, html body:not(.maintenance-mode) #battle .team-status-bar .status-token em { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .combatant::before, html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .combatant::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .combatant::before, html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .combatant::before, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .combatant::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; border: 1px solid rgba(var(--battle-brass), 0.34) !important; border-radius: 12px !important; background: linear-gradient(90deg, rgba(var(--battle-teal), 0.12), transparent 16% 84%, rgba(var(--battle-brass), 0.08)), linear-gradient(180deg, rgba(255, 230, 180, 0.12), transparent 28%, rgba(15, 9, 6, 0.08)) !important; box-shadow: inset 0 0 0 1px rgba(255, 238, 200, 0.05), inset 0 0 28px rgba(12, 8, 6, 0.18) !important; opacity: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .fighters, html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .fighters, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .fighters, html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .fighters, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .fighters { border: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #battle .fatigue:not(.full) .stat-marks i.filled { background: linear-gradient(180deg, #a6fbff, #17aab4) !important; box-shadow: 0 0 8px rgba(39, 222, 232, 0.5) !important; } html body:not(.maintenance-mode) #battle .fatigue.full .stat-marks i.filled, html body:not(.maintenance-mode) #battle .laziness.full .stat-marks i.filled { background: linear-gradient(180deg, #ffaaa1, #e73232) !important; box-shadow: 0 0 8px rgba(237, 55, 50, 0.55) !important; } html body:not(.maintenance-mode) #battle .laziness:not(.full) .stat-marks i.filled { background: linear-gradient(180deg, #d8c0ff, #7562ff) !important; box-shadow: 0 0 8px rgba(137, 111, 255, 0.48) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) { overflow: hidden !important; padding: clamp(20px, 2.5vh, 34px) clamp(12px, 2vw, 24px) clamp(88px, 11vh, 118px) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-board { position: relative !important; width: 100% !important; min-height: clamp(560px, 64vh, 720px) !important; padding: 0 !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-ring { position: relative !important; display: block !important; width: min(1340px, 100%) !important; height: clamp(540px, 62vh, 700px) !important; min-height: clamp(540px, 62vh, 700px) !important; margin: 0 auto !important; overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-ring-core { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter { position: absolute !important; left: var(--seat-x, 50%) !important; top: var(--seat-y, 50%) !important; width: clamp(156px, 13vw, 206px) !important; min-height: clamp(290px, 31vh, 352px) !important; height: auto !important; transform: translate(-50%, -50%) !important; display: grid !important; grid-template-rows: clamp(112px, 13vh, 152px) minmax(0, auto) !important; overflow: visible !important; border: 1px solid rgba(185, 210, 230, 0.22) !important; border-radius: 8px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(4, 8, 14, 0.86)), rgba(6, 12, 20, 0.78) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter.self-seat { z-index: 8 !important; width: clamp(178px, 15vw, 230px) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-art { min-height: clamp(112px, 13vh, 152px) !important; height: clamp(112px, 13vh, 152px) !important; border-radius: 7px 7px 0 0 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter .team-stat { grid-template-columns: 20px minmax(0, 1fr) auto !important; min-height: 24px !important; padding: 2px 5px !important; gap: 4px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter .team-stat > .stat-label { font-size: 0 !important; width: 20px !important; height: 20px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter .team-stat .stat-label-icon { display: block !important; width: 20px !important; height: 20px !important; object-fit: contain !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { border-radius: 0 !important; } html body:not(.maintenance-mode) #battle #cards.cards .action-card { min-height: 58px !important; } html body:not(.maintenance-mode) #battle .battle-libraries { width: min(360px, 100%) !important; gap: 7px !important; } html body:not(.maintenance-mode) #battle .battle-libraries > button.library-action { width: clamp(124px, 41vw, 164px) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) { overflow-y: auto !important; padding: 14px 8px 98px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .team-board { min-height: auto !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-ring { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; height: auto !important; min-height: 0 !important; gap: 8px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-fighter.self-seat { position: relative !important; left: auto !important; top: auto !important; width: auto !important; min-height: 286px !important; transform: none !important; } } /* V1.27Beta-select-taken-graybar1: show occupied character cards with a readable gray horizontal bar. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken::after, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken:disabled::after { content: attr(data-taken-label) !important; display: grid !important; place-items: center !important; position: absolute !important; left: calc(var(--select-card-frame-x, 12px) + 10px) !important; right: calc(var(--select-card-frame-x, 12px) + 10px) !important; top: calc(var(--select-card-frame-y, 12px) + 10px) !important; z-index: 92 !important; transform: none !important; width: auto !important; min-width: 0 !important; min-height: 26px !important; height: 26px !important; padding: 0 10px !important; box-sizing: border-box !important; border: 1px solid rgba(232, 236, 241, 0.42) !important; border-radius: 5px !important; background: linear-gradient(180deg, rgba(120, 126, 136, 0.96), rgba(58, 63, 72, 0.96)), rgba(72, 77, 86, 0.98) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: clamp(12px, 1vw, 14px) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; opacity: 1 !important; pointer-events: none !important; text-align: center !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.55) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken::after, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken:disabled::after { left: calc(var(--select-card-frame-x, 10px) + 7px) !important; right: calc(var(--select-card-frame-x, 10px) + 7px) !important; top: calc(var(--select-card-frame-y, 12px) + 7px) !important; height: 24px !important; min-height: 24px !important; padding: 0 8px !important; font-size: 12px !important; } } /* V1.27Beta-codex-split-artcover1: split profession and character codexes, refresh codex art, and guard portrait edges. */ html body:not(.maintenance-mode) { --profession-codex-button-art: url("assets/ui/codex-card-profession-pantheon-v2-bright.png?v=V1.27Beta-profession-codex-card2"); } html body:not(.maintenance-mode) #gameCodexDialog #codexOpenProfession.game-codex-card, html body:not(.maintenance-mode) #codexOpenProfession.game-codex-profession { background: linear-gradient(180deg, rgba(4, 7, 14, 0.06), rgba(4, 7, 14, 0.38) 58%, rgba(5, 6, 11, 0.78)), var(--profession-codex-button-art) center / cover no-repeat !important; border-color: rgba(230, 205, 126, 0.58) !important; box-shadow: inset 0 0 0 1px rgba(255, 246, 208, 0.12), 0 18px 34px rgba(16, 16, 38, 0.32), 0 0 24px rgba(255, 199, 95, 0.16) !important; } body:not(.maintenance-mode) .profession-codex-dialog .character-codex-box, body:not(.maintenance-mode) .profession-codex-box { width: min(1480px, 100%) !important; } body:not(.maintenance-mode) .profession-codex-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; align-items: stretch !important; gap: clamp(10px, 1.1vw, 15px) !important; } body:not(.maintenance-mode) .profession-codex-grid .profession-codex-card { grid-column: auto !important; min-height: clamp(176px, 18vw, 220px) !important; } body:not(.maintenance-mode) .profession-codex-grid .profession-codex-copy { gap: 7px !important; padding: clamp(12px, 1.45vw, 17px) !important; } body:not(.maintenance-mode) .profession-codex-grid .profession-codex-copy strong { font-size: clamp(22px, 2.15vw, 32px) !important; } body:not(.maintenance-mode) .profession-codex-grid .profession-spec-chip { padding: 4px 7px !important; } body:not(.maintenance-mode) .profession-codex-grid .profession-roster { font-size: 11px !important; line-height: 1.28 !important; } body:not(.maintenance-mode) .character-codex-dialog .character-codex-grid:not(.profession-codex-grid) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; align-items: stretch !important; } html body:not(.maintenance-mode) :is(.mini-art, .preview-art, .avatar, .team-art, .character-codex-art, .mode-dialog-art) { background-repeat: no-repeat !important; } html body:not(.maintenance-mode) :is(.mini-art, .preview-art, .avatar, .character-codex-art)[data-mode-active], html body:not(.maintenance-mode) .team-art[data-mode-active] { background-size: cover !important; background-color: transparent !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar[data-character="Lollipopz"][data-mode-active="magic-assassin"] { --art-size: 122% auto !important; --art-position: center 18% !important; background-image: var(--character-art, none) !important; background-size: 122% auto !important; background-position: center 18% !important; background-repeat: no-repeat !important; background-color: transparent !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Lollipopz"][data-mode-key="magic-assassin"] .preview-art, html body:not(.maintenance-mode) #appRoot.app.character-select-app .preview-art[data-character="Lollipopz"][data-mode-active="magic-assassin"], html body:not(.maintenance-mode) #appRoot.app.character-select-app .mini-art[data-character="Lollipopz"][data-mode-active="magic-assassin"], html body:not(.maintenance-mode) #battle .team-art[data-character="Lollipopz"][data-mode-active="magic-assassin"] { background-size: cover !important; background-position: center 18% !important; background-color: transparent !important; } @media (max-width: 900px) { body:not(.maintenance-mode) .profession-codex-grid { grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)) !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar[data-character="Lollipopz"][data-mode-active="magic-assassin"] { --art-size: 132% auto !important; --art-position: center 16% !important; background-size: 132% auto !important; background-position: center 16% !important; } } /* V1.27Beta-select-badge-center1: make occupied character cards readable and center the badge. */ html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken:disabled { position: relative !important; cursor: not-allowed !important; opacity: 1 !important; filter: none !important; -webkit-filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken span, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken:disabled span { opacity: 1 !important; filter: none !important; -webkit-filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken .mini-art, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken:disabled .mini-art { opacity: 0.72 !important; filter: grayscale(0.28) brightness(0.82) saturate(0.78) !important; -webkit-filter: grayscale(0.28) brightness(0.82) saturate(0.78) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken::after, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken:disabled::after { content: attr(data-taken-label) !important; position: absolute !important; left: 50% !important; right: auto !important; top: 50% !important; z-index: 140 !important; transform: translate(-50%, -50%) !important; width: min(76%, 168px) !important; height: 34px !important; min-width: 96px !important; min-height: 34px !important; padding: 0 14px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(245, 248, 252, 0.52) !important; border-radius: 7px !important; background: linear-gradient(180deg, rgba(112, 118, 130, 0.99), rgba(48, 53, 63, 0.99)), #4f5560 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: clamp(13px, 1.05vw, 15px) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; white-space: nowrap !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.94) !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; opacity: 1 !important; pointer-events: none !important; filter: none !important; -webkit-filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken::after, html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.taken.taken:disabled::after { width: min(82%, 142px) !important; height: 28px !important; min-height: 28px !important; padding: 0 10px !important; font-size: 12px !important; } } /* V1.27Beta-identity-layout-dock1: identity mode uses one stage background, non-overlapping seats, and a bottom dock. */ html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) { min-height: 100dvh !important; overflow-x: hidden !important; overflow-y: auto !important; padding: clamp(10px, 1.5vh, 20px) clamp(10px, 1.8vw, 26px) calc(160px + env(safe-area-inset-bottom)) !important; border: 0 !important; border-radius: 0 !important; background-color: #0b1118 !important; background-image: radial-gradient(ellipse at 12% 86%, rgba(78, 142, 177, 0.16), transparent 36%), radial-gradient(ellipse at 86% 18%, rgba(195, 181, 126, 0.1), transparent 32%), linear-gradient(135deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 100%), linear-gradient(180deg, #101820, #080d13 72%, #060a0f) !important; background-size: auto, auto, 42px 42px, auto !important; background-position: center !important; background-repeat: no-repeat, no-repeat, repeat, no-repeat !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden])::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .fighters { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #teamBoard.team-board:not([hidden]) { position: relative !important; width: min(1500px, 100%) !important; min-height: calc(100dvh - 184px) !important; margin: 0 auto !important; padding: clamp(4px, 1vh, 12px) 0 0 !important; display: grid !important; place-items: center !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing.seat-ring { --identity-seat-w: clamp(142px, 10.4vw, 184px); --identity-seat-h: clamp(206px, 24vh, 252px); --identity-art-h: clamp(58px, 7.8vh, 86px); width: min(1220px, 100%) !important; height: auto !important; min-height: 0 !important; margin: 0 auto !important; padding: clamp(4px, 0.8vw, 10px) 0 !important; display: grid !important; grid-template-columns: repeat(5, var(--identity-seat-w)) !important; grid-template-rows: repeat(3, minmax(var(--identity-seat-h), auto)) !important; justify-content: center !important; align-items: start !important; gap: clamp(8px, 1vw, 14px) clamp(10px, 1.2vw, 18px) !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-ring-core { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter.self-seat { position: relative !important; left: auto !important; top: auto !important; z-index: auto !important; transform: none !important; width: var(--identity-seat-w) !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: var(--identity-seat-h) !important; margin: 0 !important; padding: 7px !important; display: grid !important; grid-template-rows: var(--identity-art-h) minmax(0, auto) !important; gap: 5px !important; overflow: hidden !important; border: 1px solid rgba(180, 204, 222, 0.18) !important; border-radius: 8px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(4, 8, 13, 0.68)), rgba(7, 13, 19, 0.58) !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(1) { grid-column: 1 !important; grid-row: 3 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(2) { grid-column: 2 !important; grid-row: 3 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(4) { grid-column: 3 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(5) { grid-column: 3 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(6) { grid-column: 4 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(7) { grid-column: 5 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(8) { grid-column: 5 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(9) { grid-column: 4 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(10) { grid-column: 3 !important; grid-row: 3 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-art { height: var(--identity-art-h) !important; min-height: var(--identity-art-h) !important; border-radius: 7px 7px 4px 4px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-info { min-height: 0 !important; align-content: start !important; gap: 4px !important; padding: 4px !important; overflow: visible !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-skill { min-height: 22px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-skill-label, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-skill-label :is(.inline-skill-name, .inline-skill-action) { max-width: 100% !important; min-height: 22px !important; padding: 2px 5px !important; font-size: 10px !important; line-height: 1.1 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-mini-bars { gap: 3px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-stat-stack { gap: 2px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-stat { --stat-mark-size: 6px !important; min-height: 20px !important; grid-template-columns: 18px minmax(0, 1fr) !important; padding: 2px 4px !important; gap: 3px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-info header, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-choice { min-height: 18px !important; padding: 2px 4px !important; font-size: 9px !important; line-height: 1.15 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-status-bar, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-equipment { min-height: 20px !important; max-height: 24px !important; padding: 2px !important; gap: 2px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards { position: fixed !important; left: 50% !important; right: auto !important; bottom: calc(72px + env(safe-area-inset-bottom)) !important; z-index: 80 !important; transform: translateX(-50%) !important; width: min(560px, calc(100vw - 24px)) !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards .action-card { min-height: 54px !important; aspect-ratio: auto !important; border-radius: 7px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .battle-libraries, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .utility { position: fixed !important; left: 50% !important; right: auto !important; z-index: 82 !important; transform: translateX(-50%) !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; max-width: calc(100vw - 24px) !important; background: none !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .battle-libraries { bottom: calc(40px + env(safe-area-inset-bottom)) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .utility { bottom: calc(8px + env(safe-area-inset-bottom)) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .battle-libraries > button.library-action, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .utility > button { width: auto !important; min-width: 92px !important; min-height: 28px !important; height: 28px !important; aspect-ratio: auto !important; padding: 0 12px !important; border: 1px solid rgba(202, 216, 228, 0.34) !important; border-radius: 6px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)), rgba(10, 15, 22, 0.9) !important; color: #edf4fb !important; -webkit-text-fill-color: currentColor !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24) !important; font-size: 12px !important; font-weight: 850 !important; line-height: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .battle-libraries > button.library-action > span { position: static !important; display: block !important; padding: 0 !important; border-radius: 0 !important; background: none !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; text-shadow: none !important; } @media (max-width: 1100px) { html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing.seat-ring { --identity-seat-w: clamp(132px, 16.5vw, 160px); --identity-seat-h: clamp(190px, 23vh, 226px); grid-template-columns: repeat(4, var(--identity-seat-w)) !important; grid-template-rows: repeat(3, minmax(var(--identity-seat-h), auto)) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(1) { grid-column: 1 !important; grid-row: 3 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(2) { grid-column: 2 !important; grid-row: 3 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(3) { grid-column: 3 !important; grid-row: 3 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(6) { grid-column: 4 !important; grid-row: 2 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(7) { grid-column: 4 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(8) { grid-column: 3 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(9) { grid-column: 2 !important; grid-row: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(10) { grid-column: 1 !important; grid-row: 2 !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) { padding: 10px 8px calc(152px + env(safe-area-inset-bottom)) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #teamBoard.team-board:not([hidden]) { min-height: 0 !important; place-items: start center !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing.seat-ring { --identity-seat-w: minmax(0, 1fr); --identity-seat-h: 172px; --identity-art-h: 48px; width: min(430px, 100%) !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: auto !important; gap: 7px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter.self-seat { grid-column: auto !important; grid-row: auto !important; width: 100% !important; min-height: var(--identity-seat-h) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards { bottom: calc(72px + env(safe-area-inset-bottom)) !important; width: min(390px, calc(100vw - 14px)) !important; gap: 6px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #cards.cards .action-card { min-height: 46px !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .battle-libraries > button.library-action, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .utility > button { min-width: 72px !important; height: 26px !important; min-height: 26px !important; padding: 0 8px !important; font-size: 11px !important; } } /* V1.27Beta-jiego-battle-crop1: lower Jiego inside battle portraits. */ html body:not(.maintenance-mode) #battle .avatar[data-character="Jiego"], html body:not(.maintenance-mode) #battle .team-art[data-character="Jiego"] { --art-position: center 22% !important; --team-art-position: center 22% !important; background-position: center 22% !important; } html body:not(.maintenance-mode) #battle .team-art[data-character="Jiego"] { background: var(--team-art) var(--team-art-position, center 22%) / var(--team-art-size, cover) no-repeat !important; } /* V1.27Beta-battle-material-ui9: restrained single-surface battle material and refined card panels. */ html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { --battle-stage-art: url("assets/ui/battle-material-table-v2.png?v=V1.27Beta-battle-material-ui9") !important; --battle-ink: #211713 !important; --battle-paper: 122, 88, 58 !important; --battle-brass: 157, 126, 76 !important; --battle-teal: 52, 112, 115 !important; width: min(1260px, calc(100vw - 18px)) !important; margin: 0 auto !important; padding: clamp(14px, 2vw, 26px) clamp(10px, 2vw, 26px) clamp(18px, 2.4vw, 32px) !important; border: 0 !important; border-radius: 0 !important; background-color: #17100d !important; background-image: linear-gradient(180deg, rgba(255, 224, 170, 0.055), rgba(18, 12, 10, 0.2)), var(--battle-stage-art) !important; background-position: center center, center center !important; background-size: cover, cover !important; background-repeat: no-repeat !important; box-shadow: none !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(ellipse at 52% 48%, rgba(238, 192, 126, 0.06), transparent 60%), linear-gradient(90deg, rgba(18, 11, 8, 0.22), transparent 20% 80%, rgba(18, 11, 8, 0.24)) !important; opacity: 0.72 !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) > * { position: relative !important; z-index: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]) .fighters { width: min(1120px, 100%) !important; margin: 0 auto !important; padding: clamp(2px, 0.7vw, 8px) !important; gap: clamp(10px, 1.6vw, 18px) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .combatant { position: relative !important; padding: clamp(12px, 1.35vw, 18px) !important; border: 0 !important; border-radius: 12px !important; background: linear-gradient(180deg, rgba(221, 177, 111, 0.11), rgba(20, 13, 10, 0.18)), rgba(43, 30, 22, 0.46) !important; box-shadow: 0 14px 30px rgba(15, 9, 6, 0.2), inset 0 1px 0 rgba(255, 229, 180, 0.1) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; isolation: isolate !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .combatant::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; border: 1px solid rgba(var(--battle-brass), 0.34) !important; border-radius: 12px !important; background: linear-gradient(90deg, rgba(var(--battle-teal), 0.12), transparent 16% 84%, rgba(var(--battle-brass), 0.08)), linear-gradient(180deg, rgba(255, 230, 180, 0.12), transparent 28%, rgba(15, 9, 6, 0.08)) !important; box-shadow: inset 0 0 0 1px rgba(255, 238, 200, 0.05), inset 0 0 28px rgba(12, 8, 6, 0.18) !important; opacity: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .combatant > * { position: relative !important; z-index: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter-head, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter-panel, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .meter-row, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .energy, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fatigue, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .laziness, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .choice, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .equipment-slot { border: 1px solid rgba(var(--battle-brass), 0.26) !important; border-radius: 8px !important; background: linear-gradient(180deg, rgba(255, 229, 182, 0.11), rgba(99, 68, 43, 0.1)), rgba(38, 27, 20, 0.34) !important; color: #fff4d5 !important; -webkit-text-fill-color: currentColor !important; box-shadow: inset 0 1px 0 rgba(255, 235, 196, 0.1), 0 5px 12px rgba(18, 11, 8, 0.12) !important; text-shadow: 0 1px 2px rgba(35, 18, 8, 0.62) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-bar, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .team-status-bar { min-height: 30px !important; padding: 4px 6px !important; gap: 4px !important; border: 1px solid rgba(var(--battle-brass), 0.22) !important; border-radius: 8px !important; background: linear-gradient(180deg, rgba(255, 226, 178, 0.08), rgba(38, 26, 19, 0.06)), rgba(30, 22, 17, 0.3) !important; box-shadow: inset 0 1px 0 rgba(255, 235, 196, 0.08) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-bar::before, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-bar::after, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .team-status-bar::before, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .team-status-bar::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token.buff, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token.debuff, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token.cooldown { min-height: 22px !important; padding: 2px 4px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; color: #fff0cb !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 2px rgba(35, 18, 8, 0.58) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token::before, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token::after, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token b::before, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token b::after { content: none !important; display: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token .status-icon, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token i { filter: drop-shadow(0 1px 1px rgba(35, 18, 8, 0.55)) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .avatar { border: 1px solid rgba(var(--battle-brass), 0.48) !important; border-radius: 9px !important; box-shadow: inset 0 0 0 1px rgba(255, 238, 196, 0.14), inset 0 -22px 26px rgba(37, 20, 9, 0.18), 0 9px 18px rgba(37, 20, 9, 0.24) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .meter { height: 9px !important; border: 1px solid rgba(74, 42, 18, 0.42) !important; border-radius: 999px !important; background: rgba(46, 27, 13, 0.54) !important; box-shadow: inset 0 1px 2px rgba(34, 18, 8, 0.48) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .meter > i { border-radius: inherit !important; background: linear-gradient(90deg, #9d3226, #d58a36 52%, #6aae62) !important; box-shadow: 0 0 8px rgba(213, 138, 54, 0.24) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .versus { border-color: rgba(var(--battle-brass), 0.48) !important; background: radial-gradient(circle, rgba(255, 231, 172, 0.24), rgba(79, 45, 20, 0.52) 68%), rgba(44, 26, 13, 0.42) !important; color: #fff3c9 !important; box-shadow: inset 0 1px 0 rgba(255, 242, 205, 0.22), 0 8px 18px rgba(43, 24, 10, 0.24) !important; text-shadow: 0 1px 3px rgba(35, 18, 8, 0.72) !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards { border: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #sidePanel.side section { position: relative !important; border: 0 !important; border-radius: 11px !important; background: linear-gradient(180deg, rgba(255, 229, 182, 0.1), rgba(55, 38, 26, 0.08)), rgba(37, 27, 21, 0.38) !important; box-shadow: inset 0 1px 0 rgba(255, 235, 196, 0.08), 0 9px 20px rgba(14, 8, 6, 0.16) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #sidePanel.side section::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; border: 1px solid rgba(var(--battle-brass), 0.26) !important; border-radius: 11px !important; background: linear-gradient(90deg, rgba(var(--battle-teal), 0.08), transparent 18% 82%, rgba(var(--battle-brass), 0.08)), linear-gradient(180deg, rgba(255, 229, 182, 0.1), transparent 34%, rgba(12, 8, 6, 0.08)) !important; box-shadow: inset 0 0 0 1px rgba(255, 238, 200, 0.04) !important; opacity: 1 !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #sidePanel.side section > * { position: relative !important; z-index: 1 !important; } /* V1.27Beta-battle-material-ui9: Tiantian zooms out slightly in 1v1 battle screenshots. */ html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar[data-character="Tiantian"] { --art-size: auto 202% !important; --art-position: center 32% !important; background-size: var(--art-size), cover, cover !important; background-position: var(--art-position), center, center !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar[data-character="Tiantian"] { --art-size: auto 190% !important; --art-position: center 30% !important; } } /* V1.27Beta-battle-material-ui9: lower Letmetalk slightly in battle portraits only. */ html body:not(.maintenance-mode) #battle .avatar[data-character="Letmetalk"], html body:not(.maintenance-mode) #battle .team-art[data-character="Letmetalk"] { --art-position: center 24% !important; --team-art-position: center 24% !important; background-position: center 24% !important; } html body:not(.maintenance-mode) #battle .team-art[data-character="Letmetalk"] { background: var(--team-art) var(--team-art-position, center 24%) / var(--team-art-size, cover) no-repeat !important; } /* V1.27Beta-battle-material-ui9: profession codex shows four professions per row on desktop. */ @media (min-width: 1180px) { body:not(.maintenance-mode) .profession-codex-dialog .character-codex-box, body:not(.maintenance-mode) .profession-codex-box { width: min(1560px, calc(100vw - 28px)) !important; } body:not(.maintenance-mode) .profession-codex-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (min-width: 721px) and (max-width: 1179px) { body:not(.maintenance-mode) .profession-codex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* V1.27Beta-battle-material-ui9: larger character-select backing so the roster stays inside the white surface. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select { --select-frame-inner-x: clamp(112px, 8.4vw, 172px) !important; --select-frame-inner-y: clamp(128px, 15.8vh, 218px) !important; --select-matrix-h: min(calc(var(--select-card-outer-h) + var(--select-card-outer-h) + var(--select-card-outer-h) + var(--select-card-outer-h) + var(--select-gap) + var(--select-gap) + var(--select-gap)), calc(100dvh - var(--select-frame-inner-y) * 2 - 8px)) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout { width: min(calc(var(--select-matrix-w) + var(--select-frame-inner-x) * 2), calc(100vw - 2px)) !important; height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 2px)) !important; padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-scroll { width: var(--select-matrix-w) !important; height: var(--select-matrix-h) !important; max-height: var(--select-matrix-h) !important; overflow-y: auto !important; overflow-x: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-options { height: auto !important; min-height: var(--select-matrix-h) !important; max-height: none !important; overflow: visible !important; } } @media (min-width: 721px) and (min-height: 980px) { html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select { --select-matrix-h: min(calc(var(--select-card-outer-h) + var(--select-card-outer-h) + var(--select-card-outer-h) + var(--select-card-outer-h) + var(--select-card-outer-h) + var(--select-gap) + var(--select-gap) + var(--select-gap) + var(--select-gap)), calc(100dvh - var(--select-frame-inner-y) * 2 - 8px)) !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { width: 100% !important; padding: 8px 6px calc(112px + env(safe-area-inset-bottom)) !important; background-position: center top, center top !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .combatant::before { inset: 0 !important; opacity: 1 !important; } } /* V1.27Beta-battle-material-ui9: final high-specificity battle background override after legacy single-bg rules. */ html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) { --battle-stage-art: url("assets/ui/battle-material-table-v2.png?v=V1.27Beta-battle-material-ui9") !important; --battle-ink: #211713 !important; --battle-paper: 122, 88, 58 !important; --battle-brass: 157, 126, 76 !important; --battle-teal: 52, 112, 115 !important; background-color: #17100d !important; background-image: linear-gradient(180deg, rgba(255, 224, 170, 0.055), rgba(18, 12, 10, 0.2)), url("assets/ui/battle-material-table-v2.png?v=V1.27Beta-battle-material-ui9") !important; background-position: center center, center center !important; background-size: cover, cover !important; background-repeat: no-repeat !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* V1.27Beta-battle-material-ui9: make battle use one shared material surface instead of separate left/right backdrops. */ html body:not(.maintenance-mode):has(#appRoot.app.battle-app:not([hidden])) { background-color: #17100d !important; background-image: linear-gradient(180deg, rgba(255, 224, 170, 0.055), rgba(18, 12, 10, 0.2)), url("assets/ui/battle-material-table-v2.png?v=V1.27Beta-battle-material-ui9") !important; background-position: center center, center center !important; background-size: cover, cover !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not([hidden]) { --battle-stage-art: url("assets/ui/battle-material-table-v2.png?v=V1.27Beta-battle-material-ui9") !important; background-color: #17100d !important; background-image: linear-gradient(180deg, rgba(255, 224, 170, 0.055), rgba(18, 12, 10, 0.2)), url("assets/ui/battle-material-table-v2.png?v=V1.27Beta-battle-material-ui9") !important; background-position: center center, center center !important; background-size: cover, cover !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) { background-color: transparent !important; background-image: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #sidePanel.side { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #sidePanel.side::before, html body:not(.maintenance-mode) #appRoot.app.battle-app #sidePanel.side::after, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighters::before, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighters::after, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter::before, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter::after, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .combatant::after, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .opponent-combatant::after, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .team-board::before, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .team-board::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .team-board { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token b, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .status-token em, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .team-status-bar .status-token b, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .team-status-bar .status-token em { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* V1.27Beta-battle-material-ui9: hard pin the shared surface after all legacy battle selectors. */ html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) { background-color: transparent !important; background-image: none !important; background: transparent !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .combatant::after, html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .opponent-combatant::after, html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .combatant::after, html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .opponent-combatant::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .combatant::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .opponent-combatant::after, html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .combatant::after, html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .opponent-combatant::after, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .combatant::after, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .opponent-combatant::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not([hidden]) .arena { background: transparent !important; background-color: transparent !important; background-image: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not([hidden]) .arena::before, html body:not(.maintenance-mode) #appRoot.app.battle-app:not([hidden]) .arena::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not([hidden]) .arena { background: transparent !important; background-color: transparent !important; background-image: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not([hidden]) .arena::before, html body:not(.maintenance-mode) #appRoot.app.battle-app:not([hidden]) .arena::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; } /* V1.27Beta-identity-ellipse-codex-lib1: identity seats follow a true ellipse, and codex opportunity surfaces leave the blue-white family. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-ring { width: min(1580px, calc(100% - 10px)) !important; height: clamp(390px, calc(100dvh - 220px), 610px) !important; border-radius: 50% / 44% !important; border-color: rgba(199, 139, 77, 0.34) !important; background: radial-gradient(ellipse at 50% 50%, rgba(224, 154, 82, 0.12), transparent 18%), radial-gradient(ellipse at 50% 50%, transparent 39%, rgba(227, 151, 78, 0.12) 39.4%, transparent 41.2%), radial-gradient(ellipse at 50% 50%, transparent 69%, rgba(121, 66, 38, 0.26) 69.5%, transparent 71.4%), rgba(12, 8, 6, 0.32) !important; box-shadow: inset 0 0 80px rgba(170, 98, 52, 0.1), 0 24px 58px rgba(0, 0, 0, 0.22) !important; } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .seat-ring { width: min(100%, calc(100vw - 18px)) !important; max-width: calc(100vw - 18px) !important; height: clamp(520px, 76vh, 660px) !important; aspect-ratio: auto !important; border-radius: 50% / 45% !important; } } html body:not(.maintenance-mode) #gameCodexDialog #codexOpenOpportunity.game-codex-card, html body:not(.maintenance-mode) #codexOpenOpportunity.game-codex-opportunity { border-color: rgba(220, 128, 58, 0.62) !important; background: linear-gradient(180deg, rgba(26, 10, 6, 0.08), rgba(16, 7, 5, 0.78)), radial-gradient(circle at 68% 28%, rgba(255, 172, 72, 0.22), transparent 34%), radial-gradient(circle at 18% 70%, rgba(172, 43, 36, 0.3), transparent 38%), url("assets/ui/codex-card-opportunity-fatecards-v3-gpt2.png?v=V1.27Beta-opportunity-codex-copper1") center / cover no-repeat, linear-gradient(135deg, #2a1209, #120908 62%, #060403) !important; box-shadow: inset 0 0 0 1px rgba(255, 204, 118, 0.12), 0 18px 42px rgba(35, 12, 4, 0.42), 0 0 28px rgba(209, 87, 39, 0.16) !important; } html body:not(.maintenance-mode) #gameCodexDialog #codexOpenOpportunity.game-codex-card > span, html body:not(.maintenance-mode) #gameCodexDialog #codexOpenOpportunity.game-codex-card > small { color: #fff0c7 !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 2px 7px rgba(22, 6, 2, 0.92) !important; } html body:not(.maintenance-mode) #opportunityLibraryDialog .opportunity-library-box { border-color: rgba(220, 128, 58, 0.58) !important; background: linear-gradient(180deg, rgba(32, 12, 6, 0.42), rgba(10, 5, 4, 0.94)), radial-gradient(circle at 20% 0%, rgba(255, 180, 88, 0.22), transparent 34%), radial-gradient(circle at 82% 18%, rgba(170, 46, 35, 0.22), transparent 36%), var(--opportunity-library-panel-art) center / cover no-repeat, linear-gradient(135deg, #241009, #120706 58%, #050303) !important; box-shadow: 0 34px 86px rgba(0, 0, 0, 0.58), inset 0 0 42px rgba(229, 126, 55, 0.12), 0 0 32px rgba(129, 38, 24, 0.16) !important; } html body:not(.maintenance-mode) #opportunityLibraryDialog .opportunity-library-note { color: rgba(255, 233, 190, 0.78) !important; } html body:not(.maintenance-mode) #opportunityLibraryDialog .opportunity-library-grid:not(.artifact-library-grid) .opportunity-card { border-color: rgba(224, 144, 66, 0.46) !important; background: linear-gradient(180deg, rgba(255, 190, 95, 0.1), rgba(14, 6, 4, 0.96)), linear-gradient(135deg, rgba(52, 20, 10, 0.96), rgba(10, 5, 4, 0.98)) !important; box-shadow: inset 0 0 22px rgba(224, 122, 54, 0.08), 0 18px 40px rgba(22, 8, 3, 0.42) !important; } html body:not(.maintenance-mode) #opportunityLibraryDialog .opportunity-library-grid:not(.artifact-library-grid) .opportunity-art { background: linear-gradient(180deg, transparent 70%, rgba(13, 5, 3, 0.58)), var(--opportunity-art, none) center / contain no-repeat, radial-gradient(circle at 50% 24%, rgba(255, 163, 65, 0.2), transparent 48%), linear-gradient(180deg, rgba(43, 18, 9, 0.92), rgba(10, 5, 4, 0.98)) !important; } @media (min-width: 1024px) { html body:not(.maintenance-mode) .profession-codex-dialog .character-codex-box, html body:not(.maintenance-mode) .profession-codex-box { width: min(1560px, calc(100vw - 28px)) !important; } html body:not(.maintenance-mode) .profession-codex-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) .profession-codex-grid .profession-codex-card { grid-column: auto !important; } } @media (min-width: 721px) and (max-width: 1023px) { html body:not(.maintenance-mode) .profession-codex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* V1.27Beta-profession-spec-icons1: profession cards use latest v125 action-panel icons as branch entrances. */ html body:not(.maintenance-mode) .profession-codex-card .profession-spec-list { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important; gap: 8px !important; align-items: stretch !important; } html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button { position: relative !important; min-width: 0 !important; width: 100% !important; aspect-ratio: 16 / 9 !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: var(--profession-spec-art) center / 100% 100% no-repeat !important; cursor: pointer !important; filter: drop-shadow(0 9px 16px rgba(0, 0, 0, 0.34)) !important; transition: transform 140ms ease, filter 140ms ease !important; } html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button::before, html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button::after { content: "" !important; position: absolute !important; pointer-events: none !important; z-index: 1 !important; } html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button::before { inset: -9% -4% !important; border-radius: 999px !important; background: radial-gradient(circle at 16% 50%, color-mix(in srgb, var(--profession-color) 46%, transparent) 0 5%, transparent 9%), radial-gradient(circle at 84% 50%, rgba(255, 235, 168, 0.32) 0 4%, transparent 8%), linear-gradient(90deg, transparent, color-mix(in srgb, var(--profession-color) 16%, transparent), transparent) !important; opacity: 0.72 !important; filter: blur(0.2px) !important; } html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button::after { left: 12% !important; right: 9% !important; bottom: 11% !important; height: 24% !important; border-radius: 5px !important; background: linear-gradient(90deg, rgba(3, 6, 11, 0.84), rgba(3, 6, 11, 0.42), rgba(3, 6, 11, 0.84)) !important; box-shadow: inset 0 0 0 1px rgba(255, 236, 172, 0.16) !important; } html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button b { position: absolute !important; left: 13% !important; right: 10% !important; bottom: 12.5% !important; z-index: 2 !important; display: block !important; overflow: hidden !important; color: #fff8df !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(11px, 0.82vw, 14px) !important; font-weight: 1000 !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-align: center !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.92), 0 0 12px color-mix(in srgb, var(--profession-color) 44%, transparent) !important; } html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button:hover, html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button:focus-visible { outline: none !important; transform: translateY(-2px) scale(1.018) !important; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.38)) drop-shadow(0 0 14px color-mix(in srgb, var(--profession-color) 36%, transparent)) !important; } html body:not(.maintenance-mode) .profession-spec-dialog { z-index: 186 !important; } html body:not(.maintenance-mode) .profession-spec-box { --profession-color: #d6a5ff; --profession-bg: none; width: min(1040px, calc(100vw - 28px)) !important; border-color: color-mix(in srgb, var(--profession-color) 54%, rgba(255, 236, 186, 0.18)) !important; background: linear-gradient(180deg, rgba(4, 7, 12, 0.38), rgba(3, 5, 9, 0.94)), radial-gradient(circle at 26% 14%, color-mix(in srgb, var(--profession-color) 24%, transparent), transparent 38%), var(--profession-bg) center / cover no-repeat, rgba(5, 8, 13, 0.96) !important; box-shadow: 0 34px 86px rgba(0, 0, 0, 0.58), inset 0 0 42px color-mix(in srgb, var(--profession-color) 10%, transparent) !important; } html body:not(.maintenance-mode) .profession-spec-detail { display: grid !important; grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1fr) !important; gap: clamp(14px, 2vw, 22px) !important; align-items: stretch !important; } html body:not(.maintenance-mode) .profession-spec-hero-art { position: relative !important; min-height: clamp(260px, 36vw, 460px) !important; display: block !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--profession-color) 48%, rgba(255, 236, 186, 0.18)) !important; border-radius: 10px !important; background: linear-gradient(180deg, transparent 42%, rgba(3, 5, 9, 0.66)), var(--profession-bg) center / cover no-repeat, rgba(6, 10, 18, 0.96) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 38px rgba(0, 0, 0, 0.32) !important; } html body:not(.maintenance-mode) .profession-spec-hero-art::after { content: "" !important; position: absolute !important; left: 6% !important; right: 6% !important; bottom: 6% !important; aspect-ratio: 16 / 9 !important; background: var(--profession-spec-art) center / 100% 100% no-repeat !important; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42)) !important; } html body:not(.maintenance-mode) .profession-spec-detail-copy { display: grid !important; gap: 12px !important; align-content: center !important; padding: clamp(14px, 2vw, 22px) !important; border: 1px solid color-mix(in srgb, var(--profession-color) 36%, rgba(255, 236, 186, 0.14)) !important; border-radius: 10px !important; background: linear-gradient(180deg, rgba(5, 7, 12, 0.54), rgba(5, 7, 12, 0.84)), rgba(6, 10, 18, 0.82) !important; } html body:not(.maintenance-mode) .profession-spec-detail-copy span { color: var(--profession-color) !important; font-size: 12px !important; font-weight: 950 !important; letter-spacing: 0 !important; } html body:not(.maintenance-mode) .profession-spec-detail-copy strong { color: var(--profession-color) !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(34px, 5vw, 62px) !important; font-weight: 1000 !important; line-height: 0.95 !important; letter-spacing: 0 !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78), 0 0 22px color-mix(in srgb, var(--profession-color) 36%, transparent) !important; } html body:not(.maintenance-mode) .profession-spec-detail-copy em { width: max-content !important; padding: 7px 12px !important; border: 1px solid color-mix(in srgb, var(--profession-color) 54%, rgba(255, 255, 255, 0.14)) !important; border-radius: 999px !important; background: rgba(3, 7, 14, 0.74) !important; color: #fff8df !important; font-style: normal !important; font-size: 13px !important; font-weight: 1000 !important; } html body:not(.maintenance-mode) .profession-spec-detail-copy p, html body:not(.maintenance-mode) .profession-spec-detail-copy small { color: rgba(238, 246, 255, 0.84) !important; font-size: 14px !important; font-weight: 760 !important; line-height: 1.5 !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) .profession-codex-card .profession-spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body:not(.maintenance-mode) .profession-spec-detail { grid-template-columns: minmax(0, 1fr) !important; } html body:not(.maintenance-mode) .profession-spec-hero-art { min-height: 260px !important; } } /* V1.27Beta-battle-material-ui9: true EOF override, after codex/library rules. */ html body:not(.maintenance-mode) #appRoot.app.battle-app:not([hidden]) { --battle-stage-art: url("assets/ui/battle-material-table-v2.png?v=V1.27Beta-battle-material-ui9") !important; background-color: #17100d !important; background-image: linear-gradient(180deg, rgba(255, 224, 170, 0.055), rgba(18, 12, 10, 0.2)), url("assets/ui/battle-material-table-v2.png?v=V1.27Beta-battle-material-ui9") !important; background-position: center center, center center !important; background-size: cover, cover !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) { background-color: transparent !important; background-image: none !important; background: transparent !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .combatant::after, html body:not(.maintenance-mode) #appRoot.app.battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .opponent-combatant::after, html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .combatant::after, html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .opponent-combatant::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .combatant::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .opponent-combatant::after, html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .combatant::after, html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .opponent-combatant::after, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .combatant::after, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) .opponent-combatant::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not([hidden]) .arena { background: transparent !important; background-color: transparent !important; background-image: none !important; } html body:not(.maintenance-mode) #appRoot.app.battle-app:not([hidden]) .arena::before, html body:not(.maintenance-mode) #appRoot.app.battle-app:not([hidden]) .arena::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; } /* V1.27Beta-battle-material-ui9: beat legacy duel arena backgrounds with a heavier EOF selector. */ html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:has(#battle.battle:not([hidden])) .arena.arena, html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.team-battle-app:has(#battle.battle:not([hidden])) .arena.arena, html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.identity-battle-app:has(#battle.battle:not([hidden])) .arena.arena { background: transparent !important; background-color: transparent !important; background-image: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:has(#battle.battle:not([hidden])) .arena.arena::before, html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:has(#battle.battle:not([hidden])) .arena.arena::after, html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.team-battle-app:has(#battle.battle:not([hidden])) .arena.arena::before, html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.team-battle-app:has(#battle.battle:not([hidden])) .arena.arena::after, html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.identity-battle-app:has(#battle.battle:not([hidden])) .arena.arena::before, html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.identity-battle-app:has(#battle.battle:not([hidden])) .arena.arena::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; } /* V1.27Beta-codex-book-page1: profession codex/spec pages use a single warm book-page surface. */ html body:not(.maintenance-mode) .profession-codex-dialog .character-codex-box, html body:not(.maintenance-mode) .profession-codex-box, html body:not(.maintenance-mode) .profession-spec-box { border-color: rgba(128, 86, 42, 0.42) !important; background: linear-gradient(135deg, #fbf6e8 0%, #f3e7cf 46%, #ead5ad 100%) !important; box-shadow: 0 34px 86px rgba(42, 25, 11, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.62), inset 0 0 42px rgba(118, 72, 24, 0.12) !important; } html body:not(.maintenance-mode) .profession-codex-dialog .rules-head, html body:not(.maintenance-mode) .profession-spec-dialog .rules-head { border-bottom-color: rgba(126, 86, 42, 0.22) !important; } html body:not(.maintenance-mode) .profession-codex-dialog .rules-head h2, html body:not(.maintenance-mode) .profession-spec-dialog .rules-head h2 { color: #4b2f17 !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important; } html body:not(.maintenance-mode) .profession-codex-dialog .opportunity-library-note, html body:not(.maintenance-mode) .profession-spec-dialog .opportunity-library-note { color: rgba(84, 57, 30, 0.74) !important; } html body:not(.maintenance-mode) .profession-spec-detail { align-items: center !important; } html body:not(.maintenance-mode) .profession-spec-hero-art { border-color: rgba(126, 86, 42, 0.34) !important; background: linear-gradient(180deg, rgba(255, 250, 236, 0.12), rgba(78, 43, 14, 0.12)), var(--profession-bg) center / cover no-repeat, #ead9bb !important; box-shadow: 0 18px 34px rgba(82, 48, 20, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.52) !important; } html body:not(.maintenance-mode) .profession-spec-detail-copy { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #3c2816 !important; } html body:not(.maintenance-mode) .profession-spec-detail-copy span { color: color-mix(in srgb, var(--profession-color) 72%, #4a2d17) !important; text-shadow: none !important; } html body:not(.maintenance-mode) .profession-spec-detail-copy strong { color: color-mix(in srgb, var(--profession-color) 78%, #3a2414) !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) !important; } html body:not(.maintenance-mode) .profession-spec-detail-copy em { border-color: color-mix(in srgb, var(--profession-color) 38%, rgba(102, 67, 30, 0.28)) !important; background: rgba(255, 248, 228, 0.68) !important; color: #4a2d16 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38) !important; } html body:not(.maintenance-mode) .profession-spec-detail-copy p, html body:not(.maintenance-mode) .profession-spec-detail-copy small { color: rgba(58, 38, 20, 0.82) !important; text-shadow: none !important; } html body:not(.maintenance-mode) .profession-spec-tags span, html body:not(.maintenance-mode) .profession-spec-notes li { border-color: rgba(126, 86, 42, 0.24) !important; background: rgba(255, 248, 228, 0.58) !important; color: rgba(58, 38, 20, 0.82) !important; } /* V1.27Beta-battle-skill-label1: readable enlarged battle skill label and one-line skill icon labels. */ html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill, html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.skill-tip, html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.preview-skill-tip, html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.inline-skill-name { box-sizing: border-box !important; display: inline-flex !important; grid-template-columns: none !important; align-items: center !important; justify-content: center !important; gap: 7px !important; min-width: min(238px, 88%) !important; max-width: min(420px, calc(100% - 32px)) !important; min-height: 34px !important; padding: 6px 14px !important; border: 1px solid rgba(142, 197, 225, 0.72) !important; border-left: 3px solid rgba(75, 155, 202, 0.92) !important; border-radius: 9px !important; background: linear-gradient(180deg, rgba(238, 248, 253, 0.94), rgba(195, 224, 239, 0.86)) !important; color: #153047 !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.48) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px rgba(5, 20, 32, 0.22) !important; filter: none !important; overflow: hidden !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill::before, html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill::after, html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-text::before, html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-text::after { content: none !important; display: none !important; border: 0 !important; background: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-icon { width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; flex: 0 0 22px !important; display: block !important; object-fit: contain !important; margin: 0 !important; align-self: center !important; } html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-text { display: inline-block !important; grid-row: auto !important; min-width: 0 !important; max-width: 100% !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; font-size: clamp(14px, 1.25vw, 17px) !important; font-weight: 900 !important; letter-spacing: 0 !important; line-height: 1 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.skill-label, .inline-skill-name, .inline-skill-action, .passive-skill-label) { display: inline-flex !important; grid-template-columns: none !important; align-items: center !important; justify-content: center !important; gap: 4px !important; flex-wrap: nowrap !important; white-space: nowrap !important; line-height: 1 !important; min-height: 22px !important; max-width: 100% !important; vertical-align: middle !important; } html body:not(.maintenance-mode) #battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.skill-label, .inline-skill-name, .inline-skill-action, .passive-skill-label) .skill-inline-icon, html body:not(.maintenance-mode) #battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.skill-label, .inline-skill-name, .inline-skill-action, .passive-skill-label) .skill-inline-icon.passive-skill-icon { width: 14px !important; min-width: 14px !important; max-width: 14px !important; height: 14px !important; min-height: 14px !important; max-height: 14px !important; flex: 0 0 14px !important; display: block !important; object-fit: contain !important; margin: 0 !important; align-self: center !important; grid-row: auto !important; } html body:not(.maintenance-mode) #battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.skill-label, .inline-skill-name, .inline-skill-action, .passive-skill-label) .skill-inline-text { display: inline-block !important; grid-row: auto !important; min-width: 0 !important; max-width: calc(100% - 18px) !important; line-height: 1 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; vertical-align: middle !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill, html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.skill-tip, html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.preview-skill-tip, html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.inline-skill-name { min-height: 30px !important; padding: 5px 11px !important; gap: 6px !important; } html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-icon { width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; flex-basis: 18px !important; } html body:not(.maintenance-mode) #battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.skill-label, .inline-skill-name, .inline-skill-action, .passive-skill-label) .skill-inline-icon, html body:not(.maintenance-mode) #battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.skill-label, .inline-skill-name, .inline-skill-action, .passive-skill-label) .skill-inline-icon.passive-skill-icon { width: 12px !important; min-width: 12px !important; max-width: 12px !important; height: 12px !important; min-height: 12px !important; max-height: 12px !important; flex-basis: 12px !important; } } /* V1.27Beta-identity-ellipse-map1: desktop identity seating uses the arena area, not the old grid. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) { padding: clamp(12px, 1.4vh, 20px) clamp(8px, 1vw, 16px) clamp(122px, 13vh, 146px) !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #teamBoard.team-board:not([hidden]) { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; min-height: clamp(570px, calc(100dvh - 212px), 760px) !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; border: 0 !important; background: none !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing.seat-ring { --identity-seat-w: clamp(164px, 11vw, 202px); --identity-seat-h: clamp(262px, 30vh, 324px); --identity-art-h: clamp(104px, 12.5vh, 142px); position: relative !important; display: block !important; width: min(100%, 1560px) !important; max-width: none !important; height: clamp(560px, calc(100dvh - 224px), 740px) !important; min-height: clamp(560px, calc(100dvh - 224px), 740px) !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: radial-gradient(ellipse at 50% 52%, rgba(255, 230, 180, 0.055), transparent 42%), radial-gradient(ellipse at 50% 52%, transparent 61%, rgba(196, 128, 76, 0.11) 62%, transparent 64%) !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing[data-seats="8"], html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing[data-seats="9"], html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing[data-seats="10"] { --identity-seat-w: clamp(142px, 9.5vw, 176px); --identity-seat-h: clamp(230px, 26vh, 282px); --identity-art-h: clamp(86px, 10.4vh, 118px); } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing[data-seats="5"], html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing[data-seats="6"] { --identity-seat-w: clamp(176px, 12vw, 216px); --identity-seat-h: clamp(276px, 31vh, 340px); --identity-art-h: clamp(112px, 13.2vh, 154px); } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-ring-core { display: none !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter.self-seat, html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter:nth-child(n) { position: absolute !important; left: var(--seat-x, 50%) !important; top: var(--seat-y, 50%) !important; z-index: 2 !important; grid-column: auto !important; grid-row: auto !important; transform: translate(-50%, -50%) !important; width: var(--identity-seat-w) !important; min-width: 0 !important; max-width: var(--identity-seat-w) !important; height: auto !important; min-height: var(--identity-seat-h) !important; margin: 0 !important; padding: 7px !important; display: grid !important; grid-template-rows: var(--identity-art-h) minmax(0, auto) !important; gap: 5px !important; overflow: hidden !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter.self-seat { z-index: 6 !important; } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-art { height: var(--identity-art-h) !important; min-height: var(--identity-art-h) !important; background-size: cover !important; background-position: center top !important; } } /* V1.27Beta-action-label-align1: keep action labels centered in the text lane beside the icon. */ html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card { position: relative !important; } html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card span { position: absolute !important; left: clamp(54px, 34%, 88px) !important; right: clamp(8px, 1vw, 14px) !important; top: 0 !important; bottom: 0 !important; inset-inline-start: clamp(54px, 34%, 88px) !important; inset-inline-end: clamp(8px, 1vw, 14px) !important; width: auto !important; height: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; display: grid !important; place-items: center !important; text-align: center !important; line-height: 1 !important; transform: none !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card span { left: clamp(42px, 31%, 62px) !important; right: 6px !important; inset-inline-start: clamp(42px, 31%, 62px) !important; inset-inline-end: 6px !important; font-size: clamp(13px, 3.8vw, 15px) !important; } } /* V1.27Beta-battle-no-white-frame1: the battle table is one surface; no bright outer stage frame. */ html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) .arena, html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) { border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) { background: transparent !important; background-color: transparent !important; background-image: none !important; overflow: visible !important; } 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:has(#battle.battle:not([hidden])) #battle.battle:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden])::after, html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle .fighters::before, html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle .fighters::after, html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle .team-board::before, html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle .team-board::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; } html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle #cards.cards, html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle .battle-libraries, html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle .utility { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* V1.27Beta-action-label-align2: labels sit in the painted text plate, not in the hidden SVG-icon lane. */ html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card span { left: 38% !important; right: 4% !important; top: 6% !important; bottom: -2% !important; inset-inline-start: 38% !important; inset-inline-end: 4% !important; place-items: center !important; align-items: center !important; justify-items: center !important; line-height: 1 !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card span { left: 37% !important; right: 4% !important; top: 4% !important; bottom: -2% !important; inset-inline-start: 37% !important; inset-inline-end: 4% !important; } } /* V1.27Beta-identity-portrait-space1: give identity-mode character art a bit more room. */ @media (min-width: 721px) { html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing.seat-ring { --identity-seat-h: clamp(282px, 32vh, 352px); --identity-art-h: clamp(124px, 14.6vh, 166px); } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing[data-seats="8"], html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing[data-seats="9"], html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing[data-seats="10"] { --identity-seat-h: clamp(244px, 27vh, 300px); --identity-art-h: clamp(98px, 11.6vh, 128px); } html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing[data-seats="5"], html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing[data-seats="6"] { --identity-seat-h: clamp(298px, 33.6vh, 370px); --identity-art-h: clamp(138px, 16vh, 184px); } } /* V1.27Beta-warlock-unholy-bgfix1-final: this must stay after battle-no-white-frame1. */ html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]), html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]) { --battle-stage-art: none !important; --battle-energy-art: none !important; position: relative !important; isolation: isolate !important; overflow: hidden !important; border: 1px solid rgba(214, 229, 242, 0.7) !important; border-radius: 14px !important; background-color: rgba(235, 247, 255, 0.42) !important; background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.68), transparent 48%), radial-gradient(ellipse at 18% 18%, rgba(var(--battle-accent-rgb, 120, 233, 255), 0.12), transparent 38%), radial-gradient(ellipse at 82% 16%, rgba(var(--battle-hot-rgb, 245, 207, 122), 0.1), transparent 36%), linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(214, 233, 248, 0.34) 58%, rgba(236, 210, 138, 0.12)), linear-gradient(180deg, rgba(245, 250, 255, 0.72), rgba(201, 224, 238, 0.44)) !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; box-shadow: 0 18px 44px rgba(7, 26, 44, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -24px 44px rgba(49, 115, 160, 0.08) !important; } html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::before, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden])::before { content: "" !important; display: block !important; visibility: visible !important; position: absolute !important; inset: 12px !important; z-index: 0 !important; pointer-events: none !important; border: 1px solid rgba(236, 210, 138, 0.24) !important; border-radius: 10px !important; background: var(--celestial-linework), linear-gradient(90deg, rgba(119, 211, 255, 0.12), transparent 18% 82%, rgba(236, 210, 138, 0.1)) !important; opacity: 0.42 !important; mix-blend-mode: normal !important; box-shadow: none !important; filter: none !important; animation: none !important; } html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden])::after, html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after, html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden])::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; box-shadow: none !important; filter: none !important; animation: none !important; } html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) > * { position: relative !important; z-index: 2 !important; }