/* V1.28Beta-identity-ring-orbit1: Identity mode must read as a ritual ring/orbit, not a plain split panel. Scope is limited to identity selection and identity battle seat-ring. */ html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden]) { position: relative !important; overflow: hidden !important; isolation: isolate !important; } /* V1.28Beta identity battle field visibility: use the real arena art plus stronger oval guide rings. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app .arena.arena { --identity-field-image: url("assets/ui/battle-arena-celestial-duel-v1.png?v=V1.28Beta-identity-visible-field1"); background: radial-gradient(ellipse at 50% 44%, rgba(255, 255, 255, 0.24), transparent 24%), radial-gradient(ellipse at 50% 68%, rgba(98, 213, 255, 0.22), transparent 38%), linear-gradient(180deg, rgba(247, 252, 255, 0.18), rgba(219, 243, 247, 0.14) 42%, rgba(18, 52, 76, 0.2)), var(--identity-field-image) center / cover no-repeat !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) { background: radial-gradient(ellipse at 50% 51%, rgba(255, 255, 255, 0.18), transparent 20%), radial-gradient(ellipse at 50% 52%, rgba(92, 204, 232, 0.18), transparent 42%), linear-gradient(90deg, rgba(14, 45, 61, 0.08), transparent 18%, transparent 82%, rgba(14, 45, 61, 0.08)) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring::before { top: 52% !important; width: min(84dvw, 1180px) !important; height: min(61dvh, 660px) !important; opacity: 0.98 !important; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.24) 0 10%, rgba(255, 244, 196, 0.14) 11% 23%, transparent 24% 100%), repeating-conic-gradient(from -8deg, rgba(255, 238, 176, 0.3) 0 4deg, transparent 4deg 15deg), radial-gradient(ellipse at center, transparent 0 48%, rgba(255, 244, 196, 0.64) 49%, rgba(92, 213, 255, 0.58) 50%, transparent 52%), radial-gradient(ellipse at center, transparent 0 67%, rgba(255, 255, 255, 0.4) 68%, rgba(85, 204, 232, 0.42) 69%, transparent 71%), radial-gradient(ellipse at center, transparent 0 78%, rgba(255, 236, 170, 0.34) 79%, transparent 81%) !important; filter: drop-shadow(0 0 20px rgba(88, 203, 255, 0.34)) drop-shadow(0 0 28px rgba(255, 226, 157, 0.18)) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring::after { top: 52% !important; width: min(52dvw, 720px) !important; height: min(40dvh, 460px) !important; opacity: 0.92 !important; border: 1px solid rgba(255, 244, 196, 0.62) !important; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.14), transparent 36%), radial-gradient(ellipse at center, transparent 0 58%, rgba(92, 213, 255, 0.24) 59%, transparent 62%) !important; box-shadow: inset 0 0 42px rgba(111, 219, 255, 0.22), 0 0 42px rgba(255, 226, 157, 0.18) !important; } html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden])::before, html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden])::after { content: "" !important; position: absolute !important; left: 50% !important; top: 52% !important; display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: none !important; border-radius: 999px !important; transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden])::before { width: min(78dvw, 760px) !important; height: min(78dvw, 760px) !important; z-index: 0 !important; background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 9%, transparent 10% 100%), repeating-conic-gradient(from -18deg, rgba(102, 221, 255, 0.24) 0 7deg, transparent 7deg 20deg), radial-gradient(circle, transparent 0 49%, rgba(255, 239, 176, 0.55) 50%, rgba(124, 225, 255, 0.5) 51%, transparent 53%), radial-gradient(circle, transparent 0 67%, rgba(255, 255, 255, 0.42) 68%, rgba(122, 216, 255, 0.3) 69%, transparent 71%) !important; filter: drop-shadow(0 0 24px rgba(111, 211, 255, 0.22)) !important; } html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden])::after { width: min(58dvw, 560px) !important; height: min(58dvw, 560px) !important; z-index: 0 !important; border: 1px solid rgba(255, 245, 198, 0.4) !important; box-shadow: inset 0 0 30px rgba(114, 207, 255, 0.16), 0 0 34px rgba(255, 223, 142, 0.14) !important; } html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden]) > * { position: relative !important; z-index: 2 !important; } html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden]) .identity-layout.identity-layout { position: relative !important; z-index: 2 !important; } html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden]) .identity-card-display.identity-card-display, html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden]) .identity-action-panel.identity-action-panel { backdrop-filter: blur(10px) saturate(1.1) !important; border-color: rgba(255, 244, 198, 0.28) !important; box-shadow: 0 18px 42px rgba(8, 20, 32, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; } html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden]) .identity-option-grid.identity-option-grid { position: relative !important; } html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden]) .identity-option.identity-option { border-radius: 999px !important; } @media (min-width: 900px) { html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden]) .identity-option-grid.identity-option-grid { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important; } } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring { position: relative !important; overflow: visible !important; isolation: isolate !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring::before, html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring::after { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: none !important; border-radius: 999px !important; transform: translate(-50%, -50%) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring::before { width: min(72dvw, 920px) !important; height: min(72dvh, 720px) !important; z-index: 0 !important; background: radial-gradient(ellipse, transparent 0 43%, rgba(255, 244, 196, 0.34) 44%, rgba(111, 219, 255, 0.42) 45%, transparent 47%), radial-gradient(ellipse, transparent 0 62%, rgba(255, 255, 255, 0.24) 63%, rgba(95, 206, 255, 0.2) 64%, transparent 66%), repeating-conic-gradient(from 9deg, rgba(255, 236, 170, 0.2) 0 5deg, transparent 5deg 18deg) !important; filter: drop-shadow(0 0 26px rgba(88, 203, 255, 0.22)) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring::after { width: min(46dvw, 560px) !important; height: min(46dvh, 420px) !important; z-index: 0 !important; border: 1px solid rgba(255, 244, 196, 0.36) !important; box-shadow: inset 0 0 34px rgba(111, 219, 255, 0.16), 0 0 34px rgba(255, 226, 157, 0.1) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring .seat-ring-core.seat-ring-core { position: absolute !important; left: 50% !important; top: 50% !important; display: grid !important; place-items: center !important; width: clamp(156px, 15vw, 230px) !important; height: clamp(156px, 15vw, 230px) !important; border-radius: 999px !important; border: 1px solid rgba(255, 242, 194, 0.52) !important; background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(122, 218, 255, 0.08) 45%, rgba(5, 12, 18, 0.18) 72%, transparent 100%) !important; box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.12), 0 0 36px rgba(98, 213, 255, 0.22) !important; transform: translate(-50%, -50%) !important; z-index: 1 !important; pointer-events: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter { z-index: 12 !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring .seat-fighter.self-seat.self-seat { z-index: 24 !important; } @media (max-width: 720px) { html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden])::before { width: 92dvw !important; height: 92dvw !important; top: 48% !important; } html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select:not([hidden])::after { width: 70dvw !important; height: 70dvw !important; top: 48% !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring::before { width: 88dvw !important; height: 58dvh !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring::after { width: 62dvw !important; height: 38dvh !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring .seat-ring-core.seat-ring-core { width: clamp(96px, 28vw, 134px) !important; height: clamp(96px, 28vw, 134px) !important; } } /* Final identity battle orbit override: keep this after the original ring rules. */ html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring::before { top: 52% !important; width: min(84dvw, 1180px) !important; height: min(61dvh, 660px) !important; opacity: 0.98 !important; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.24) 0 10%, rgba(255, 244, 196, 0.14) 11% 23%, transparent 24% 100%), repeating-conic-gradient(from -8deg, rgba(255, 238, 176, 0.3) 0 4deg, transparent 4deg 15deg), radial-gradient(ellipse at center, transparent 0 48%, rgba(255, 244, 196, 0.64) 49%, rgba(92, 213, 255, 0.58) 50%, transparent 52%), radial-gradient(ellipse at center, transparent 0 67%, rgba(255, 255, 255, 0.4) 68%, rgba(85, 204, 232, 0.42) 69%, transparent 71%), radial-gradient(ellipse at center, transparent 0 78%, rgba(255, 236, 170, 0.34) 79%, transparent 81%) !important; filter: drop-shadow(0 0 20px rgba(88, 203, 255, 0.34)) drop-shadow(0 0 28px rgba(255, 226, 157, 0.18)) !important; } html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing#seatRing#seatRing.seat-ring::after { top: 52% !important; width: min(52dvw, 720px) !important; height: min(40dvh, 460px) !important; opacity: 0.92 !important; border: 1px solid rgba(255, 244, 196, 0.62) !important; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.14), transparent 36%), radial-gradient(ellipse at center, transparent 0 58%, rgba(92, 213, 255, 0.24) 59%, transparent 62%) !important; box-shadow: inset 0 0 42px rgba(111, 219, 255, 0.22), 0 0 42px rgba(255, 226, 157, 0.18) !important; }