/* V1.28Beta-ui-icon-aspect-lock1 Hard rule: icon/action art must never be non-uniformly stretched. */ html body:not(.maintenance-mode) :is( img[class*="icon"], img[src*="/icons/"], .action-icon, .skill-inline-icon, .stat-label-icon, .status-token-icon, .status-inspect-icon, .profession-spec-title-icon, .identity-role-badge, .artifact-preview-art, .battle-wallpaper-toggle, .language-toggle, .music-toggle ) { object-fit: contain !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; transform-origin: center center !important; } /* V1.28Beta-action-label-redx1: Final hard rule: action text sits on the marked X point, and VS keeps equal left/right breathing room between the two facing character frames. */ @media (min-width: 900px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) { --battle-vs-offset-x: 0px; --battle-vs-center-viewport-x: calc(50% + clamp(12px, 1vw, 16px)); --duel-action-label-left-final: 42% !important; --duel-action-label-right-final: 5% !important; --duel-action-label-top-final: 43% !important; --action-label-left-final: 42% !important; --action-label-right-final: 5% !important; --action-label-top-final: 43% !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighters.fighters.fighters.fighters { grid-template-columns: var(--combatant-w) var(--versus-size) var(--combatant-w) !important; justify-content: center !important; justify-items: stretch !important; gap: var(--fighter-gap) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .you-combatant.you-combatant.you-combatant { transform: translateX(clamp(-22px, -1.15vw, -10px)) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .opponent-combatant.opponent-combatant.opponent-combatant { transform: none !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .you-combatant.you-combatant.you-combatant { justify-self: end !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .opponent-combatant.opponent-combatant.opponent-combatant { justify-self: start !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .versus.versus.versus.versus { transform: translateX(var(--battle-vs-offset-x, 0px)) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card.action-card.action-card > span { --action-label-left-final: 42% !important; --action-label-right-final: 5% !important; --action-label-top-final: 43% !important; left: 42% !important; right: 5% !important; top: 43% !important; } } @media (max-width: 899px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) { --action-label-left-final: 42% !important; --action-label-right-final: 5% !important; --action-label-top-final: 43% !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card.action-card.action-card > span { --action-label-left-final: 42% !important; --action-label-right-final: 5% !important; --action-label-top-final: 43% !important; left: 42% !important; right: 5% !important; top: 43% !important; } } /* V1.28Beta-battle-axis-actions7: Dead rule for action art: desktop buttons are intentionally much larger than the small Lollipopz-era size, and labels sit on the right crystal column. */ @media (min-width: 900px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) { --duel-action-gap-aspect-lock: clamp(16px, 1.35vw, 24px) !important; --duel-action-button-w-aspect-lock: min( clamp(214px, 16.2vw, 302px), calc((100vw - var(--battle-log-width-final, 236px) - 48px - var(--duel-action-gap-aspect-lock) * 2) / 3) ) !important; --duel-action-button-h-aspect-lock: calc(var(--duel-action-button-w-aspect-lock) * 9 / 16) !important; --duel-action-label-left-final: 52% !important; --duel-action-label-right-final: 5% !important; --duel-action-label-top-final: 54% !important; --action-label-left-final: var(--duel-action-label-left-final) !important; --action-label-right-final: var(--duel-action-label-right-final) !important; --action-label-top-final: var(--duel-action-label-top-final) !important; --duel-action-font-final: clamp(24px, 3.2dvh, 34px) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards { width: calc(var(--duel-action-button-w-aspect-lock) * 3 + var(--duel-action-gap-aspect-lock) * 2) !important; max-width: calc(100vw - var(--battle-log-width-final, 236px) - 48px) !important; height: var(--duel-action-button-h-aspect-lock) !important; min-height: var(--duel-action-button-h-aspect-lock) !important; max-height: var(--duel-action-button-h-aspect-lock) !important; grid-template-columns: repeat(3, var(--duel-action-button-w-aspect-lock)) !important; grid-auto-rows: var(--duel-action-button-h-aspect-lock) !important; gap: var(--duel-action-gap-aspect-lock) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card.action-card { width: var(--duel-action-button-w-aspect-lock) !important; min-width: var(--duel-action-button-w-aspect-lock) !important; max-width: var(--duel-action-button-w-aspect-lock) !important; height: var(--duel-action-button-h-aspect-lock) !important; min-height: var(--duel-action-button-h-aspect-lock) !important; max-height: var(--duel-action-button-h-aspect-lock) !important; aspect-ratio: 16 / 9 !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card.action-card > span { --action-label-left-final: 52% !important; --action-label-right-final: 5% !important; --action-label-top-final: 54% !important; left: var(--action-label-left-final) !important; right: var(--action-label-right-final) !important; top: var(--action-label-top-final) !important; font-size: var(--duel-action-font-final) !important; } } /* V1.28Beta-battle-axis-actions7-final: Last-layer lock: large desktop action art, mobile 16:9 art, and right-column labels aligned to the button crystals through the inline CSS variables. */ @media (min-width: 900px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) { --duel-action-gap-aspect-lock: clamp(16px, 1.35vw, 24px) !important; --duel-action-button-w-aspect-lock: min( clamp(214px, 16.2vw, 302px), calc((100vw - var(--battle-log-width-final, 236px) - 48px - var(--duel-action-gap-aspect-lock) * 2) / 3) ) !important; --duel-action-button-h-aspect-lock: calc(var(--duel-action-button-w-aspect-lock) * 9 / 16) !important; --duel-action-label-left-final: 52% !important; --duel-action-label-right-final: 5% !important; --duel-action-label-top-final: 54% !important; --action-label-left-final: var(--duel-action-label-left-final) !important; --action-label-right-final: var(--duel-action-label-right-final) !important; --action-label-top-final: var(--duel-action-label-top-final) !important; --duel-action-font-final: clamp(24px, 3.2dvh, 34px) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards { width: calc(var(--duel-action-button-w-aspect-lock) * 3 + var(--duel-action-gap-aspect-lock) * 2) !important; max-width: calc(100vw - var(--battle-log-width-final, 236px) - 48px) !important; height: var(--duel-action-button-h-aspect-lock) !important; min-height: var(--duel-action-button-h-aspect-lock) !important; max-height: var(--duel-action-button-h-aspect-lock) !important; grid-template-columns: repeat(3, var(--duel-action-button-w-aspect-lock)) !important; grid-auto-rows: var(--duel-action-button-h-aspect-lock) !important; gap: var(--duel-action-gap-aspect-lock) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card.action-card { width: var(--duel-action-button-w-aspect-lock) !important; min-width: var(--duel-action-button-w-aspect-lock) !important; max-width: var(--duel-action-button-w-aspect-lock) !important; height: var(--duel-action-button-h-aspect-lock) !important; min-height: var(--duel-action-button-h-aspect-lock) !important; max-height: var(--duel-action-button-h-aspect-lock) !important; aspect-ratio: 16 / 9 !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card.action-card > span { --action-label-left-final: 52% !important; --action-label-right-final: 5% !important; --action-label-top-final: 54% !important; left: var(--action-label-left-final) !important; right: var(--action-label-right-final) !important; top: var(--action-label-top-final) !important; font-size: var(--duel-action-font-final) !important; } } @media (max-width: 899px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) { --duel-action-gap-aspect-lock: clamp(4px, 1.3vw, 7px) !important; --duel-action-button-w-aspect-lock: calc((100vw - 12px - var(--duel-action-gap-aspect-lock) * 2) / 3) !important; --duel-action-button-h-aspect-lock: calc(var(--duel-action-button-w-aspect-lock) * 9 / 16) !important; --action-label-left-final: 50% !important; --action-label-right-final: 5% !important; --action-label-top-final: 53% !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card.action-card > span { --action-label-left-final: 50% !important; --action-label-right-final: 5% !important; --action-label-top-final: 53% !important; left: var(--action-label-left-final) !important; right: var(--action-label-right-final) !important; top: var(--action-label-top-final) !important; padding: 0 1.5% !important; } } @media (max-width: 899px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) { --duel-action-gap-aspect-lock: clamp(4px, 1.3vw, 7px) !important; --duel-action-button-w-aspect-lock: calc((100vw - 12px - var(--duel-action-gap-aspect-lock) * 2) / 3) !important; --duel-action-button-h-aspect-lock: calc(var(--duel-action-button-w-aspect-lock) * 9 / 16) !important; --action-label-left-final: 50% !important; --action-label-right-final: 5% !important; --action-label-top-final: 53% !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card.action-card > span { --action-label-left-final: 50% !important; --action-label-right-final: 5% !important; --action-label-top-final: 53% !important; left: var(--action-label-left-final) !important; right: var(--action-label-right-final) !important; top: var(--action-label-top-final) !important; padding: 0 1.5% !important; } } html body:not(.maintenance-mode) :is( .action-icon, .skill-inline-icon, .stat-label-icon, .status-token-icon, .status-inspect-icon, .profession-spec-title-icon, .identity-role-badge.compact, .battle-wallpaper-toggle, .language-toggle, .music-toggle ) { aspect-ratio: 1 / 1 !important; } html body:not(.maintenance-mode) :is( .equipment-slot, .artifact-preview-art ) { background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode) .equipment-slot.filled::before, html body:not(.maintenance-mode) .equipment-slot.filled::after, html body:not(.maintenance-mode) .status-token::before, html body:not(.maintenance-mode) .library-action::before, html body:not(.maintenance-mode) .identity-role-badge::before, html body:not(.maintenance-mode) .identity-option::before { background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } @media (min-width: 900px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) { --duel-action-gap-aspect-lock: clamp(9px, 0.82vw, 13px); --duel-action-button-w-aspect-lock: clamp(124px, 9.2vw, 172px); --duel-action-button-h-aspect-lock: calc(var(--duel-action-button-w-aspect-lock) * 9 / 16); } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards.cards.cards { display: grid !important; grid-template-columns: repeat(3, var(--duel-action-button-w-aspect-lock)) !important; grid-auto-rows: var(--duel-action-button-h-aspect-lock) !important; justify-content: center !important; align-items: center !important; gap: var(--duel-action-gap-aspect-lock) !important; width: calc(var(--duel-action-button-w-aspect-lock) * 3 + var(--duel-action-gap-aspect-lock) * 2) !important; min-width: 0 !important; max-width: calc(var(--duel-action-button-w-aspect-lock) * 3 + var(--duel-action-gap-aspect-lock) * 2) !important; height: var(--duel-action-button-h-aspect-lock) !important; min-height: var(--duel-action-button-h-aspect-lock) !important; max-height: var(--duel-action-button-h-aspect-lock) !important; overflow: visible !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card { flex: 0 0 var(--duel-action-button-w-aspect-lock) !important; width: var(--duel-action-button-w-aspect-lock) !important; min-width: var(--duel-action-button-w-aspect-lock) !important; max-width: var(--duel-action-button-w-aspect-lock) !important; height: var(--duel-action-button-h-aspect-lock) !important; min-height: var(--duel-action-button-h-aspect-lock) !important; max-height: var(--duel-action-button-h-aspect-lock) !important; aspect-ratio: 16 / 9 !important; box-sizing: border-box !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } } @media (max-width: 899px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) { --duel-action-gap-aspect-lock: clamp(4px, 1.3vw, 7px); --duel-action-button-w-aspect-lock: calc((100vw - 12px - var(--duel-action-gap-aspect-lock) * 2) / 3); --duel-action-button-h-aspect-lock: calc(var(--duel-action-button-w-aspect-lock) * 9 / 16); } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards.cards.cards { display: grid !important; grid-template-columns: repeat(3, var(--duel-action-button-w-aspect-lock)) !important; grid-auto-rows: var(--duel-action-button-h-aspect-lock) !important; justify-content: center !important; align-items: center !important; gap: var(--duel-action-gap-aspect-lock) !important; height: var(--duel-action-button-h-aspect-lock) !important; min-height: var(--duel-action-button-h-aspect-lock) !important; max-height: var(--duel-action-button-h-aspect-lock) !important; overflow: visible !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card { width: var(--duel-action-button-w-aspect-lock) !important; min-width: var(--duel-action-button-w-aspect-lock) !important; max-width: var(--duel-action-button-w-aspect-lock) !important; height: var(--duel-action-button-h-aspect-lock) !important; min-height: var(--duel-action-button-h-aspect-lock) !important; max-height: var(--duel-action-button-h-aspect-lock) !important; aspect-ratio: 16 / 9 !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } } /* V1.28Beta-battle-vs-axis1: Desktop duel axis is measured from the two center status panels; the VS badge and the middle defense action share that same screen X coordinate. */ @media (min-width: 900px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .versus.versus.versus { transform: translateX(var(--battle-vs-offset-x, 0px)) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards.cards.cards { position: absolute !important; left: var(--battle-vs-center-viewport-x, calc(50% + clamp(12px, 1vw, 16px))) !important; right: auto !important; transform: translateX(-50%) !important; } } /* V1.28Beta-battle-axis-actions5: Final desktop action scale and label anchor. The center defense button follows the same measured viewport X as the VS badge. */ @media (min-width: 900px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) { --duel-action-gap-aspect-lock: clamp(14px, 1.23vw, 20px) !important; --duel-action-button-w-aspect-lock: min( clamp(186px, 13.8vw, 258px), calc((100vw - var(--battle-log-width-final, 236px) - 44px - var(--duel-action-gap-aspect-lock) - var(--duel-action-gap-aspect-lock)) / 3) ) !important; --duel-action-button-h-aspect-lock: calc(var(--duel-action-button-w-aspect-lock) * 9 / 16) !important; --duel-action-label-left-final: 48% !important; --duel-action-label-right-final: 6% !important; --duel-action-label-top-final: 58% !important; --duel-action-font-final: clamp(22px, 3dvh, 31px) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .versus.versus.versus.versus { transform: translateX(var(--battle-vs-offset-x, 0px)) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards.cards.cards { display: grid !important; position: absolute !important; left: var(--battle-vs-center-viewport-x, calc(50% + clamp(12px, 1vw, 16px))) !important; right: auto !important; top: auto !important; bottom: calc(max(6px, env(safe-area-inset-bottom)) + clamp(8px, 1.2dvh, 14px)) !important; width: calc(var(--duel-action-button-w-aspect-lock) * 3 + var(--duel-action-gap-aspect-lock) + var(--duel-action-gap-aspect-lock)) !important; min-width: 0 !important; max-width: calc(100vw - var(--battle-log-width-final, 236px) - 44px) !important; height: var(--duel-action-button-h-aspect-lock) !important; min-height: var(--duel-action-button-h-aspect-lock) !important; max-height: var(--duel-action-button-h-aspect-lock) !important; grid-template-columns: repeat(3, var(--duel-action-button-w-aspect-lock)) !important; grid-auto-rows: var(--duel-action-button-h-aspect-lock) !important; justify-content: center !important; align-items: center !important; justify-items: stretch !important; gap: var(--duel-action-gap-aspect-lock) !important; transform: translateX(-50%) !important; transform-origin: center bottom !important; overflow: visible !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card { flex: 0 0 var(--duel-action-button-w-aspect-lock) !important; width: var(--duel-action-button-w-aspect-lock) !important; min-width: var(--duel-action-button-w-aspect-lock) !important; max-width: var(--duel-action-button-w-aspect-lock) !important; height: var(--duel-action-button-h-aspect-lock) !important; min-height: var(--duel-action-button-h-aspect-lock) !important; max-height: var(--duel-action-button-h-aspect-lock) !important; aspect-ratio: 16 / 9 !important; padding: 0 !important; box-sizing: border-box !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card > span { position: absolute !important; left: var(--duel-action-label-left-final) !important; right: var(--duel-action-label-right-final) !important; top: var(--duel-action-label-top-final) !important; bottom: auto !important; width: auto !important; height: auto !important; display: grid !important; place-items: center !important; transform: translateY(-50%) !important; color: #f9fbff !important; -webkit-text-fill-color: #f9fbff !important; font-size: var(--duel-action-font-final) !important; font-weight: 950 !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; } } /* V1.28Beta-battle-axis-actions7-tail: Actual tail lock after every older action rule. */ @media (min-width: 900px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) { --duel-action-gap-aspect-lock: clamp(16px, 1.35vw, 24px) !important; --duel-action-button-w-aspect-lock: min( clamp(214px, 16.2vw, 302px), calc((100vw - var(--battle-log-width-final, 236px) - 48px - var(--duel-action-gap-aspect-lock) * 2) / 3) ) !important; --duel-action-button-h-aspect-lock: calc(var(--duel-action-button-w-aspect-lock) * 9 / 16) !important; --duel-action-label-left-final: 52% !important; --duel-action-label-right-final: 5% !important; --duel-action-label-top-final: 54% !important; --action-label-left-final: var(--duel-action-label-left-final) !important; --action-label-right-final: var(--duel-action-label-right-final) !important; --action-label-top-final: var(--duel-action-label-top-final) !important; --duel-action-font-final: clamp(24px, 3.2dvh, 34px) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards { width: calc(var(--duel-action-button-w-aspect-lock) * 3 + var(--duel-action-gap-aspect-lock) * 2) !important; max-width: calc(100vw - var(--battle-log-width-final, 236px) - 48px) !important; height: var(--duel-action-button-h-aspect-lock) !important; min-height: var(--duel-action-button-h-aspect-lock) !important; max-height: var(--duel-action-button-h-aspect-lock) !important; grid-template-columns: repeat(3, var(--duel-action-button-w-aspect-lock)) !important; grid-auto-rows: var(--duel-action-button-h-aspect-lock) !important; gap: var(--duel-action-gap-aspect-lock) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card.action-card.action-card > span { --action-label-left-final: 52% !important; --action-label-right-final: 5% !important; --action-label-top-final: 54% !important; left: var(--action-label-left-final) !important; right: var(--action-label-right-final) !important; top: var(--action-label-top-final) !important; font-size: var(--duel-action-font-final) !important; } } @media (max-width: 899px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) { --duel-action-gap-aspect-lock: clamp(4px, 1.3vw, 7px) !important; --duel-action-button-w-aspect-lock: calc((100vw - 12px - var(--duel-action-gap-aspect-lock) * 2) / 3) !important; --duel-action-button-h-aspect-lock: calc(var(--duel-action-button-w-aspect-lock) * 9 / 16) !important; --action-label-left-final: 50% !important; --action-label-right-final: 5% !important; --action-label-top-final: 53% !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card.action-card.action-card > span { --action-label-left-final: 50% !important; --action-label-right-final: 5% !important; --action-label-top-final: 53% !important; left: var(--action-label-left-final) !important; right: var(--action-label-right-final) !important; top: var(--action-label-top-final) !important; padding: 0 1.5% !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries.battle-libraries.battle-libraries { position: fixed !important; left: var(--mobile-battle-edge, max(6px, env(safe-area-inset-left))) !important; right: auto !important; top: auto !important; bottom: var(--mobile-battle-bottom, calc(max(6px, env(safe-area-inset-bottom)) + 6px)) !important; width: clamp(154px, 42vw, 172px) !important; min-width: clamp(154px, 42vw, 172px) !important; max-width: clamp(154px, 42vw, 172px) !important; height: var(--mobile-battle-bottom-row, clamp(38px, 10.4vw, 42px)) !important; min-height: var(--mobile-battle-bottom-row, clamp(38px, 10.4vw, 42px)) !important; max-height: var(--mobile-battle-bottom-row, clamp(38px, 10.4vw, 42px)) !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 3px !important; align-items: stretch !important; justify-items: stretch !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries.battle-libraries.battle-libraries::before, html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries.battle-libraries.battle-libraries::after, html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries.battle-libraries.battle-libraries > .library-action.library-action.library-action::before, html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries.battle-libraries.battle-libraries > .library-action.library-action.library-action::after { content: none !important; display: none !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries.battle-libraries.battle-libraries > .library-action.library-action.library-action { width: 100% !important; min-width: 0 !important; max-width: none !important; height: var(--mobile-battle-bottom-row, clamp(38px, 10.4vw, 42px)) !important; min-height: 0 !important; max-height: var(--mobile-battle-bottom-row, clamp(38px, 10.4vw, 42px)) !important; justify-self: stretch !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; transform: none !important; overflow: hidden !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel#sidePanel#sidePanel.side.side.side.side .battle-status.status-line.battle-status.status-line, html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #sidePanel#sidePanel#sidePanel#sidePanel.side.side.side.side .battle-status.status-line.battle-status.status-line { position: fixed !important; top: calc(max(8px, env(safe-area-inset-top)) + 25px) !important; left: 0 !important; right: auto !important; width: calc(100vw - var(--duel-mobile-edge, var(--mobile-battle-edge, max(6px, env(safe-area-inset-left)))) - var(--duel-mobile-edge-r, var(--mobile-battle-edge-r, max(6px, env(safe-area-inset-right))))) !important; max-width: none !important; transform: none !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries.battle-libraries.battle-libraries > #showOpportunityLibraryBattle#showOpportunityLibraryBattle#showOpportunityLibraryBattle.library-action.library-action.library-action.library-action, html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries.battle-libraries.battle-libraries > #showArtifactLibraryBattle#showArtifactLibraryBattle#showArtifactLibraryBattle.library-action.library-action.library-action.library-action { height: var(--mobile-battle-bottom-row, clamp(38px, 10.4vw, 42px)) !important; min-height: 0 !important; max-height: var(--mobile-battle-bottom-row, clamp(38px, 10.4vw, 42px)) !important; width: 100% !important; min-width: 0 !important; max-width: none !important; align-self: stretch !important; justify-self: stretch !important; margin: 0 !important; padding: 0 !important; transform: none !important; } } /* V1.28Beta-action-label-redx2-tail: Last word: the three action labels sit on the marked X, and the VS gap is symmetric on both sides. */ @media (min-width: 900px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) { --battle-vs-offset-x: 0px; --battle-vs-center-viewport-x: calc(50% + clamp(12px, 1vw, 16px)); --duel-action-label-left-final: 42% !important; --duel-action-label-right-final: 5% !important; --duel-action-label-top-final: 43% !important; --action-label-left-final: 42% !important; --action-label-right-final: 5% !important; --action-label-top-final: 43% !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighters.fighters.fighters.fighters.fighters { grid-template-columns: var(--combatant-w) var(--versus-size) var(--combatant-w) !important; justify-content: center !important; justify-items: stretch !important; gap: var(--fighter-gap) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .you-combatant.you-combatant.you-combatant { transform: translateX(clamp(-22px, -1.15vw, -10px)) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .opponent-combatant.opponent-combatant.opponent-combatant { transform: none !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .you-combatant.you-combatant.you-combatant { justify-self: end !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .opponent-combatant.opponent-combatant.opponent-combatant { justify-self: start !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .versus.versus.versus.versus { transform: translateX(var(--battle-vs-offset-x, 0px)) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card.action-card.action-card > span { --action-label-left-final: 42% !important; --action-label-right-final: 5% !important; --action-label-top-final: 43% !important; left: 42% !important; right: 5% !important; top: 43% !important; } } @media (max-width: 899px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) { --action-label-left-final: 42% !important; --action-label-right-final: 5% !important; --action-label-top-final: 43% !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards#cards#cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards > button.action-card.action-card.action-card.action-card.action-card.action-card > span { --action-label-left-final: 42% !important; --action-label-right-final: 5% !important; --action-label-top-final: 43% !important; left: 42% !important; right: 5% !important; top: 43% !important; } } /* V1.28Beta-vs-theme-core1: battle VS uses the same blue-white-gold crystal theme as the duel UI. */ html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle#battle.battle:not([hidden]) .versus.versus.versus { overflow: visible !important; border: 1px solid rgba(220, 202, 137, 0.72) !important; border-radius: 50% !important; background: linear-gradient(90deg, transparent 0 12%, rgba(226, 207, 136, 0.52) 12% 16%, transparent 16% 84%, rgba(226, 207, 136, 0.52) 84% 88%, transparent 88% 100%), radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0) 19%), radial-gradient(circle at 50% 54%, rgba(96, 219, 233, 0.42), rgba(96, 219, 233, 0) 58%), linear-gradient(145deg, rgba(25, 85, 112, 0.98), rgba(7, 19, 38, 0.99) 55%, rgba(20, 66, 88, 0.98)) !important; color: #f8fdff !important; -webkit-text-fill-color: #f8fdff !important; font-family: "Inter", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif !important; font-weight: 950 !important; letter-spacing: 0 !important; text-shadow: 0 1px 0 rgba(4, 22, 36, 0.8), 0 0 10px rgba(120, 226, 238, 0.5), 0 0 18px rgba(232, 207, 134, 0.2) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -13px 20px rgba(0, 8, 20, 0.34), inset 0 0 0 4px rgba(255, 255, 255, 0.045), 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 24px rgba(108, 219, 232, 0.22), 0 8px 22px rgba(4, 17, 29, 0.28) !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle#battle.battle:not([hidden]) .versus.versus.versus::before { content: "" !important; position: absolute !important; inset: -8px !important; z-index: -1 !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(94, 214, 229, 0.24), rgba(94, 214, 229, 0) 57%), conic-gradient(from 24deg, rgba(226, 207, 136, 0.88), rgba(88, 209, 225, 0.36), rgba(255, 255, 255, 0.18), rgba(88, 209, 225, 0.36), rgba(226, 207, 136, 0.88)) !important; filter: none !important; opacity: 0.9 !important; animation: energyOrbit 14s linear infinite !important; } html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle#battle.battle:not([hidden]) .versus.versus.versus::after { content: "" !important; position: absolute !important; inset: 6px !important; z-index: 0 !important; border-radius: 50% !important; border-left: 2px solid rgba(231, 211, 143, 0.62) !important; border-right: 2px solid rgba(231, 211, 143, 0.62) !important; border-top: 1px solid rgba(138, 229, 240, 0.32) !important; border-bottom: 1px solid rgba(138, 229, 240, 0.26) !important; background: radial-gradient(circle, transparent 48%, rgba(255, 255, 255, 0.08) 49%, transparent 56%) !important; box-shadow: inset 0 0 12px rgba(119, 220, 234, 0.16), 0 0 10px rgba(228, 206, 136, 0.12) !important; pointer-events: none !important; } @media (max-width: 899px) { html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle#battle.battle:not([hidden]) .versus.versus.versus { font-size: clamp(17px, 5vw, 23px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -10px 16px rgba(0, 8, 20, 0.3), inset 0 0 0 3px rgba(255, 255, 255, 0.04), 0 0 16px rgba(108, 219, 232, 0.2), 0 5px 14px rgba(4, 17, 29, 0.22) !important; } }