/* --- Population Bar Polish (Holo Button Feel) --- */ #zonePanel .hzDist{ position: relative; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } #zonePanel .hzDist::before{ content:""; position:absolute; inset:0; border-radius:999px; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); opacity:.55; pointer-events:none; } #zonePanel .hzDist::after{ content:""; position:absolute; inset:-30%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.14), transparent 55%); opacity:.45; filter: blur(10px); pointer-events:none; } #zonePanel .hzDist:hover{ border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.26); } #zonePanel .hzDistBar{ position: relative; } /* Slow shimmer scan across the bar */ #zonePanel .hzDistBar::before{ content:""; position:absolute; inset:-2px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.10) 60%, transparent 100%); transform: translateX(-70%); animation: hzScan 6.5s ease-in-out infinite; opacity:.45; pointer-events:none; mix-blend-mode: screen; } @keyframes hzScan{ 0%{ transform: translateX(-70%); } 55%{ transform: translateX(20%); } 100%{ transform: translateX(70%); } } #zonePanel .hzSeg{ position: relative; cursor: pointer; transition: filter .15s ease, transform .15s ease; } #zonePanel .hzSeg:hover{ filter: brightness(1.18) saturate(1.08); } #zonePanel .hzSeg:hover{ transform: translateY(-1px); } #zonePanel .hzDistTip{ position: absolute; left: 50%; top: -10px; transform: translate(-50%, -100%); white-space: nowrap; font-size: 11px; letter-spacing: .03em; padding: 7px 12px 7px 18px; border-radius: 12px; background: rgba(0,0,0,.74); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 12px 28px rgba(0,0,0,.40); color: rgba(255,255,255,.94); pointer-events: none; z-index: 5; /* Stylised (B): subtle accent strip + glow */ --tipAccent: rgba(255,255,255,.18); box-shadow: 0 14px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06), 0 0 18px var(--tipAccent); } #zonePanel .hzDistTip::before{ content:""; position:absolute; left: 10px; top: 8px; bottom: 8px; width: 3px; border-radius: 6px; background: var(--tipAccent); opacity: .95; } #zonePanel .hzDistTip::after{ content:""; position:absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: rgba(0,0,0,.74); border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); } /* Segment tooltip (no extra HTML) */ #zonePanel .hzSeg::after{ content: attr(data-tip); position: absolute; left: 50%; bottom: 155%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; letter-spacing: .03em; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 10px 26px rgba(0,0,0,.35); color: rgba(255,255,255,.92); opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; } #zonePanel .hzSeg::before{ content:""; position:absolute; left:50%; bottom: 140%; transform: translateX(-50%); width: 10px; height: 10px; background: rgba(0,0,0,.72); border-left: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); transform: translateX(-50%) rotate(45deg); opacity:0; pointer-events:none; transition: opacity .12s ease; } #zonePanel .hzSeg:hover::after, #zonePanel .hzSeg:hover::before{ opacity: 1; } :root{ /* Defaults (JS overrides these per selected faction) */ --panelAccent: #FFAA46; --panelAccent2: #FFD37A; --panelAccentA: rgba(255,170,70,.55); --panelAccentA2: rgba(255,170,70,.22); } .stage{ position:relative; height: auto; min-height: calc(100vh - 56px); padding-bottom: 28px; padding: 22px 28px; } /* (Removed) HomeZone quick strip above planet — reclaimed space for the BodSphere. */ /* Planet bottom-centre */ .planetWrap{ position:absolute; /* Align planet with the right column gutter */ right: 28px; bottom: 18px; left: auto; transform: none; /* Match the right-column panel width without overpowering layout */ width: clamp(310px, 24vw, 370px); height: 420px; pointer-events:auto; z-index: 0; opacity: .95; overflow: visible; } /* Soft radial “halo” around the planet */ .planetWrap::before{ content:""; position:absolute; inset:-62px; background: radial-gradient(closest-side, rgba(120,180,255,.20) 0%, rgba(140,90,255,.14) 38%, rgba(120,180,255,.06) 56%, transparent 72%); filter: blur(10px); z-index:0; pointer-events:none; } /* Contained “atmosphere ring” */ .planetWrap::after{ content:""; position:absolute; inset:-2px; border-radius: 999px; box-shadow: 0 0 26px rgba(120,180,255,.20), 0 0 60px rgba(140,90,255,.12), inset 0 0 80px rgba(0,0,0,.58); z-index:2; pointer-events:none; } #planetCanvas{ width:100%; height:100%; display:block; border-radius: 999px; box-shadow: 0 30px 90px rgba(0,0,0,.60); position:relative; z-index:1; cursor: grab; } .planetWrap.is-grabbing #planetCanvas{ cursor: grabbing; } .dragPill{ position:absolute; left:50%; bottom:-16px; transform:translateX(-50%); padding:6px 12px; border-radius:999px; background: rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.85); user-select:none; pointer-events:none; } /* Info panel top-right */ .panelWrap{ position:absolute; top: 28px; right: 28px; bottom: 28px; /* allow internal scrolling on shorter screens */ /* Thinner right column so the swarm has more space */ width: 420px; z-index: 3; display:flex; flex-direction:column; gap: 18px; overflow-y: auto; overflow-x: hidden; padding-right: 6px; /* keep scrollbar off content edge */ } .panel{ padding: 18px 18px 14px; } .panel h2{ margin:4px 0 6px; font-size: 22px; } .panel .kicker{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.65) } .panel .desc{ color: rgba(255,255,255,.82); line-height:1.35; font-size: 13px; margin: 8px 0 12px; } .panel .chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); font-size:12px; color: rgba(255,255,255,.85); } .dot{width:8px; height:8px; border-radius:99px; background:var(--accent)} .stack{display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 12px;} .actions{display:flex; gap:10px; flex-wrap:wrap} /* Swarm area (big interactive field) */ .swarm{ position:absolute; top: 28px; left: 28px; /* Leave extra space for the premium pop-out */ /* Must match panelWrap width + spacing */ /* Match panelWrap width (420) + right gutter (28) + a little breathing room */ /* Match the right panel width + gutter (do NOT reserve extra dock space) */ right: calc(clamp(310px, 24vw, 370px) + 30px); /* panel width + narrow gutter */ bottom: 28px; /* planet overlays; no reserved space */ border-radius: 20px; border: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(16,20,27,.34), rgba(16,20,27,.10)); backdrop-filter: blur(10px); overflow:hidden; z-index: 1; } /* BuddiUp dock positioning is defined later with the BuddiUp component styles */ .swarmHeader{ padding: 10px 14px 8px; border-bottom: 1px solid rgba(255,255,255,.08); } .swarmHeaderRow{ display:flex; align-items:center; justify-content:space-between; gap: 12px; } .swarmHeaderTools{ display:flex; align-items:center; justify-content:flex-end; gap: 10px; flex: 0 0 auto; } .swarmZoom{ display:flex; align-items:center; gap: 6px; padding: 4px; border-radius: 999px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .swarmZoomBtn, .swarmZoomReadout{ appearance:none; border:none; color: rgba(255,255,255,.92); background: transparent; height: 28px; min-width: 28px; padding: 0 10px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .08em; cursor:pointer; } .swarmZoomBtn:hover, .swarmZoomReadout:hover{ background: rgba(255,255,255,.08); } .swarmZoomReadout{ min-width: 58px; font-size: 11px; text-transform: uppercase; } .swarmRight{ display:flex; flex-direction: column; align-items:flex-end; gap: 10px; min-width: 0; } .swarmKicker{ font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.65); } .swarmMeta{ font-size: 12px; color: rgba(255,255,255,.78); white-space:nowrap; } .swarmHint{ display:none; } .swarmMetaRow{ display:flex; align-items:center; gap:10px; } .swarmMetaLogo{ height:18px; width:auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); opacity:.95; } .swarmMetaTitle{ font-weight:700; font-size:12px; color: rgba(255,255,255,.88); } .swarmMetaSub{ font-size:11px; color: rgba(255,255,255,.62); } /* Bigger, steadier faction badge on the right of the swarm header */ .swarmBadge{ display:flex; align-items:center; gap:10px; /* Standalone logo (no pill) so it never visually "connects" to the top-right discovered counter in the header strip. */ padding:0; border-radius:0; border:none; background:transparent; } .swarmBadge img{ height:64px; width:auto; display:block; object-fit:contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); } .swarmBadge img{ max-width: min(260px, calc(100vw - 520px)); } .swarmCount{ display:none; } /* Park the faction badge in the top-right corner of the swarm pane (outside header height) */ .swarmBadgeCorner{ position:absolute; /* Keep it clearly separate from the slim header strip (KNOWN BODS / 69 discovered) but park it in the *swarm pane* corner (not in the header bar). */ top: 36px; left: 18px; z-index: 5; } /* Ambient spores / particles behind the Swarm bubbles (decorative layer) Implemented as pseudo-elements on .swarmField so JS can freely clear/rebuild bubbles without ever deleting the particle layer. */ :root{ /* Main intensity dial (raise/lower only this if needed) */ --swarm-particles-opacity: 0.14; --swarm-particles-color: rgba(76,217,100,1); } .swarmField{ position:relative; z-index: 2; position:absolute; left:0; right:0; top: 44px; bottom:0; overflow:hidden; isolation:isolate; } /* Particle layers (behind bubbles) */ .swarmField::before, .swarmField::after{ content:""; position:absolute; inset:-20%; pointer-events:none; z-index: 0; opacity: var(--swarm-particles-opacity); mix-blend-mode: screen; will-change: transform, opacity; } .swarmField::before{ background-image: /* ORIGINAL MAP */ radial-gradient(circle at 83% 16%, rgba(255,255,255,0.04) 1px, transparent 6px), radial-gradient(circle at 88% 96%, rgba(76,217,100,0.10) 1px, transparent 5px), radial-gradient(circle at 29% 31%, rgba(76,217,100,0.08) 1px, transparent 6px), radial-gradient(circle at 71% 55%, rgba(76,217,100,0.18) 1.2px, transparent 5px), radial-gradient(circle at 22% 91%, rgba(76,217,100,0.12) 1px, transparent 6px), radial-gradient(circle at 15% 13%, rgba(76,217,100,0.14) 1px, transparent 5px), radial-gradient(circle at 7% 95%, rgba(76,217,100,0.10) 1.2px, transparent 5px), radial-gradient(circle at 39% 82%, rgba(76,217,100,0.20) 1.1px, transparent 6px), radial-gradient(circle at 7% 86%, rgba(76,217,100,0.12) 1px, transparent 5px), radial-gradient(circle at 14% 50%, rgba(76,217,100,0.18) 1px, transparent 6px), /* DUPLICATE MAP (offset slightly so it doesn't look grid-like) */ radial-gradient(circle at 12% 18%, rgba(76,217,100,0.12) 1px, transparent 6px), radial-gradient(circle at 44% 76%, rgba(76,217,100,0.18) 1px, transparent 6px), radial-gradient(circle at 66% 12%, rgba(255,255,255,0.05) 1px, transparent 6px), radial-gradient(circle at 91% 43%, rgba(76,217,100,0.14) 1px, transparent 5px), radial-gradient(circle at 53% 90%, rgba(76,217,100,0.16) 1px, transparent 6px), radial-gradient(circle at 4% 62%, rgba(76,217,100,0.11) 1px, transparent 5px), radial-gradient(circle at 74% 37%, rgba(76,217,100,0.17) 1px, transparent 6px), radial-gradient(circle at 32% 59%, rgba(76,217,100,0.13) 1px, transparent 5px), radial-gradient(circle at 85% 73%, rgba(76,217,100,0.15) 1px, transparent 6px), radial-gradient(circle at 58% 41%, rgba(76,217,100,0.19) 1px, transparent 6px), /* ORIGINAL MAP */ radial-gradient(circle at 92% 29%, rgba(255,255,255,0.04) 1px, transparent 6px), radial-gradient(circle at 97% 9%, rgba(76,217,100,0.10) 1px, transparent 5px), radial-gradient(circle at 38% 44%, rgba(76,217,100,0.08) 1px, transparent 6px), radial-gradient(circle at 80% 68%, rgba(76,217,100,0.18) 1.2px, transparent 5px), radial-gradient(circle at 31% 4%, rgba(76,217,100,0.12) 1px, transparent 6px), radial-gradient(circle at 24% 26%, rgba(76,217,100,0.14) 1px, transparent 5px), radial-gradient(circle at 16% 8%, rgba(76,217,100,0.10) 1.2px, transparent 5px), radial-gradient(circle at 48% 95%, rgba(76,217,100,0.20) 1.1px, transparent 6px), radial-gradient(circle at 16% 99%, rgba(76,217,100,0.12) 1px, transparent 5px), radial-gradient(circle at 23% 63%, rgba(76,217,100,0.18) 1px, transparent 6px), /* DUPLICATE MAP (offset slightly so it doesn't look grid-like) */ radial-gradient(circle at 21% 31%, rgba(76,217,100,0.12) 1px, transparent 6px), radial-gradient(circle at 53% 89%, rgba(76,217,100,0.18) 1px, transparent 6px), radial-gradient(circle at 75% 25%, rgba(255,255,255,0.05) 1px, transparent 6px), radial-gradient(circle at 0% 56%, rgba(76,217,100,0.14) 1px, transparent 5px), radial-gradient(circle at 62% 3%, rgba(76,217,100,0.16) 1px, transparent 6px), radial-gradient(circle at 13% 75%, rgba(76,217,100,0.11) 1px, transparent 5px), radial-gradient(circle at 83% 50%, rgba(76,217,100,0.17) 1px, transparent 6px), radial-gradient(circle at 41% 72%, rgba(76,217,100,0.13) 1px, transparent 5px), radial-gradient(circle at 94% 86%, rgba(76,217,100,0.15) 1px, transparent 6px), radial-gradient(circle at 67% 54%, rgba(76,217,100,0.19) 1px, transparent 6px), /* ORIGINAL MAP */ radial-gradient(circle at 6% 23%, rgba(255,255,255,0.04) 1px, transparent 6px), radial-gradient(circle at 11% 3%, rgba(76,217,100,0.10) 1px, transparent 5px), radial-gradient(circle at 52% 38%, rgba(76,217,100,0.08) 1px, transparent 6px), radial-gradient(circle at 94% 62%, rgba(76,217,100,0.18) 1.2px, transparent 5px), radial-gradient(circle at 45% 98%, rgba(76,217,100,0.12) 1px, transparent 6px), radial-gradient(circle at 38% 20%, rgba(76,217,100,0.14) 1px, transparent 5px), radial-gradient(circle at 30% 2%, rgba(76,217,100,0.10) 1.2px, transparent 5px), radial-gradient(circle at 62% 89%, rgba(76,217,100,0.20) 1.1px, transparent 6px), radial-gradient(circle at 30% 93%, rgba(76,217,100,0.12) 1px, transparent 5px), radial-gradient(circle at 37% 57%, rgba(76,217,100,0.18) 1px, transparent 6px), /* DUPLICATE MAP (offset slightly so it doesn't look grid-like) */ radial-gradient(circle at 35% 25%, rgba(76,217,100,0.12) 1px, transparent 6px), radial-gradient(circle at 67% 83%, rgba(76,217,100,0.18) 1px, transparent 6px), radial-gradient(circle at 89% 19%, rgba(255,255,255,0.05) 1px, transparent 6px), radial-gradient(circle at 14% 50%, rgba(76,217,100,0.14) 1px, transparent 5px), radial-gradient(circle at 76% 97%, rgba(76,217,100,0.16) 1px, transparent 6px), radial-gradient(circle at 27% 69%, rgba(76,217,100,0.11) 1px, transparent 5px), radial-gradient(circle at 97% 44%, rgba(76,217,100,0.17) 1px, transparent 6px), radial-gradient(circle at 55% 66%, rgba(76,217,100,0.13) 1px, transparent 5px), radial-gradient(circle at 8% 80%, rgba(76,217,100,0.15) 1px, transparent 6px), radial-gradient(circle at 81% 48%, rgba(76,217,100,0.19) 1px, transparent 6px) ; filter: blur(0.8px); animation: swarm-drift-1 42s linear infinite; } .swarmField::after{ /* Softer, larger motes for depth */ background-image: radial-gradient(circle at 85% 69%, rgba(255,255,255,0.07) 2.5px, transparent 14px), radial-gradient(circle at 19% 35%, rgba(255,255,255,0.04) 2.9px, transparent 12px), radial-gradient(circle at 79% 28%, rgba(76,217,100,0.06) 3.0px, transparent 12px), radial-gradient(circle at 64% 34%, rgba(76,217,100,0.11) 2.1px, transparent 13px), radial-gradient(circle at 37% 7%, rgba(255,255,255,0.07) 3.0px, transparent 12px), radial-gradient(circle at 96% 58%, rgba(76,217,100,0.07) 2.0px, transparent 10px), radial-gradient(circle at 90% 21%, rgba(76,217,100,0.11) 2.9px, transparent 11px), radial-gradient(circle at 18% 7%, rgba(76,217,100,0.11) 3.3px, transparent 15px), radial-gradient(circle at 47% 28%, rgba(76,217,100,0.09) 2.6px, transparent 13px), radial-gradient(circle at 54% 81%, rgba(76,217,100,0.11) 2.4px, transparent 11px), radial-gradient(circle at 24% 54%, rgba(255,255,255,0.07) 2.5px, transparent 16px), radial-gradient(circle at 87% 96%, rgba(76,217,100,0.06) 3.3px, transparent 11px), radial-gradient(circle at 6% 62%, rgba(255,255,255,0.07) 2.7px, transparent 12px), radial-gradient(circle at 31% 30%, rgba(255,255,255,0.04) 2.5px, transparent 15px), radial-gradient(circle at 37% 46%, rgba(76,217,100,0.07) 3.6px, transparent 13px), radial-gradient(circle at 5% 16%, rgba(76,217,100,0.06) 2.9px, transparent 16px), radial-gradient(circle at 6% 15%, rgba(76,217,100,0.07) 3.3px, transparent 13px), radial-gradient(circle at 67% 16%, rgba(76,217,100,0.09) 2.4px, transparent 14px); filter: blur(3.2px) saturate(.9); opacity: calc(var(--swarm-particles-opacity) * .75); animation: swarm-drift-2 86s linear infinite; } @keyframes swarm-drift-1{ from{ transform: translate3d(0,0,0) rotate(0deg); opacity: 1; } to { transform: translate3d(8%,-20%,0) rotate(10deg); opacity: .96; } } @keyframes swarm-drift-2{ from{ transform: translate3d(0,0,0) scale(1); opacity: .9; } to { transform: translate3d(-10%,-34%,0) scale(1.03); opacity: .82; } } @media (prefers-reduced-motion: reduce){ .swarmField::before, .swarmField::after{ animation: none; opacity: calc(var(--swarm-particles-opacity) * .6); } } .swarmBubble{ /* Wrapper only: positioned via JS transform translate3d(x,y,0) */ --accent: var(--panelAccent); --accent2: var(--panelAccent2); --accentA: var(--panelAccentA); --accentA2: var(--panelAccentA2); position:absolute; left:0; top:0; cursor:pointer; user-select:none; will-change: transform; touch-action: none; z-index: 1; } /* Improve click accuracy when bubbles overlap: hovered/selected should sit above neighbours */ .swarmBubble:hover{ z-index: 3; } .swarmBubble.isSelected{ z-index: 4; } .bubbleCore{ position: relative; width: var(--bubbleSize, 84px); height: var(--bubbleSize, 84px); border-radius: 999px; background: #000; border: 2px solid var(--accentA2); box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10), 0 0 10px var(--accentA2); display:flex; align-items:center; justify-content:center; overflow:hidden; /* Center the core around the wrapper's (x,y) point */ transform: translate(-50%, -50%); transition: transform .10s ease, filter .10s ease, box-shadow .10s ease, border-color .10s ease; } .bubbleCore img{ width: 100%; height: 100%; object-fit: cover; display: block; } .swarmBubble img{ width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.6)); } /* Hover: subtle glow + tiny grow (like the old build, but restrained) */ .swarmBubble:hover .bubbleCore{ filter: brightness(1.06); border-color: var(--accent); box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 2px rgba(255,255,255,.10), 0 0 14px var(--accentA); transform: translate(-50%, -50%) scale(1.04); } /* Selected: bigger than hover, bold rim, minimal glow */ .swarmBubble.isSelected .bubbleCore{ /* Match the pop-out border weight (single clean rim, minimal glow). */ border-color: transparent; box-shadow: 0 0 0 3px var(--accent), 0 18px 40px rgba(0,0,0,.55); transform: translate(-50%, -50%) scale(1.09); } /* Click feedback: a subtle pulse ring (kept restrained to match the UI) */ .swarmBubble.isSelected .bubbleCore::after{ content:""; position:absolute; inset:-6px; border-radius:999px; border: 3px solid var(--accent); opacity:0; pointer-events:none; animation: bubblePulse 900ms ease-out 1; } @keyframes bubblePulse{ 0%{ transform: scale(0.96); opacity: .35; } 60%{ opacity: .18; } 100%{ transform: scale(1.10); opacity: 0; } } .swarmLabel{ position:absolute; left:50%; top: calc(100% + 6px); transform: translateX(-50%); font-size: clamp(10px, calc(var(--bubbleSize, 84px) * .15), 12px); color: rgba(255,255,255,.80); white-space: nowrap; text-shadow: 0 6px 18px rgba(0,0,0,.6); opacity: 0; transition: opacity .12s ease; pointer-events:none; } .swarmBubble:hover .swarmLabel{ opacity: 1; } /* Docked Bod pop-out */ .bodPanel{ /* Allow the KIT panel to open beneath the card. Internal elements still clip within their own wrappers. */ overflow: visible; --accent: var(--panelAccent); --accent2: var(--panelAccent2); --accentA: var(--panelAccentA); --accentA2: var(--panelAccentA2); margin-top: 0px; padding: 10px; position:relative; container-type: inline-size; /* enables cqw units for responsive media-height math */ opacity:1; border-radius: 18px; background: linear-gradient(180deg, rgba(28,34,44,.86), rgba(18,22,28,.78)); /* Bolder faction accent so the panel reads as linked to the selected bubble */ border: 3px solid var(--accent); box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08); /* Keep the card stable so it never "pops" in size when switching Bods */ height: 680px; display:flex; flex-direction:column; } /* Subtle top accent strip (premium, helps tie selection to panel) */ /* Make the close + nav controls always visible (above the video pane) */ .bodFloatControls{ position:absolute; top:10px; right:10px; display:flex; gap:8px; z-index:12; } .bodFloatControls .iconBtn{ width:30px; height:30px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); color: rgba(255,255,255,.92); cursor:pointer; } .bodFloatControls .iconBtn:hover{ background: rgba(0,0,0,.34); } /* Keeps the panel from visually "jumping" when paging through bods */ .bodPanel.updating{ opacity:0; transition: opacity 120ms ease; } .bodClose{display:none !important;} .miniNav{ position:absolute; width:40px; height:40px; border-radius: 999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); color: rgba(255,255,255,.85); cursor:pointer; display:grid; place-items:center; font-size:18px; line-height:1; opacity:.85; z-index: 20; /* Placement: bottom corners of the whole pop-out card */ bottom: 16px; top: auto; } .miniNav:hover{ opacity:1; } .miniNavLeft{ left:16px; } .miniNavRight{ right:16px; } .bodMedia{ border-radius: 16px; overflow:hidden; background: rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.10); position:relative; aspect-ratio: 1 / 1; z-index: 20; /* keep media above KIT drawer */ } .bodMedia video, .bodMedia img{ width:100%; height:100%; /* Square clips: fill the frame like a game card */ object-fit: cover; display:block; padding: 0; } .bodMedia video{ background: rgba(0,0,0,.20); } .bodInfo{ padding: 12px 14px 132px; display:flex; flex-direction:column; flex:1; min-height:0; } /* Pop-out uses the logo, so hide the repeated faction text */ #bodFaction{ display:none; } .bodBrand{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom: 2px; } /* Role + KIT button */ .bodRoleWrap{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .kitBtn{ cursor:pointer; display:flex; align-items:center; gap:8px; border-radius: 999px; padding: 7px 12px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.22); color: rgba(255,255,255,.92); box-shadow: 0 8px 18px rgba(0,0,0,.22); } .kitBtn:hover{ border-color: var(--accent); box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 0 2px var(--accentA2); } .kitBtn:active{ transform: translateY(1px); } .kitBtn::after{ content:"▸"; margin-left: 2px; opacity: .85; } .kitBtn[data-open="1"]::after{ content:"▾"; } .kitIcon{ font-size: 12px; line-height: 1; } .bodPanel.kitOpen .kitBtn{ border-color: var(--accent); background: linear-gradient(180deg, var(--accentA), rgba(0,0,0,.22)); } .bodPanel.kitOpen .kitBtn{ border-width: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 22px var(--factionAccentA, rgba(255,255,255,.18)); } /* Slide-up KIT drawer — sits ABOVE the bottom stats + arrows so nothing overlaps */ /* Slide-up KIT drawer — Snapshot only (no scrollbars) */ .kitDrawer{ box-sizing: border-box; /* Open the KIT panel *under* the Bod pop-out so long Gameplay lists never run off-screen. */ position: absolute; left: 0; right: 0; top: 100%; margin-top: 12px; padding: 16px 14px 16px; border-radius: 14px; border: 3px solid var(--accent); background: rgba(12,16,24,0.78); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 18px 40px rgba(0,0,0,.42); transform: translateY(12px); opacity: 0; pointer-events: none; transition: transform .18s ease, opacity .18s ease; /* Allow the KIT content to scroll inside a comfortable max height. */ max-height: min(52vh, 520px); overflow-y: auto; overflow-x: hidden; z-index: 30; } .kitClose{ position:absolute; right: 10px; top: 10px; width: 28px; /* smaller */ height: 28px; border-radius: 999px; /* circular */ border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); color: rgba(255,255,255,.92); cursor:pointer; display:grid; place-items:center; box-shadow: 0 10px 22px rgba(0,0,0,.24); z-index: 10; } .kitClose:hover{ border-color: var(--accent); box-shadow: 0 10px 24px rgba(0,0,0,.32), 0 0 0 2px var(--accentA2); } .kitClose:active{ transform: translateY(1px); } .bodPanel.kitOpen .kitDrawer{ transform: translateY(0); opacity: 1; pointer-events: auto; } .kitRows{ display:flex; flex-direction:column; gap: 10px; /* Leave room so the top-right close button never overlaps text */ padding-right: 44px; } .kitSection{ margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.10); font-size: 12px; /* stronger title */ font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.92); text-shadow: 0 1px 0 rgba(0,0,0,.35); position: relative; } .kitSection::after{ content:""; position:absolute; left:0; top:0; width: 64px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--accentA2), transparent); opacity: .9; } .kitSection:first-child{ margin-top: 0; padding-top: 0; border-top: 0; } .kitRow{ display:grid; grid-template-columns: minmax(78px, 92px) 1fr; gap: 12px; align-items:flex-start; } .kitRow.kitRow--solo{ grid-template-columns: 1fr; } .kitKey{ font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); padding-top: 2px; white-space:nowrap; } .kitVal{ font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.90); min-width: 0; word-break: break-word; } /* DNA row (Kit identity) */ .kitDnaRow { align-items: center; } .kitDnaPills { display: flex; flex-wrap: wrap; gap: 8px; } .dnaPill{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .2px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: rgba(255,255,255,.92); } .dnaPill .dnaIcon{ display: inline-flex; } .dnaPill svg{ width: 14px; height: 14px; opacity: .9; } .dnaPill .dnaText{ transform: translateY(-.2px); } /* KIT opens as a panel below the card; keep the description visible */ .bodPanel.kitOpen .bodDesc{ opacity: 1; } .factionMark{ display:flex; align-items:center; gap:10px; min-width:0; } #swarmFactionLogo{ width:auto; height:84px; object-fit:contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); } .bodFactionLogo{ width:auto; height:30px; object-fit:contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); } .factionText{ display:none; } .bodRole{ font-size: 11px; letter-spacing:.14em; text-transform: uppercase; color: rgba(210,235,255,.95); background: rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.10); padding: 6px 10px; border-radius:999px; white-space:nowrap; } .bodName{ margin: 6px 0 6px; font-size: 20px; } .bodDesc{ margin: 0 0 10px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.40; /* No scrollbars — clamp the copy */ overflow: hidden; display: -webkit-box; /* Give more room now that BuddiUp action is anchored lower */ -webkit-line-clamp: 6; -webkit-box-orient: vertical; /* Always show at least ~2 lines worth of height */ min-height: calc(1.40em * 2); position: relative; z-index: 5; } .pipStats{ /* Center the stats between the bottom nav buttons, giving the description max space */ position:absolute; left: 84px; /* leave room for left arrow */ right: 84px; /* leave room for right arrow */ bottom: 16px; display:flex; flex-direction:column; gap:4px; /* tighter vertical spacing */ z-index: 30; /* keep tooltips above KIT drawer */ overflow: visible; } .pipRow{ width: 100%; max-width: 360px; /* keeps the pips compact + centered */ margin: 0 auto; display:grid; grid-template-columns: 52px 1fr; align-items:center; gap:10px; } .pipLabel{ display:flex; align-items:center; gap:6px; font-size: 10px; letter-spacing:.14em; text-transform: uppercase; color: rgba(255,255,255,.70); } /* Hover tooltip for MIND / BODY / SOUL — styled like the Homezone population bar */ .pipLabel[data-tip]{ position: relative; cursor: help; /* default accent (overridden per label) */ --tipAccent: rgba(255,255,255,.18); } /* Accent per pillar */ .pipLabel--mind{ --tipAccent: rgba(83,179,255,.28); } .pipLabel--body{ --tipAccent: rgba(255,170,70,.28); } .pipLabel--soul{ --tipAccent: rgba(255,79,209,.26); } /* Disable the old pseudo-element tooltip (we now use the floating .pipTip) */ .pipLabel[data-tip]::after, .pipLabel[data-tip]::before{ display:none !important; } /* Floating stat tooltip — wide glass bubble + arrow that points at the hovered stat */ .pipTip{ position: absolute; left: 12px; top: 0; width: min(360px, calc(100% - 24px)); z-index: 60; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .12s ease, transform .12s ease; --tipAccent: rgba(255,255,255,.18); --arrowX: 50%; } .pipTip.show{ opacity: 1; transform: translateY(0); } .pipTipInner{ position: relative; white-space: normal; font-size: 12px; letter-spacing: .02em; text-transform: none; line-height: 1.25; padding: 10px 12px 10px 18px; border-radius: 14px; color: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 16px 36px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.06), 0 0 22px var(--tipAccent); overflow: visible; } .pipTipInner::before{ content:""; position:absolute; left: 10px; top: 10px; bottom: 10px; width: 3px; border-radius: 8px; background: var(--tipAccent); opacity: .95; } .pipTipInner::after{ content:""; position:absolute; inset: 1px; border-radius: 13px; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.14), transparent 55%); opacity: .35; pointer-events:none; } /* Two-column tooltip layout (stat + icon on the left, explanation on the right) */ .pipTipContent{ position: relative; z-index: 2; display: flex; align-items: stretch; gap: 10px; } .pipTipCol{ display:flex; } .pipTipCol--left{ flex: 0 0 92px; align-items: center; justify-content: center; } .pipTipStat{ display:flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: rgba(255,255,255,.92); } .pipTipIcon{ font-size: 16px; line-height: 1; filter: drop-shadow(0 2px 8px rgba(0,0,0,.55)); } .pipTipName{ font-size: 11px; } .pipTipCol--right{ flex: 1 1 auto; align-items: center; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.12); } .pipTipText{ font-size: 12px; line-height: 1.25; color: rgba(255,255,255,.92); } \.pipTipArrow{ position: absolute; left: var(--arrowX); bottom:-12px; width: 18px; height: 10px; background: rgba(0,0,0,.55); clip-path: polygon(50% 100%, 0 0, 100% 0); border: 1px solid rgba(255,255,255,.18); border-top: none; border-left: none; border-right: none; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .pips{ display:flex; gap:4px; } .pip{ flex:1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.08); overflow:hidden; } .pip.on{ background: linear-gradient(90deg, rgba(120,200,255,.85), rgba(255,170,70,.9)); border-color: rgba(255,255,255,.18); } /* When inside the docked panel, use the selected faction accent for stat fills */ .bodPanel .pip.on{ background: linear-gradient(90deg, var(--accent, #FFAA46), var(--accent2, #FFD37A)); } /* Pop-out wrapper padding tweak (base .card padding is a bit chunky for 1:1 MP4) */ .bodDock{ padding: 8px; } .versionTag{ position:fixed; left:12px; bottom:10px; color: rgba(255,255,255,.35); font-size:11px; } @media (max-width: 1200px){ .planetWrap{ position:absolute; right: 34px; bottom: 26px; left: auto; transform: none; width: 320px; height: 320px; pointer-events:auto; z-index: 0; opacity: .92; } .panelWrap{width: clamp(300px, 24vw, 352px); right: 18px;} .swarm{right: calc(clamp(300px, 24vw, 352px) + 28px);} } @media (max-width: 920px){ .panelWrap{position:relative; top:auto; right:auto; width: min(520px, 92vw); margin: 0 auto;} .swarm{position:relative; top:auto; left:auto; right:auto; bottom:auto; width:min(760px, 92vw); height: 420px; margin: 14px auto 0;} .planetWrap{ position:absolute; right: 34px; bottom: 26px; left: auto; transform: none; width: 340px; height: 340px; pointer-events:auto; z-index: 0; opacity: .92; } .stage{height:auto; min-height: calc(100vh - 64px); padding-bottom: 28px;} } /* If the discovered text is empty, don't reserve space */ .swarmMeta:empty{ display:none; } /* Fix14: Swap right-column order so Bod panel sits above HomeZones */ #bodPanel{ order: 1; } #zonePanel{ order: 2; min-height: 214px; display:flex; flex-direction:column; /* Tighten vertical whitespace inside the panel */ padding-top: 12px; padding-bottom: 8px; } /* HomeZones panel polish */ #zonePanel .kicker{ display:flex; align-items:center; justify-content:space-between; gap: 10px; /* Nudge header up slightly to free room below */ margin-top: -6px; } #zonePanel .kicker::after{ content:"BODSPHERE"; font-size:10px; letter-spacing:.22em; opacity:.55; } /* If the HomeZone subheader is empty, don't reserve space */ .hzSub:empty{ display:none; } #zonePanel h2{ font-size: 20px; margin-top: 6px; } #zonePanel .desc{ line-height: 1.35; } #zonePanel .actions{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } #zonePanel .actions .btn{ justify-content:center; padding: 12px 10px; } #zonePanel #viewBodsBtn{ grid-column: 1 / -1; } #zonePanel .stack{ margin-top: 10px; } #zonePanel .chip{ border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.20); } .pipIcon{ font-size: 12px; line-height: 1; opacity: .9; } /* === POPFIX10: Rarity/Class/KIT row alignment === */ /* Hide the old faction text row element in header area (logo now overlays media) */ .bodBrand .factionMark{ display:none; } /* Make the role wrap span the full width of the info area */ .bodBrand{ display:block !important; } .bodRoleWrap{ width: 100% !important; display:grid !important; grid-template-columns: auto 1fr auto; align-items:center; gap: 12px; padding: 0 18px; /* aligns with name/desc left edge */ box-sizing: border-box; } /* Rarity left, Class center, KIT right */ .bodRarity{ justify-self:start; } .bodRole{ justify-self:center; text-align:center; margin:0 !important; } #kitBtn, .kitBtn{ justify-self:end; } .bodRarity{ white-space:nowrap; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.18); color: rgba(255,255,255,.9); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 8px 18px rgba(0,0,0,.18); } /* Faction logo overlay on media: readable, still never clips */ .bodMedia{ position:relative; overflow:hidden; } #bodFactionLogo{ position:absolute; top: 12px; left: 12px; height: clamp(22px, 4vw, 36px) !important; width:auto !important; max-width: 26% !important; max-height: 36px !important; object-fit: contain; pointer-events:none; z-index: 6; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); } /* Nav arrows hover/focus glow to match KIT close vibe */ .miniNav:hover, .miniNav:focus-visible{ opacity: 1; border-color: var(--accent); box-shadow: 0 10px 24px rgba(0,0,0,.32), 0 0 0 2px var(--accentA2); outline: none; } /* === POPFIX11: restore faction logo overlay + push pills to video-frame edges === */ /* Hide the old in-header faction block (we use overlay on media now) */ .factionMark{ display:none !important; } /* Make the top pills row span full available width (aligned to panel/media inset) */ .bodBrand{ display:block !important; } .bodRoleWrap{ display:grid !important; grid-template-columns: auto 1fr auto; align-items:center; gap: 12px; width: 100%; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; } .bodRarity{ justify-self:start; } .bodRole{ justify-self:center; margin:0 !important; text-align:center; white-space:nowrap; } .kitBtn{ justify-self:end; } /* Overlay logo in top-left of media (bigger than before but capped; never clips) */ .bodMedia{ position:relative; overflow:hidden; } #bodFactionLogoOverlay{ position:absolute; top: 12px; left: 12px; height: clamp(22px, 4.2vw, 34px); width: auto; max-width: 26%; max-height: 34px; object-fit: contain; pointer-events:none; z-index: 7; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); } /* Ensure the original logo (if still used elsewhere) doesn't take space */ #bodFactionLogo{ display:none !important; } /* === POPFIX12: Rarity Colour Coding === */ .bodRarity[data-rarity="COMMON"]{ color:#9aa3ad; border-color:rgba(154,163,173,.35); } .bodRarity[data-rarity="UNCOMMON"]{ color:#4cd964; border-color:rgba(76,217,100,.45); } .bodRarity[data-rarity="RARE"]{ color:#4da3ff; border-color:rgba(77,163,255,.45); } .bodRarity[data-rarity="EPIC"]{ color:#b67cff; border-color:rgba(182,124,255,.45); } .bodRarity[data-rarity="LEGENDARY"]{ color:#ffcc33; border-color:rgba(255,204,51,.55); } /* === POPFIX13: subtle rarity pill glow/tint === */ .bodRarity{ /* base: keep it subtle */ box-shadow: 0 8px 18px rgba(0,0,0,.22); } .bodRarity[data-rarity="COMMON"]{ background: rgba(154,163,173,.10); box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(154,163,173,.12), 0 0 14px rgba(154,163,173,.10); } .bodRarity[data-rarity="UNCOMMON"]{ background: rgba(76,217,100,.10); box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(76,217,100,.14), 0 0 18px rgba(76,217,100,.12); } .bodRarity[data-rarity="RARE"]{ background: rgba(77,163,255,.10); box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(77,163,255,.14), 0 0 18px rgba(77,163,255,.12); } .bodRarity[data-rarity="EPIC"]{ background: rgba(182,124,255,.10); box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(182,124,255,.14), 0 0 20px rgba(182,124,255,.12); } .bodRarity[data-rarity="LEGENDARY"]{ background: rgba(255,204,51,.10); box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(255,204,51,.16), 0 0 22px rgba(255,204,51,.14); } /* === POPFIX16: Discovered Bods bubble (top-right of swarm pane) === */ .discoveredBubble{ position:absolute; top: 12px; right: 12px; display:flex; align-items:center; gap: 10px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); backdrop-filter: blur(6px); box-shadow: 0 10px 24px rgba(0,0,0,.28); z-index: 20; pointer-events: none; /* doesn't block upcoming top-bar buttons */ } .discoveredBubble .discoveredLabel{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82); white-space: nowrap; } .discoveredBubble .discoveredCount{ min-width: 2.2em; text-align: center; font-weight: 700; font-size: 12px; color: rgba(255,255,255,.92); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); } /* Ensure swarm pane container can anchor absolutely-positioned bubble */ .swarmPane, #swarmPane, .swarmWindow, #swarmWindow{ position: relative; } /* === POPFIX20: combine 'KNOWN BODS' + '69 discovered' into one bubble on top-right of swarm pane header === */ .swarmKicker{ display:none !important; } /* hides KNOWN BODS */ #swarmMeta{ display:none !important; } /* hides old "69 discovered" text */ /* bubble layout */ .swarmDiscoveredBubble{ display:flex; align-items:center; gap: 10px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); backdrop-filter: blur(6px); box-shadow: 0 10px 24px rgba(0,0,0,.28); user-select:none; } .swarmDiscoveredLabel{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82); white-space: nowrap; } .swarmDiscoveredCount{ min-width: 2.2em; text-align:center; font-weight: 800; font-size: 12px; color: rgba(255,255,255,.92); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); } /* === POPFIX21: position discovered bubble far-right + move faction corner badge down === */ /* Ensure swarm header row behaves like a proper left/right bar */ .swarmHeaderRow{ display:flex !important; align-items:center; justify-content: space-between; gap: 12px; width: 100%; } /* Keep left kicker hidden, and force right side to hug the far right */ .swarmRight{ margin-left: auto !important; display:flex !important; align-items:center; justify-content:flex-end !important; gap: 10px; width: 100%; } .swarmDiscoveredBubble{ margin-left: auto !important; /* pushes it to the far right */ } /* The faction badge/logo in the swarm window: move down below the header */ .swarmBadgeCorner{ top: 56px !important; /* moved down */ left: 14px !important; } /* === POPFIX22: move discovered bubble into swarm pane + stable 2-digit counter === */ /* Move bubble down into the swarm pane (below header strip) */ .swarmDiscoveredBubble{ position:absolute !important; top: 56px !important; /* inside swarm pane, under header line */ right: 14px !important; z-index: 60; } /* Ensure the count pill doesn't "jump" between 1 and 2 digits */ .swarmDiscoveredCount{ min-width: 3ch !important; /* enough for 2 digits */ font-variant-numeric: tabular-nums; } /* === POPFIX23: Top-bar faction buttons (visual only) === */ .swarmKicker{ display:block !important; } /* re-enable (was hidden in earlier fixes) */ .swarmHeaderRow{ align-items:center; } /* faction bar */ .factionBar{ display:flex; align-items:center; gap: 10px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .factionBar::-webkit-scrollbar{ display:none; } .factionBtn{ display:inline-flex; align-items:center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); box-shadow: 0 10px 24px rgba(0,0,0,.20); cursor: pointer; user-select:none; white-space: nowrap; line-height: 1; } .factionBtn .factionText{ font-weight: 900; letter-spacing: .04em; font-size: 14px; text-transform: uppercase; } .factionBtn .factionMark{ font-size: 14px; opacity: .9; } .factionBtn:hover, .factionBtn:focus-visible{ outline: none; border-color: rgba(255,255,255,.22); box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 2px rgba(255,255,255,.10); } /* faction colors (text + subtle glow) */ .faction--MAGI{ color:#b67cff; } .faction--MEXX{ color:#cfd6df; } .faction--HOLOWZ{ color:#a6e3ff; } .faction--MEZMAZ{ color:#d09bff; } .faction--HEXX{ color:var(--fc-HEXX, #ff3d66); } .faction--SEPTIX{ color:var(--fc-SEPTIX, #d0f53b); } .faction--TYTANZ{ color:#ff8a2a; } .faction--JURASIX{ color:#ffb84d; } .faction--WYLDZ{ color:var(--fc-WYLDZ, #0d7a28); } .faction--BROOTZ{ color:#ff7a3a; } .faction--BUGZ{ color:#8bdcff; } .faction--REEVERZ{ color:#ff4a4a; } .factionBtn.faction--MAGI:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(182,124,255,.18); } .factionBtn.faction--TYTANZ:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(255,138,42,.18); } .factionBtn.faction--SEPTIX:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(118,255,99,.18); } .factionBtn.faction--REEVERZ:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(255,74,74,.18); } /* === POPFIX24: Faction buttons visuals (logos, hover outline, locked underline) === */ .factionBar{display:flex;gap:10px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:10px 12px;} .factionBar::-webkit-scrollbar{display:none;} .factionBtn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);color:rgba(255,255,255,.86);backdrop-filter: blur(6px);box-shadow: 0 8px 18px rgba(0,0,0,.18);cursor:pointer;white-space:nowrap;} .factionBtn .factionText{font-weight:700;letter-spacing:.02em;font-size:13px;} .factionBtn .factionLogo{width:22px;height:22px;flex:0 0 22px;background-size:contain;background-repeat:no-repeat;background-position:center;filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));opacity:.95;} .factionBtn::after{content:'';position:absolute;left:14px;right:14px;bottom:-6px;height:3px;border-radius:999px;background:transparent;opacity:0;transform:translateY(2px);transition:opacity .15s ease, transform .15s ease;} .factionBtn:hover{border-color: var(--factionColor);box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 2px color-mix(in srgb, var(--factionColor) 55%, transparent);} .factionBtn.is-active{border-color: var(--factionColor);box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 2px color-mix(in srgb, var(--factionColor) 65%, transparent);} .factionBtn.is-active::after{background: var(--factionColor);opacity:1;transform:translateY(0);} .faction--MAGI{--factionColor:#b67cff;} .faction--MAGI .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%204l6%2018h18l-15%2011%206%2018-15-11-15%2011%206-18L8%2022h18z%22/%3E%3C/svg%3E');} .faction--MEXX{--factionColor:#7fd0ff;} .faction--MEXX .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M36%206l2%208a18%2018%200%200%201%208%204l8-2%204%208-6%206a18%2018%200%200%201%200%208l6%206-4%208-8-2a18%2018%200%200%201-8%204l-2%208h-8l-2-8a18%2018%200%200%201-8-4l-8%202-4-8%206-6a18%2018%200%200%201%200-8l-6-6%204-8%208%202a18%2018%200%200%201%208-4l2-8zM32%2024a8%208%200%201%200%200%2016%208%208%200%200%200%200-16z%22/%3E%3C/svg%3E');} .faction--HOLOWZ{--factionColor:#9bd2ff;} .faction--HOLOWZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%206c12%200%2022%2010%2022%2022%200%2012-10%2022-22%2030C20%2050%2010%2040%2010%2028%2010%2016%2020%206%2032%206zm-8%2024a4%204%200%201%200%200%208%204%204%200%200%200%200-8zm16%200a4%204%200%201%200%200%208%204%204%200%200%200%200-8z%22/%3E%3C/svg%3E');} .faction--MEZMAZ{--factionColor:#d28bff;} .faction--HEXX{--factionColor:var(--fc-HEXX, #ff3d66);} .faction--MEZMAZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%206c8%200%2014%206%2014%2014%200%206-4%2010-8%2013%208%201%2014%208%2014%2016%200%2010-8%2018-20%2018S12%2059%2012%2049c0-8%206-15%2014-16-4-3-8-7-8-13%200-8%206-14%2014-14zm0%2010a4%204%200%201%200%200%208%204%204%200%200%200%200-8z%22/%3E%3C/svg%3E');} .faction--SEPTIX{--factionColor:var(--fc-SEPTIX, #d0f53b);} .faction--SEPTIX .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%206c14%200%2026%2012%2026%2026S46%2058%2032%2058%206%2046%206%2032%2018%206%2032%206zm0%2010a6%206%200%201%200%200%2012%206%206%200%200%200%200-12zm16%2012a5%205%200%201%200%200%2010%205%205%200%200%200%200-10zM16%2028a5%205%200%201%200%200%2010%205%205%200%200%200%200-10zm8%2018a4%204%200%201%200%200%208%204%204%200%200%200%200-8zm16%200a4%204%200%201%200%200%208%204%204%200%200%200%200-8z%22/%3E%3C/svg%3E');} .faction--TYTANZ{--factionColor:#ff9d3a;} .faction--TYTANZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%206l20%2014-8%2026H20L12%2020%2032%206zm0%2010l-10%207%204%2013h12l4-13-10-7z%22/%3E%3C/svg%3E');} .faction--JURASIX{--factionColor:#ff7a3a;} .faction--JURASIX .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M14%2044c6-18%2022-32%2036-30%200%2010-6%2018-16%2022l6%2010-10-2-6%2010-4-10-6%202z%22/%3E%3C/svg%3E');} .faction--WYLDZ{--factionColor:var(--fc-WYLDZ, #0d7a28);} .faction--WYLDZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M18%2054c10-8%2010-18%2014-30%204%2012%204%2022%2014%2030-12%202-16%202-28%200zm14-44c4%206%204%2010%200%2016-4-6-4-10%200-16z%22/%3E%3C/svg%3E');} .faction--BROOTZ{--factionColor:#ff7a2e;} .faction--BROOTZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M10%2038l10-12%208%206%208-18%2010%2010-10%2010%208%206-12%2014-10-8-10%208z%22/%3E%3C/svg%3E');} .faction--BUGZ{--factionColor:#62b6ff;} .faction--BUGZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%2010c8%200%2014%206%2014%2014v6h6v6h-6v6c0%2010-8%2018-14%2018s-14-8-14-18v-6h-6v-6h6v-6c0-8%206-14%2014-14zm0%208a6%206%200%200%200-6%206v2h12v-2a6%206%200%200%200-6-6z%22/%3E%3C/svg%3E');} .faction--REEVERZ{--factionColor:#ff3a3a;} .faction--REEVERZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%206l10%2010-6%206%2010%2010-6%206%2010%2010-8%208-10-10-6%206-10-10%206-6-10-10%206-6-10-10%208-8%2010%2010%206-6z%22/%3E%3C/svg%3E');} /* move discovered bod counter down slightly */ .swarmDiscoveredBubble{top:72px !important;} /* === POPFIX25: move swarm corner elements down + improve faction button hitbox + outline === */ /* Move faction badge (logo) down into swarm window */ .swarmBadgeCorner{ top: 82px !important; } /* Move discovered bubble down into swarm window */ .swarmDiscoveredBubble{ top: 86px !important; right: 14px !important; } /* Make faction buttons fully clickable (children won't steal pointer events) */ .factionBtn{ cursor:pointer; } .factionBtn *{ pointer-events:none; } /* Crisper single outline on hover/active (avoid double-line feel) */ .factionBtn{ border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 18px rgba(0,0,0,.18); } .factionBtn:hover, .factionBtn.is-active{ border-color: rgba(255,255,255,.18); box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 2px var(--factionColor); } /* === POPFIX26: make faction buttons easy to hit (z-index) + better underline + align discovered bubble === */ /* Bring the whole header controls above any overlays */ .swarmHeaderRow, .swarmRight, .factionBar{ position: relative; z-index: 120; pointer-events: auto; } /* Ensure the button row itself receives clicks */ .factionBar{ pointer-events:auto; } /* Make buttons slightly taller + larger click area */ .factionBtn{ padding: 12px 16px; } /* Make sure nothing blocks button clicks */ .factionBtn, .factionBtn *{ pointer-events: auto; } .factionBtn .factionLogo, .factionBtn .factionText{ pointer-events:none; } /* keep inner visual elements non-interactive */ /* Underline: thicker + a bit lower so it doesn't kiss the border */ .factionBtn::after{ bottom: -10px; height: 4px; left: 12px; right: 12px; } /* Align discovered bubble vertically with faction badge */ .swarmBadgeCorner{ top: 88px !important; } .swarmDiscoveredBubble{ top: 88px !important; } /* === POPFIX27: move faction badge + discovered counter below Buttons Bar === */ .swarmBadgeCorner{ top: 118px !important; } .swarmDiscoveredBubble{ top: 118px !important; } /* === POPFIX28: Stable faction button hover/active + reliable hit targets + aligned pane badges === */ /* Keep the buttons bar on top of any overlays so hover/click is never "random" */ #factionBar, .factionBar, .swarmHeaderRow{ position: relative; z-index: 300; pointer-events: auto; } /* Make each pill fully clickable; prevent inner spans from stealing events */ .factionBtn{ pointer-events: auto; } .factionBtn *{ pointer-events: none; } /* Hover vs Active: hover is temporary, active is locked. Hover never removes active. */ .factionBtn{ border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 18px rgba(0,0,0,.18); transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; } .factionBtn:hover{ border-color: rgba(255,255,255,.22); box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 2px var(--factionColor); } .factionBtn.is-active{ border-color: rgba(255,255,255,.26); box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 3px var(--factionColor); } .factionBtn.is-active:hover{ /* stays active, but still allows the hovered button to show its hover outline */ border-color: rgba(255,255,255,.26); } /* Underline: a touch thicker + lower, so it reads like the reference */ .factionBtn::after{ content:''; position:absolute; left: 12px; right: 12px; bottom: -12px; height: 4px; border-radius: 999px; background: transparent; opacity: 0; transform: translateY(2px); transition: opacity .15s ease, transform .15s ease; } .factionBtn.is-active::after{ background: var(--factionColor); opacity: 1; transform: translateY(0); } /* Pane badges: align Faction Logo (left) and Discovered bubble (right) under the Buttons Bar */ .swarmBadgeCorner{ top: 102px !important; left: 14px !important; z-index: 200; } .swarmDiscoveredBubble{ top: 102px !important; right: 14px !important; z-index: 200; } /* === POPFIX29: Fix random hover/selection by forcing hover target = button (children non-interactive), crisp single outline, better underline, and adjust pane badge positions === */ /* Ensure the buttons bar is always on top and receives pointer events */ .factionBar{ position: relative; z-index: 500; pointer-events: auto; } /* Make the whole button the hover/click target (prevents "random" hover on inner spans) */ .factionBar .factionBtn{ pointer-events: auto !important; } .factionBar .factionBtn *{ pointer-events: none !important; } /* Crisp outline: remove border contribution on hover/active (prevents double-line feel) */ .factionBar .factionBtn{ border: 1px solid rgba(255,255,255,.14); } .factionBar .factionBtn:hover, .factionBar .factionBtn.is-active{ border-color: transparent !important; box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 2.5px var(--factionColor) !important; } /* Underline: slightly longer, thicker, and further below the pill */ .factionBar .factionBtn::after{ left: 10px !important; right: 10px !important; height: 5px !important; bottom: -12px !important; } /* Position badges: move up a touch to match your Positions.png */ .swarmBadgeCorner{ top: 90px !important; } .swarmDiscoveredBubble{ top: 90px !important; } /* === POPFIX30: Nudge Discovered Bods bubble slightly higher into top-right corner === */ .swarmDiscoveredBubble{ top: 74px !important; /* moved up for tighter corner alignment */ } /* === POPFIX31: Discovered Bods bubble up 6px more === */ .swarmDiscoveredBubble{ top: 68px !important; } /* === POPFIX32: Discovered Bods bubble up 4px more === */ .swarmDiscoveredBubble{ top: 64px !important; } /* === POPFIX33: Discovered count turns faction-colour when a faction is selected === */ .swarmDiscoveredBubble{ --discAccent: rgba(255,255,255,.92); } .swarmDiscoveredCount{ color: var(--discAccent) !important; border-color: color-mix(in srgb, var(--discAccent) 35%, rgba(255,255,255,.10)) !important; } /* === POPFIX34: Use PNG faction symbols in buttons === */ .factionBtn{ display:flex; align-items:center; justify-content:center; } .factionSymbol{ width:26px; height:26px; object-fit:contain; pointer-events:none; } /* === POPFIX35: Scale faction symbols up for better visual balance === */ .factionSymbol{ width:34px !important; height:34px !important; } /* === POPFIX36: Scale symbol visually without affecting button layout === */ /* Lock button size explicitly so layout never shifts */ .factionBtn{ width:48px !important; height:48px !important; min-width:48px !important; min-height:48px !important; padding:0 !important; } /* Scale symbol inside using transform instead of changing box size */ .factionSymbol{ width:26px !important; height:26px !important; transform: scale(1.35); transform-origin:center; } /* HomeZone population distribution bar */ #zonePanel .hzDistWrap{ margin-top: 14px; position: relative; } #zonePanel .hzDistLabel{ font-size:10px; letter-spacing:.22em; opacity:.55; margin: 0 0 8px; } #zonePanel .hzDist{ width: 100%; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); padding: 4px; } #zonePanel .hzDistBar{ height: 14px; border-radius: 999px; overflow: hidden; display: flex; box-shadow: inset 0 0 0 1px rgba(0,0,0,.20); } #zonePanel .hzSeg{ height: 100%; min-width: 10px; /* keep tiny populations visible */ } #zonePanel .hzSeg + .hzSeg{ box-shadow: -1px 0 0 rgba(0,0,0,.22); } /* --- HomeZone Meta (Status + Resources) --- */ #zonePanel .hzMeta{ /* bring Resources/Meta closer to the content above */ margin-top: 6px; display:flex; flex-direction:column; gap: 8px; } #zonePanel .hzResLabel{ font-size:10px; letter-spacing:.22em; opacity:.55; margin-top: 2px; } #zonePanel .hzChips{ display:flex; flex-wrap:wrap; gap: 8px; } #zonePanel .hzPill{ font-size: 11px; line-height: 1; letter-spacing: .02em; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } #zonePanel .hzPill.is-warn{ border-color: rgba(255,130,80,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 14px rgba(255,120,80,.10); } #zonePanel .hzPill.is-danger{ border-color: rgba(255,70,90,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 16px rgba(255,70,90,.12); } #zonePanel .hzPill.is-good{ border-color: rgba(120,255,170,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 14px rgba(120,255,170,.10); } /* Keep the population bar anchored at the bottom of the HomeZones panel */ #zonePanel #zoneDistWrap{ margin-top: auto; } /* --- Title block stacked layout (chips under name) --- */ #zonePanel .hzTitleBlock{ display:flex; flex-direction:column; gap: 6px; } #zonePanel .hzTitleBlock h2{ margin: 0; } #zonePanel .hzTitleChips{ display:flex; flex-wrap:wrap; gap:8px; } #zonePanel .hzTitleChips:empty{ display:none; } /* --- HomeZone header: name in top-left --- */ #zonePanel .kLeft{ display:flex; flex-direction:column; gap:4px; } #zonePanel .kLabel{ font-size:10px; letter-spacing:.22em; opacity:.55; } #zonePanel .kName{ font-size:20px; font-weight:700; } /* Status row (now below description) */ #zonePanel .hzStatusRow{ margin-top: 10px; } /* Resources label + chips inline */ #zonePanel .hzResRow{ display:flex; flex-direction:column; align-items:flex-start; gap: 6px; } #zonePanel .hzResRow .hzResLabel{ margin:0; white-space:nowrap; } #zonePanel .hzResRow #zoneResRow{ justify-content:flex-start; flex-wrap:nowrap; gap: 8px; overflow:hidden; } /* Planet footer label in unused space */ /* HomeZones badge in the undiscovered hemisphere */ #planetFooterLabel{ position:absolute; left:50%; bottom: 44px; /* sits inside the bottom hemisphere */ padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: .20em; text-transform: uppercase; color: rgba(255,255,255,.78); background: rgba(20,24,34,.42); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 28px rgba(0,0,0,.45); backdrop-filter: blur(10px); pointer-events:none; } #planetPanel{ position: relative; } /* --- Compact HomeZone header --- */ #zonePanel .kLabel{ display:none; } /* frees space; title carries meaning */ #zonePanel .kName{ font-size: 20px; font-weight: 800; letter-spacing: .02em; text-transform:none; } #zonePanel .kicker{ padding-bottom: 2px; } /* Status row under description */ #zonePanel .hzStatusRow{ margin-top: 10px; } /* Planet badge centered in undiscovered area */ #planetBadge{ position:absolute; left:50%; transform:translateX(-50%); bottom: 70px; /* sits inside lower hemisphere (slightly lower) */ padding: 10px 18px; border-radius: 999px; background: rgba(10,14,20,0.45); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 18px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 20px; font-weight: 600; letter-spacing: .04em; opacity: .38; pointer-events:none; text-transform:none; } /* Chip icons */ #zonePanel .hzPill .hzIcon{ display:inline-block; margin-right:6px; opacity:.85; transform: translateY(0.5px); } #zonePanel .hzStatusRow .hzPill{ padding: 6px 10px; font-size: 10.5px; } /* HomeZone title accent (matches selected holo hex) */ :root{ --hz-accent: #9aa3b2; } #zonePanel #zoneTitle{ color: var(--hz-accent); text-shadow: 0 8px 22px rgba(0,0,0,0.55); } .planetBadge{ position:absolute; left:50%; transform:translateX(-50%); bottom: 38px; /* sits inside the bottom hemisphere */ padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,0.62); background: rgba(18,22,32,.46); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.48), 0 0 28px rgba(120,110,255,.10); backdrop-filter: blur(10px); pointer-events:none; z-index: 6; } .spanseBadge{ position:absolute; left:50%; top: 56%; transform:translate(-50%,-50%) skewX(-10deg); padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .20em; text-transform: uppercase; color: rgba(255,210,215,.86); background: rgba(40,10,14,.35); border: 1px solid rgba(255,90,110,.22); box-shadow: 0 0 18px rgba(255,60,90,.16), 0 0 42px rgba(255,40,70,.10), inset 0 1px 0 rgba(255,255,255,.05); text-shadow: 0 0 10px rgba(255,60,90,.25); pointer-events:none; z-index: 6; opacity: .95; } /* THE SPANSE label stays, but remove the red scar line through it. Preserve the existing planet atmosphere ring (defined earlier). */ .planetWrap::after{ content:""; position:absolute; inset:-2px; border-radius: 999px; box-shadow: 0 0 26px rgba(120,180,255,.20), 0 0 60px rgba(140,90,255,.12), inset 0 0 80px rgba(0,0,0,.58); z-index:2; pointer-events:none; } /* Resource pills (slightly smaller + icon) */ #zonePanel #zoneResRow .hzPill{ padding: 6px 10px; font-size: 10.5px; } #zonePanel #zoneResRow .hzPill .hzIcon{ opacity: .9; } /* --- Zone panel rhythm --- */ #zonePanel .kName{ margin-top: 2px; margin-bottom: 6px; } #zonePanel .desc{ margin-top: 0; margin-bottom: 8px; } #zonePanel .hzStatusRow{ margin-top: 0; margin-bottom: 8px; } #zonePanel .hzMeta{ margin-top: 0; gap: 8px; } #zonePanel .hzResRow{ margin-top: 0; } #zonePanel .hzDistWrap{ margin-top: auto; padding-top: 8px; } /* Kit drawer outline: faction colour (not rarity) */ .kitDrawer{ border: 3px solid var(--accent); } /* Faction button theme via BB_FACTIONS */ /* Any element with [data-faction="SEPTIX"] can use the same color tokens */ [data-faction]{ --factionColor: var(--fc-MAGI, #b36bff); } [data-faction="SEPTIX"]{ --factionColor: var(--fc-SEPTIX, #d0f53b); } [data-faction="WYLDZ"]{ --factionColor: var(--fc-WYLDZ, #0d7a28); } [data-faction="HOLOWZ"]{ --factionColor: var(--fc-HOLOWZ, #24e0e7); } [data-faction="MEZMAZ"]{ --factionColor: var(--fc-MEZMAZ, #ff4fd1); } [data-faction="MEXX"]{ --factionColor: var(--fc-MEXX, #53b3ff); } [data-faction="TYTANZ"]{ --factionColor: var(--fc-TYTANZ, #ff8a2a); } [data-faction="JURASIX"]{--factionColor: var(--fc-JURASIX,#ffb84d); } [data-faction="BROOTZ"]{ --factionColor: var(--fc-BROOTZ, #ff7a3a); } [data-faction="BUGZ"]{ --factionColor: var(--fc-BUGZ, #8bdcff); } [data-faction="REEVERZ"]{--factionColor: var(--fc-REEVERZ,#ff4a4a); } /* === RESTORE PIP LABEL TOOLTIPS (CSS-only fallback) === If JS-driven .pipTip tooltips fail or are blocked, this restores hover tooltips for MIND / BODY / SOUL labels using the existing data-tip attribute. */ .pipLabel[data-tip]{ position: relative; cursor: help; } .pipLabel[data-tip]::after{ content: attr(data-tip); position: absolute; left: 50%; bottom: 165%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; line-height: 1.15; padding: 8px 10px; border-radius: 10px; background: rgba(12, 14, 18, .92); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 24px rgba(0,0,0,.35); opacity: 0; pointer-events: none; z-index: 500; transition: opacity .12s ease, transform .12s ease; } .pipLabel[data-tip]::before{ content: ""; position: absolute; left: 50%; bottom: 150%; transform: translateX(-50%); width: 10px; height: 10px; background: rgba(12, 14, 18, .92); border-left: 1px solid rgba(255,255,255,.14); border-top: 1px solid rgba(255,255,255,.14); rotate: 225deg; opacity: 0; pointer-events: none; z-index: 499; transition: opacity .12s ease, transform .12s ease; } /* Override any previous "display:none !important" rules */ .pipLabel[data-tip]:hover::after, .pipLabel[data-tip]:hover::before, .pipLabel[data-tip]:focus-visible::after, .pipLabel[data-tip]:focus-visible::before{ display: block !important; opacity: 1; transform: translateX(-50%) translateY(-2px); } /* ========================================================= Swarm click accuracy guard Ensures no decorative layers intercept pointer events. ========================================================= */ .swarm::before, .swarm::after, .swarmField::before, .swarmField::after{ pointer-events: none !important; } .swarm, .swarmField, .swarmBubble{ pointer-events: auto; } /* ========================================================= Swarm click feel regression guard Disable heavy decorative particle pseudo-layers that can introduce frame lag and make clicks feel "off". (CSS-only; restores old build responsiveness.) ========================================================= */ .swarmField{ overflow: visible !important; isolation: auto !important; } .swarmField::before, .swarmField::after{ content: none !important; animation: none !important; filter: none !important; } /* ========================================================= LIGHTWEIGHT SWARM PARTICLES (SAFE FOR HIT TEST) --------------------------------------------------------- IMPORTANT: Do NOT change .swarmField positioning. We only restyle the pseudo layers. No blur filters, no blend-modes, no heavy animations. Pointer-events disabled. Keeps swarm click responsiveness. ========================================================= */ /* Ensure swarm layout stays as designed (some older overrides used !important). */ .swarmField{ position: absolute !important; left: 0 !important; right: 0 !important; top: 44px !important; bottom: 0 !important; overflow: hidden !important; isolation: isolate !important; } /* Replace heavy particle backgrounds with a lightweight dust map. */ .swarmField::before, .swarmField::after{ content: "" !important; inset: 0 !important; pointer-events: none !important; mix-blend-mode: normal !important; filter: none !important; will-change: transform !important; z-index: 0 !important; } .swarmField::before{ opacity: .22 !important; background-image: radial-gradient(circle, rgba(255,255,255,.09) 0 1px, transparent 2px), radial-gradient(circle, rgba(255,255,255,.05) 0 1px, transparent 2px); background-size: 140px 140px, 260px 260px; background-position: 0 0, 60px 90px; animation: swarmDustDrift 22s linear infinite; } .swarmField::after{ opacity: .14 !important; background-image: radial-gradient(circle, rgba(255,255,255,.06) 0 1px, transparent 2px); background-size: 320px 320px; background-position: 120px 40px; animation: swarmDustDrift2 30s linear infinite; } @keyframes swarmDustDrift{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-70px, 45px, 0); } } @keyframes swarmDustDrift2{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(80px, -50px, 0); } } @media (prefers-reduced-motion: reduce){ .swarmField::before, .swarmField::after{ animation: none !important; } } /* ========================= BuddiUp quick slots (Explore) ========================= */ .buddiUp{ /* Overlayed INSIDE the swarm (safe: no page/layout rebalance) */ position: absolute; top: 108px; /* sit just under the header divider (nudged down slightly) */ right: 14px; /* tuck into swarm padding */ width: 118px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; z-index: 5; } .buddiUpTitle{ font-weight: 800; letter-spacing: .06em; text-transform: none; opacity: .9; text-align: center; } .buddiUpSlots{ display: flex; flex-direction: column; gap: 10px; } .buddiUpSlot{ position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 18px; /* Empty slots are neutral; filled slots take the chosen Bod's faction colour */ border: 2px solid rgba(255,255,255,.18); background: rgba(15, 17, 24, .55); box-shadow: 0 10px 30px rgba(0,0,0,.35); cursor: pointer; overflow: hidden; transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease; } .buddiUpSlot:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.40); box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 16px 40px rgba(0,0,0,.45); } .buddiUpSlot:active{ transform: translateY(0); } .buddiUpSlot .slotLabel{ position: absolute; left: 10px; top: 10px; font-weight: 900; font-size: 26px; color: rgba(255,255,255,.55); text-shadow: 0 2px 14px rgba(0,0,0,.55); } .buddiUpSlot .slotImg{ width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; /* Mild scale so we clip cleanly inside the rounded box without pixelating */ transform: scale(1.06) translateZ(0); transform-origin: 50% 50%; will-change: transform; /* Helps soften harsh cutouts on transparent PNG edges */ filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); transition: opacity .18s ease; } .buddiUpSlot.isFilled .slotImg{ opacity: .95; } .buddiUpSlot.isFilled .slotLabel{ opacity: .0; } @keyframes buddiGlowPulse{ 0%{ box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.35); } 50%{ box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 16px 44px rgba(0,0,0,.45), 0 0 22px var(--slotGlow, rgba(255,255,255,.12)); } 100%{ box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 12px 36px rgba(0,0,0,.40); } } .buddiUpSlot.isFilled{ animation: buddiGlowPulse 2.2s ease-in-out infinite; } .buddiUpSlot.isFilled{ border-color: var(--slotAccent, rgba(255,255,255,.70)); } .buddiUpLabBtn{ display: block; text-align: center; padding: 10px 12px; border-radius: 14px; border: 2px solid rgba(255,255,255,.22); background: rgba(15, 17, 24, .65); color: rgba(255,255,255,.92); font-weight: 900; letter-spacing: .02em; text-decoration: none; user-select: none; transition: transform .14s ease, box-shadow .18s ease, filter .18s ease; } .buddiUpLabBtn[aria-disabled="true"]{ opacity: .35; pointer-events: none; filter: grayscale(1); } .buddiUpLabBtn.isReady{ opacity: 1; pointer-events: auto; border-color: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 18px 50px rgba(255,255,255,.10); animation: buddiLabPulse 1.85s ease-in-out infinite; position: relative; overflow: hidden; } .buddiUpLabBtn.isReady::before{ content: ""; position: absolute; inset: -2px; transform: translateX(-120%); background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 35%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.10) 65%, rgba(255,255,255,0) 100%); filter: blur(.2px); opacity: .75; animation: bodLabShimmer 2.6s ease-in-out infinite; pointer-events: none; } @keyframes bodLabShimmer{ 0%{ transform: translateX(-120%); } 55%{ transform: translateX(120%); } 100%{ transform: translateX(120%); } } @media (prefers-reduced-motion: reduce){ .buddiUpLabBtn.isReady{ animation: none; } .buddiUpLabBtn.isReady::before{ display:none; } } @keyframes buddiLabPulse{ 0%{ transform: translateY(0); filter: brightness(1); box-shadow: 0 0 0 1px rgba(255,255,255,.20), 0 16px 46px rgba(255,255,255,.08); } 50%{ transform: translateY(-1px); filter: brightness(1.10); box-shadow: 0 0 0 1px rgba(255,255,255,.36), 0 18px 58px rgba(255,255,255,.14), 0 0 26px rgba(255,255,255,.14); } 100%{ transform: translateY(0); filter: brightness(1); box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 16px 46px rgba(255,255,255,.10); } } .buddiUpHint{ font-size: 12px; line-height: 1.2; opacity: .72; text-align: center; } /* Add-to-BuddiUp row inside the selected Bod card */ .buddiUpAddRow{ display: flex; align-items: center; justify-content: flex-start; gap: 10px; /* Anchor the BuddiUp button just above the MIND/BODY/SOUL block */ position: absolute; left: 14px; right: 14px; bottom: 74px; margin: 0; } .buddiUpAddBtn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 3px solid var(--factionAccent, rgba(255,255,255,.18)); background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); font-weight: 800; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.20); transition: transform .14s ease, box-shadow .18s ease, filter .18s ease; } .buddiUpChev{ display:inline-block; font-weight: 900; letter-spacing: -2px; opacity: .55; transform: translateX(0); } .buddiUpAddBtn--addable .buddiUpChev{ animation: buddiUpChevPulse 1.15s ease-in-out infinite; } .buddiUpAddBtn--addable .buddiUpChev.c1{ animation-delay: 0s; } .buddiUpAddBtn--addable .buddiUpChev.c2{ animation-delay: .20s; } @keyframes buddiUpChevPulse{ 0% { opacity:.35; filter:brightness(1); transform:translateX(0); } 35% { opacity:1; filter:brightness(1.25); transform:translateX(-2px); } 70% { opacity:.45; filter:brightness(1); transform:translateX(0); } 100% { opacity:.35; filter:brightness(1); transform:translateX(0); } } .kitList{margin:6px 0 0 18px; padding:0;} .kitList li{margin:4px 0;} /* Point left toward the BuddiUp slots */ .buddiUpAddBtn::before{ content: "\2190"; /* ← */ font-weight: 900; opacity: .9; } /* If the button is disabled (e.g., MAGI/REEVERZ or no selection), hide the arrow cue entirely. */ .buddiUpAddBtn[disabled]::before{ content:""; opacity: 0; } .buddiUpAddBtn:not([disabled]):hover{ transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(0,0,0,.20), 0 0 18px var(--factionAccentA, rgba(255,255,255,.22)); filter: brightness(1.06); } .buddiUpAddBtn[disabled]{ opacity: .45; cursor: default; border-color: rgba(255,255,255,.14); box-shadow: none; } .buddiUpAddMsg{ display: none; /* keep UI clean — no inline warning text */ } /* BuddiUp slot shimmer (empty slots) */ .buddiUpSlot.isEmpty{ position: relative; overflow: hidden; } .buddiUpSlot.isEmpty::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.05) 35%, rgba(255,255,255,.02) 70%); opacity: .9; } .buddiUpSlot.isEmpty::after{ content: ""; position: absolute; top: -20%; bottom: -20%; width: 55%; left: -65%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0)); transform: skewX(-18deg); animation: buddiShimmer 2.4s ease-in-out infinite; opacity: .35; pointer-events: none; } @keyframes buddiShimmer{ 0%{ left: -65%; opacity: .0; } 18%{ opacity: .35; } 55%{ opacity: .35; } 100%{ left: 130%; opacity: 0; } } @media (max-width: 1100px){ .buddiUp{ display:none; } } /* ========================================================= TOOLTIP ARROW (POINT-DOWN) — DO NOT CLIP Fixes the 'bubble/blob' artifact by ensuring: - inner shine layer sits behind content + arrow - arrow is drawn as a real triangle (border + fill) ========================================================= */ .pipTipInner{ position: relative; overflow: visible !important; isolation: isolate; } /* We intentionally layer a 'card cover' (::after) ABOVE the arrow so the pointer looks tucked UNDER the tooltip body (not stuck on top). */ .pipTipInner::after{ z-index: 1; } .pipTipInner::before{ z-index: 2; } .pipTipContent{ position: relative; z-index: 3; } /* Rebuild arrow (overrides earlier styles) */ .pipTipArrow{ position: absolute; left: var(--arrowX); bottom: -10px; /* aligned to pips without sitting on top of card */ width: 18px; height: 11px; background: transparent !important; border: none !important; z-index: 0; /* keep the arrow BEHIND the tooltip body */ filter: none !important; pointer-events: none; transform: translateX(-50%) translateY(0); /* remove +Y shift that made it look 'on top' */ } .pipTipArrow::before, .pipTipArrow::after{ content:""; position:absolute; left:0; right:0; margin:auto; width:0; height:0; border-left: 9px solid transparent; border-right: 9px solid transparent; } .pipTipArrow::before{ top: 0; border-top: 10px solid rgba(255,255,255,.18); /* border */ } .pipTipArrow::after{ top: 1px; border-top: 9px solid rgba(0,0,0,0); /* no fill (prevents 'colored-in' look) */ } /* Card cover: extends a few px below the tooltip so it overlaps the arrow top */ .pipTipInner::after{ content:""; position:absolute; left: 1px; right: 1px; top: 1px; bottom: -7px; border-radius: 13px; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.14), transparent 55%), rgba(0,0,0,.55); pointer-events:none; } /* ========================================================= TOOLTIP CLEANUP — DISABLE CSS FALLBACK BUBBLES --------------------------------------------------------- We use the JS-driven floating tooltip (#pipTip). The CSS-only fallback (::before/::after) can overlap and create the 'weird bubble' artifact near MIND/BODY/SOUL. Keep this OFF unless we intentionally remove #pipTip. ========================================================= */ .pipLabel[data-tip]::before, .pipLabel[data-tip]::after{ content: none !important; display: none !important; } /* ========================================================= SWARM PARTICLES — MAKE THEM VISIBLE (SAFE) --------------------------------------------------------- Increase contrast/opacity without blur/blend-mode. Does NOT affect hit testing (pointer-events: none). ========================================================= */ .swarmField::before{ opacity: .38 !important; } .swarmField::after{ opacity: .24 !important; } /* Slightly denser dot map */ .swarmField::before{ background-image: radial-gradient(circle, rgba(255,255,255,.14) 0 1px, transparent 2px), radial-gradient(circle, rgba(255,255,255,.08) 0 1px, transparent 2px), radial-gradient(circle, rgba(255,255,255,.06) 0 1px, transparent 2px); background-size: 120px 120px, 210px 210px, 340px 340px; background-position: 0 0, 70px 110px, 160px 40px; } /* ========================================================= BUILD 14 — POLISH LOCK --------------------------------------------------------- 1) Tooltip arrow must render *behind* the tooltip body. 2) Swarm particles should feel like random dust (NOT a grid) while keeping click responsiveness intact. ========================================================= */ /* 1) Tooltip arrow behind body */ .pipTip{ position: absolute; } .pipTipInner{ position: relative; z-index: 2; /* body above arrow */ } .pipTipContent{ position: relative; z-index: 3; /* content above body shine */ } .pipTipArrow{ z-index: 1 !important; /* arrow behind body */ filter: none !important; /* prevents "on-top" looking edge */ } /* 2) Random dust particles (no repeating background-size grids) We override the previous grid-based dust. Keep: pointer-events none; no blur; no blend-mode. */ .swarmField::before{ opacity: .26 !important; animation: swarmDustDrift 24s linear infinite !important; background-size: auto !important; background-position: 0 0 !important; background-image: radial-gradient(circle at 7% 12%, rgba(255,255,255,.10) 0 1px, transparent 3px), radial-gradient(circle at 18% 78%, rgba(255,255,255,.06) 0 1px, transparent 3px), radial-gradient(circle at 26% 34%, rgba(255,255,255,.08) 0 1px, transparent 3px), radial-gradient(circle at 33% 62%, rgba(255,255,255,.05) 0 1px, transparent 3px), radial-gradient(circle at 41% 18%, rgba(255,255,255,.09) 0 1px, transparent 3px), radial-gradient(circle at 48% 86%, rgba(255,255,255,.06) 0 1px, transparent 3px), radial-gradient(circle at 56% 44%, rgba(255,255,255,.08) 0 1px, transparent 3px), radial-gradient(circle at 63% 71%, rgba(255,255,255,.05) 0 1px, transparent 3px), radial-gradient(circle at 72% 26%, rgba(255,255,255,.09) 0 1px, transparent 3px), radial-gradient(circle at 79% 90%, rgba(255,255,255,.06) 0 1px, transparent 3px), radial-gradient(circle at 86% 53%, rgba(255,255,255,.08) 0 1px, transparent 3px), radial-gradient(circle at 94% 15%, rgba(255,255,255,.05) 0 1px, transparent 3px), radial-gradient(circle at 11% 48%, rgba(255,255,255,.07) 0 1px, transparent 3px), radial-gradient(circle at 22% 9%, rgba(255,255,255,.05) 0 1px, transparent 3px), radial-gradient(circle at 37% 40%, rgba(255,255,255,.06) 0 1px, transparent 3px), radial-gradient(circle at 52% 12%, rgba(255,255,255,.07) 0 1px, transparent 3px), radial-gradient(circle at 68% 58%, rgba(255,255,255,.06) 0 1px, transparent 3px), radial-gradient(circle at 81% 33%, rgba(255,255,255,.07) 0 1px, transparent 3px), radial-gradient(circle at 92% 74%, rgba(255,255,255,.06) 0 1px, transparent 3px); } .swarmField::after{ opacity: .16 !important; animation: swarmDustDrift2 34s linear infinite !important; background-size: auto !important; background-position: 0 0 !important; background-image: radial-gradient(circle at 9% 66%, rgba(255,255,255,.05) 0 2px, transparent 10px), radial-gradient(circle at 24% 22%, rgba(255,255,255,.04) 0 2px, transparent 10px), radial-gradient(circle at 31% 88%, rgba(255,255,255,.05) 0 2px, transparent 12px), radial-gradient(circle at 46% 55%, rgba(255,255,255,.04) 0 2px, transparent 12px), radial-gradient(circle at 58% 17%, rgba(255,255,255,.05) 0 2px, transparent 10px), radial-gradient(circle at 73% 77%, rgba(255,255,255,.04) 0 2px, transparent 12px), radial-gradient(circle at 84% 38%, rgba(255,255,255,.05) 0 2px, transparent 10px), radial-gradient(circle at 96% 92%, rgba(255,255,255,.04) 0 2px, transparent 12px); } /* ========================================================= BUILD 15 — FINAL TOOLTIP & PARTICLE POLISH (LOCK) --------------------------------------------------------- 1) Tooltip pointer MUST appear tucked UNDER the tooltip body. 2) Particles must read as RANDOM DUST (not a grid) and be visible, without harming swarm hit testing. ========================================================= */ /* --- 1) Tooltip pointer tucked under card --- */ .pipTipInner{ position: relative !important; isolation: isolate !important; } /* Keep content on top */ .pipTipContent{ z-index: 3 !important; } /* Arrow behind the card */ .pipTipArrow{ z-index: 0 !important; filter: none !important; } /* Card cover layer: extend below bottom edge to overlap arrow top */ .pipTipInner::after{ content: "" !important; position: absolute !important; left: 1px !important; right: 1px !important; top: 1px !important; bottom: -7px !important; border-radius: 13px !important; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.14), transparent 55%), rgba(0,0,0,.55) !important; z-index: 1 !important; pointer-events: none !important; } /* --- 2) Random dust particles (VISIBLE, SAFE) --- */ .swarmField::before, .swarmField::after{ pointer-events: none !important; background-size: auto !important; background-position: 0 0 !important; } /* Primary dust layer */ .swarmField::before{ opacity: .90 !important; /* doubled visibility without filters/blend-modes */ animation: swarmDustDrift 22s linear infinite !important; background-image: radial-gradient(circle at 6% 14%, rgba(255,255,255,.12) 0 1px, transparent 4px), radial-gradient(circle at 13% 52%, rgba(255,255,255,.08) 0 1px, transparent 4px), radial-gradient(circle at 17% 84%, rgba(255,255,255,.10) 0 1px, transparent 4px), radial-gradient(circle at 24% 28%, rgba(255,255,255,.07) 0 1px, transparent 4px), radial-gradient(circle at 31% 71%, rgba(255,255,255,.11) 0 1px, transparent 4px), radial-gradient(circle at 38% 40%, rgba(255,255,255,.06) 0 1px, transparent 4px), radial-gradient(circle at 44% 10%, rgba(255,255,255,.10) 0 1px, transparent 4px), radial-gradient(circle at 49% 88%, rgba(255,255,255,.07) 0 1px, transparent 4px), radial-gradient(circle at 56% 58%, rgba(255,255,255,.11) 0 1px, transparent 4px), radial-gradient(circle at 63% 22%, rgba(255,255,255,.08) 0 1px, transparent 4px), radial-gradient(circle at 70% 76%, rgba(255,255,255,.10) 0 1px, transparent 4px), radial-gradient(circle at 78% 35%, rgba(255,255,255,.07) 0 1px, transparent 4px), radial-gradient(circle at 86% 63%, rgba(255,255,255,.09) 0 1px, transparent 4px), radial-gradient(circle at 92% 18%, rgba(255,255,255,.06) 0 1px, transparent 4px), radial-gradient(circle at 5% 35%, rgba(255,255,255,.09) 0 1px, transparent 4px), radial-gradient(circle at 11% 9%, rgba(255,255,255,.07) 0 1px, transparent 4px), radial-gradient(circle at 27% 93%, rgba(255,255,255,.08) 0 1px, transparent 4px), radial-gradient(circle at 41% 63%, rgba(255,255,255,.07) 0 1px, transparent 4px), radial-gradient(circle at 59% 6%, rgba(255,255,255,.08) 0 1px, transparent 4px), radial-gradient(circle at 74% 49%, rgba(255,255,255,.07) 0 1px, transparent 4px), radial-gradient(circle at 88% 90%, rgba(255,255,255,.08) 0 1px, transparent 4px), radial-gradient(circle at 33% 16%, rgba(255,255,255,.07) 0 1px, transparent 4px), radial-gradient(circle at 47% 27%, rgba(255,255,255,.06) 0 1px, transparent 4px), radial-gradient(circle at 52% 78%, rgba(255,255,255,.08) 0 1px, transparent 4px), radial-gradient(circle at 66% 64%, rgba(255,255,255,.07) 0 1px, transparent 4px), radial-gradient(circle at 81% 24%, rgba(255,255,255,.06) 0 1px, transparent 4px), radial-gradient(circle at 94% 57%, rgba(255,255,255,.07) 0 1px, transparent 4px), radial-gradient(circle at 18% 38%, rgba(255,255,255,.06) 0 1px, transparent 4px), radial-gradient(circle at 29% 57%, rgba(255,255,255,.07) 0 1px, transparent 4px), radial-gradient(circle at 76% 90%, rgba(255,255,255,.06) 0 1px, transparent 4px); } /* Secondary, larger motes for depth */ .swarmField::after{ opacity: .70 !important; animation: swarmDustDrift2 34s linear infinite !important; background-image: radial-gradient(circle at 9% 66%, rgba(255,255,255,.06) 0 2px, transparent 8px), radial-gradient(circle at 22% 18%, rgba(255,255,255,.05) 0 2px, transparent 8px), radial-gradient(circle at 37% 82%, rgba(255,255,255,.05) 0 2px, transparent 8px), radial-gradient(circle at 53% 34%, rgba(255,255,255,.05) 0 2px, transparent 8px), radial-gradient(circle at 68% 12%, rgba(255,255,255,.05) 0 2px, transparent 8px), radial-gradient(circle at 83% 74%, rgba(255,255,255,.05) 0 2px, transparent 8px), radial-gradient(circle at 14% 44%, rgba(255,255,255,.04) 0 2px, transparent 8px), radial-gradient(circle at 46% 8%, rgba(255,255,255,.04) 0 2px, transparent 8px), radial-gradient(circle at 61% 91%, rgba(255,255,255,.04) 0 2px, transparent 8px), radial-gradient(circle at 95% 41%, rgba(255,255,255,.04) 0 2px, transparent 8px), radial-gradient(circle at 7% 20%, rgba(255,255,255,.05) 0 2px, transparent 8px), radial-gradient(circle at 28% 64%, rgba(255,255,255,.04) 0 2px, transparent 8px), radial-gradient(circle at 41% 48%, rgba(255,255,255,.04) 0 2px, transparent 8px), radial-gradient(circle at 58% 73%, rgba(255,255,255,.04) 0 2px, transparent 8px), radial-gradient(circle at 72% 33%, rgba(255,255,255,.04) 0 2px, transparent 8px), radial-gradient(circle at 89% 10%, rgba(255,255,255,.04) 0 2px, transparent 8px); } @keyframes swarmDustDrift{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-60px, -40px, 0); } } @keyframes swarmDustDrift2{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(40px, -70px, 0); } } @media (prefers-reduced-motion: reduce){ .swarmField::before, .swarmField::after{ animation: none !important; } } /* ========================= BuddiUp + Discovered (LOCK) - Discovered pill sits on the SAME LINE as the faction buttons - Pinned FAR RIGHT inside the Swarm header row - BuddiUp remains an overlay inside the swarm (no layout drift) ========================= */ .swarmHeaderRow{ display: flex; align-items: center; gap: 12px; } /* Ensure the discovered pill is truly top-right, level with the faction buttons */ .swarmDiscoveredBubble{ position: static !important; margin-left: auto !important; margin-top: 0 !important; align-self: center; } /* Give the last faction button room so hover outline/glow isn't clipped on the right edge */ .swarmHeaderRow .factionBar{ padding-right: 22px !important; } /* Bod Pop-out: BuddiUp add button shimmer when addable (draws the eye) */ .buddiUpAddBtn{ position: relative; overflow: hidden; } .buddiUpAddBtn--addable::before{ content:""; position:absolute; inset:-40% -60%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 20%, rgba(255,255,255,.22) 35%, rgba(255,255,255,.10) 50%, transparent 70%); transform: translateX(-55%) rotate(6deg); animation: buddiUpBtnShimmer 2.2s linear infinite; pointer-events:none; } @keyframes buddiUpBtnShimmer{ 0%{ transform: translateX(-70%) rotate(6deg); opacity:.0; } 8%{ opacity:.55; } 45%{ opacity:.55; } 60%{ opacity:.0; } 100%{ transform: translateX(75%) rotate(6deg); opacity:0; } } /* Gameplay teaser under description (uses kit.gameplay bullets) */ .bodGameplay{ margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.10); } .bodGameplayTitle{ font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 6px; } .bodGameplayList{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; color: rgba(255,255,255,.86); } .bodGameplayList li::before{ content: "•"; margin-right: 8px; opacity: .75; } .buddiUpSlot.isAddTarget{ border-color: rgba(255,170,70,.88); box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 24px rgba(255,170,70,.18), 0 16px 40px rgba(0,0,0,.46); } .buddiUp.canAdd .buddiUpSlot.isEmpty{ border-color: rgba(255,202,132,.46); } .buddiUp.canAdd .buddiUpSlot.isEmpty .slotLabel{ color: rgba(255,230,202,.88); } @keyframes buddiTargetPulse{ 0%{ transform: translateY(0); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.35); } 50%{ transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,202,132,.32), 0 0 24px rgba(255,170,70,.16), 0 16px 42px rgba(0,0,0,.46); } 100%{ transform: translateY(0); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.35); } } .buddiUp.canAdd .buddiUpSlot.isAddTarget{ animation: buddiTargetPulse 1.35s ease-in-out infinite; } #kitBtn, .kitBtn, .kitClose{ display:none !important; } .kitDrawer{ position: static; margin-top: 12px; transform: none; opacity: 1; pointer-events: auto; max-height: none; overflow: visible; border-width: 2px; } .bodPanel.kitOpen .kitDrawer{ transform: none; opacity: 1; } .kitRows{ padding-right: 0; } .bodGameplay{ margin-bottom: 10px; } /* Explore pass v2: clearer BuddiUp onboarding */ .buddiUp{ width: 138px; padding: 10px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(15,17,24,.34), rgba(15,17,24,.18)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .buddiUpTitle{ font-weight: 900; letter-spacing: .04em; opacity: .96; font-size: 15px; } .buddiUpGuide{ font-size: 11px; line-height: 1.3; text-align: center; color: rgba(255,255,255,.76); min-height: 42px; } .buddiUp.canAdd{ border-color: rgba(255,170,70,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,170,70,.08), 0 18px 36px rgba(0,0,0,.18); } .buddiUp.canAdd::before{ content: ""; position: absolute; left: -34px; top: 54%; width: 26px; border-top: 2px dashed rgba(255,170,70,.55); opacity: .95; } .buddiUp.canAdd::after{ content: "Add here"; position: absolute; left: -88px; top: calc(54% - 12px); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,202,132,.88); text-shadow: 0 2px 12px rgba(0,0,0,.55); } /* === Explore pass v3: tighten Bod info panel layout === */ .bodPanel{ height: auto; min-height: 0; gap: 12px; } .bodInfo{ padding: 12px 14px 0; display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; } .bodBrand, .bodRoleWrap{ width: 100% !important; } .bodRoleWrap{ display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 0 !important; margin: 0 !important; } .bodRarity{ justify-self: start; } .bodRole{ justify-self: end !important; text-align: right !important; } .bodName, .bodDesc{ margin: 0; } .bodGameplay{ margin-top: 0; margin-bottom: 0; } .pipStats{ margin-top: 2px; } .buddiUpAddRow{ position: static; left: auto; right: auto; bottom: auto; margin-top: 2px; } .buddiUpAddBtn::before, .buddiUpAddBtn--addable::before{ content: none !important; } .buddiUpAddBtn{ min-width: 168px; } .kitDrawer{ position: static !important; left: auto; right: auto; top: auto; width: 100%; margin-top: 0; margin-bottom: 52px; box-sizing: border-box; transform: none !important; opacity: 1 !important; pointer-events: auto !important; max-height: none; overflow: visible; border-width: 2px; } .bodPanel.kitOpen .kitDrawer{ transform: none; opacity: 1; } .kitRows{ padding-right: 0; } /* Clean up the BuddiUp callout on the swarm side */ .buddiUp.canAdd::before, .buddiUp.canAdd::after{ content: none !important; } .buddiUp.canAdd{ border-color: rgba(255,170,70,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,170,70,.10), 0 18px 36px rgba(0,0,0,.18); } /* === Explore pass v3.1: keep stats clear of the contribution panel === */ .bodPanel{ padding-bottom: 74px; } .bodInfo{ padding: 12px 14px 0; gap: 10px; } .buddiUpAddRow{ position: static; left: auto; right: auto; bottom: auto; margin-top: 2px; } .kitDrawer{ width: auto; margin: 0; } .pipStats{ position: static !important; left: auto !important; right: auto !important; bottom: auto !important; margin: 12px 14px 0; z-index: 10; } .pipRow{ max-width: none; } /* === Explore pass v5: BuddiUp slot highlight + drag-to-slot === */ .bodMedia{ cursor: grab; } body.isDraggingBuddiUp .bodMedia, body.isDraggingBuddiUp .swarmBubble, body.isDraggingBuddiUp .buddiUpSlot{ cursor: grabbing; } body.isDraggingBuddiUp .swarmBubble.isDragSource{ opacity: .48; filter: saturate(.8); } .swarmBubble.isDragSource .bubbleCore{ box-shadow: 0 0 0 2px rgba(255,210,150,.28), 0 0 22px rgba(255,170,70,.20); } .buddiUp.canAdd .buddiUpSlot.isSelectable{ border-color: rgba(255,202,132,.46); box-shadow: 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,202,132,.10), 0 12px 24px rgba(0,0,0,.30); } .buddiUp.canAdd .buddiUpSlot.isSelectable .slotLabel{ color: rgba(255,234,210,.96); } .buddiUp.isDraggingSelection .buddiUpSlot.isSelectable{ transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,220,162,.18), inset 0 0 0 1px rgba(255,220,162,.14), 0 0 18px rgba(255,170,70,.12), 0 18px 36px rgba(0,0,0,.36); } .buddiUpSlot.isDragHover, .buddiUp.canAdd .buddiUpSlot.isDragHover, .buddiUp.canAdd .buddiUpSlot.isAddTarget.isDragHover{ border-color: rgba(255,214,150,.96); box-shadow: 0 0 0 1px rgba(255,238,210,.22), 0 0 28px rgba(255,170,70,.28), 0 18px 42px rgba(0,0,0,.44); transform: translateY(-3px) scale(1.02); } .buddiUpDragGhost{ position: fixed; left: 0; top: 0; transform: translate(-50%, -50%) scale(1.06); animation: buddiDragLift .18s ease-out; width: 120px; padding: 10px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(21,24,34,.96), rgba(13,16,24,.92)); box-shadow: 0 22px 54px rgba(0,0,0,.44), 0 0 0 1px rgba(255,170,70,.10); pointer-events: none; z-index: 9999; backdrop-filter: blur(10px); } .buddiUpDragGhostMedia{ height: 96px; border-radius: 14px; background: rgba(0,0,0,.40); display: flex; align-items: center; justify-content: center; overflow: hidden; } .buddiUpDragGhostMedia img{ width: 100%; height: 100%; object-fit: contain; } .buddiUpDragGhostLabel{ margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-align: center; color: rgba(255,255,255,.92); } @keyframes buddiDragLift{ from{ opacity: .0; transform: translate(-50%, -50%) scale(.92); } to{ opacity: 1; transform: translate(-50%, -50%) scale(1.06); } } /* === Explore pass v6.2: local formation ready sequence === */ .buddiUp{ position: absolute; overflow: hidden; } .buddiUp::after{ content: ""; position: absolute; inset: 16px 12px 12px; border-radius: 24px; border: 1px solid rgba(255,208,140,0); box-shadow: inset 0 0 0 0 rgba(255,188,88,0), 0 0 0 0 rgba(255,170,70,0); opacity: 0; pointer-events: none; z-index: 0; } .buddiUp.isFormationReady::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 56%, rgba(255,196,108,.18), rgba(255,196,108,.06) 30%, rgba(255,196,108,0) 64%); opacity: 0; animation: buddiPanelBloom .92s ease-out forwards; pointer-events: none; z-index: 0; } .buddiUp.isFormationReady::after{ animation: buddiPanelCharge .96s ease-out forwards; } .buddiUp > *{ position: relative; z-index: 1; } .buddiUpSlot.isFormationPulse{ animation: buddiFormationPulse .46s ease-out; } 40%{ box-shadow: 0 0 0 3px rgba(255,222,176,.16), 0 0 28px rgba(255,170,70,.34), 0 18px 42px rgba(0,0,0,.28); transform: translateY(-1px) scale(1.02); } 100%{ transform: translateY(0) scale(1); } } @keyframes buddiPanelBloom{ 0%{ opacity: 0; transform: scale(.96); } 30%{ opacity: 1; } 100%{ opacity: 0; transform: scale(1.02); } } @keyframes buddiPanelCharge{ 0%{ opacity: 0; border-color: rgba(255,208,140,0); box-shadow: inset 0 0 0 0 rgba(255,188,88,0), 0 0 0 0 rgba(255,170,70,0); } 35%{ opacity: 1; border-color: rgba(255,220,164,.34); box-shadow: inset 0 0 0 1px rgba(255,214,148,.12), 0 0 22px rgba(255,170,70,.12); } 100%{ opacity: 0; border-color: rgba(255,208,140,0); box-shadow: inset 0 0 0 1px rgba(255,188,88,0), 0 0 48px rgba(255,170,70,0); } } 22%{ opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 100%{ opacity: 0; transform: translate(-50%, -50%) scale(3.6); } } /* === Explore pass v6.3: easier bubble pickup in dense swarm === */ .swarmBubble::after{ content:""; position:absolute; inset:-8px; border-radius:50%; } /* ShadeLord lore block (Explore panel) */ /* ShadeLord alignment normalization */ .bodShadeLord{ min-height: 156px !important; display:flex; flex-direction:column; justify-content:flex-start; } .bodShadeLordHero{ min-height: 54px; align-items:center; } .bodShadeLordMeta{ display:flex; flex-direction:column; justify-content:center; min-height: 44px; } .bodShadeLordChips{ min-height: 28px; align-items:flex-start; } .bodShadeLordTone{ min-height: 18px; } .bodShadeLord{ padding:10px 12px !important; margin-top: 14px; padding: 12px 12px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); } .bodShadeLordKicker{ font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.68); margin-bottom: 8px; } .bodShadeLordHero{ display:flex; gap:10px; align-items:center; } .bodShadeLordPortrait{ width: 58px; height:58px; border-radius: 14px; overflow:hidden; position:relative; flex:0 0 58px; border:1px solid rgba(255,255,255,0.12); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent, #7aa8ff) 35%, transparent), transparent 34%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); } .bodShadeLordImg{ width:100%; height:100%; object-fit:contain; display:block; } .bodShadeLordImg[hidden]{ display:none !important; } .bodShadeLordFallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:24px; color: rgba(255,255,255,0.85); } .bodShadeLordPortrait.has-image .bodShadeLordFallback{ display:none; } .bodShadeLordMeta{ min-width:0; } .bodShadeLordTitle{ font-size:12px; line-height:1.2; color: rgba(255,255,255,0.76); } .bodShadeLordName{ font-weight:800; font-size:16px; line-height:1.2; margin-top:2px; } .bodShadeLordChips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; } .bodShadeLordChip{ display:inline-flex; align-items:center; min-height:24px; padding:0 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); font-size:12px; color: rgba(255,255,255,0.9); } .bodShadeLordTone{ margin:6px 0 0; font-size:12px; line-height:1.45; color: rgba(255,255,255,0.78); } @media (max-width: 1360px), (max-height: 860px){ .swarmHeaderRow{ gap: 8px; } .swarmHeaderTools{ gap: 8px; } .swarmZoom{ padding: 3px; } .swarmZoomBtn, .swarmZoomReadout{ height: 26px; min-width: 26px; padding: 0 8px; } .swarmZoomReadout{ min-width: 52px; } } @media (max-width: 1180px){ .swarmHeaderRow{ flex-wrap: wrap; align-items: flex-start; } .swarmHeaderTools{ width: 100%; justify-content: flex-end; } } /* ShadeLord compact laptop tuning */ @media (max-height: 900px){ .bodShadeLord{ min-height: 148px !important; } } @media (max-height: 760px){ .bodShadeLord{ min-height: 142px !important; } } /* === Explore pass v10: make ShadeLord card align horizontally with kit panel === */ .bodShadeLord{ box-sizing: border-box; align-self: stretch; width: calc(100% + 8px); margin-left: -4px; margin-right: -4px; margin-top: 10px; border-width: 2px; } @media (max-height: 900px){ .bodShadeLord{ width: calc(100% + 6px); margin-left: -3px; margin-right: -3px; } } /* === Explore pass v11 hotfix: only show ShadeLord card when JS removes [hidden] === */ .bodShadeLord[hidden]{ display: none !important; } /* === Explore pass v13: move rarity into media, move class to heading row === */ .bodMedia{ position: relative; } .bodMediaBadges{ position: absolute; left: 12px; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 8px; pointer-events: none; } .bodRarity--overlay{ margin: 0; backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); background: rgba(18,22,30,.56); box-shadow: 0 8px 22px rgba(0,0,0,.28); } .bodBrand{ margin-bottom: 0; min-height: 0; } .factionMark{ min-height: 0; } .bodHeadingRow{ display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 10px; margin-top: 2px; } .bodHeadingRow .bodName{ margin: 0; min-width: 0; } .bodRole--heading{ justify-self: end; align-self: start; margin-top: 1px; white-space: nowrap; } .bodDesc{ margin-top: 2px; } @media (max-height: 900px){ .bodMediaBadges{ left: 10px; bottom: 10px; } } /* === Explore pass v14: rarity overlay + class beside name === */ .bodMedia{ position: relative; } .bodMediaBadges{ position: absolute; left: 12px; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 8px; pointer-events: none; } .bodRarity--overlay{ margin: 0 !important; backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); background: rgba(18,22,30,.56) !important; box-shadow: 0 8px 22px rgba(0,0,0,.28); } .bodInfo .bodBrand{ margin-bottom: 0 !important; min-height: 0 !important; } .bodInfo .factionMark{ min-height: 0 !important; } .bodHeadingRow{ display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: start !important; gap: 10px !important; margin-top: 2px !important; } .bodHeadingRow .bodName{ margin: 0 !important; min-width: 0 !important; } .bodRole--heading{ justify-self: end !important; align-self: start !important; margin-top: 1px !important; white-space: nowrap !important; } .bodDesc{ margin-top: 2px !important; } @media (max-height: 900px){ .bodMediaBadges{ left: 10px; bottom: 10px; } } /* === Explore pass v15: safe vertical compression === */ .bodDesc{ line-height: 1.35 !important; margin-bottom: 6px !important; } .bodShadeLord{ padding: 8px 12px !important; } .bodShadeLordChips{ gap: 4px !important; margin-top: 4px !important; } .bodShadeLordTone{ margin: 4px 0 0 !important; line-height: 1.35 !important; } .kitDrawer{ padding: 12px 14px 12px !important; } .pipStats{ margin-top: 2px !important; } /* Slight extra tightening for shorter laptop windows */ @media (max-height: 900px){ .bodDesc{ margin-bottom: 4px !important; } .bodShadeLord{ padding: 8px 10px !important; } .kitDrawer{ padding: 10px 12px 10px !important; } } /* === Explore pass v16: pull name + class closer to media === */ /* reduce space between media and text block */ .bodInfo{ padding-top: 6px !important; } /* tighten heading row */ .bodHeadingRow{ margin-top: 0px !important; } /* slightly reduce title top spacing */ .bodName{ margin-top: 0 !important; } /* keep description tight */ .bodDesc{ margin-top: 2px !important; } /* === Explore pass v17: pull name/class tighter under media === */ /* remove almost all gap between media and heading */ .bodInfo{ padding-top: 0px !important; } /* allow heading row to sit closer to media edge */ .bodHeadingRow{ margin-top: -4px !important; } /* keep title tight */ .bodName{ margin-top: 0 !important; margin-bottom: 2px !important; } /* keep role aligned nicely */ .bodRole--heading{ margin-top: 0 !important; } /* slightly tighten description start */ .bodDesc{ margin-top: 0 !important; } /* === Explore pass v18: lighter Add to Slot action === */ .buddiUpAddBtn{ min-width: 0 !important; padding: 4px 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; color: var(--accent) !important; font-weight: 800 !important; letter-spacing: .02em !important; text-transform: none !important; display: inline-flex !important; align-items: center !important; gap: 2px !important; line-height: 1.1 !important; } .buddiUpAddRow{ margin-top: 0 !important; margin-bottom: 2px !important; } .buddiUpBtnLabel{ color: var(--accent) !important; } .buddiUpAddBtn:hover, .buddiUpAddBtn:focus-visible{ color: var(--accent) !important; background: transparent !important; box-shadow: none !important; filter: brightness(1.08) saturate(1.06); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent); } .buddiUpAddBtn:active{ transform: translateY(1px); } .buddiUpChev{ color: var(--accent) !important; opacity: .95; display: inline-block; animation: buddiChevPulse 1.15s ease-in-out infinite alternate; } .buddiUpChev.c2{ animation-delay: .18s; } @keyframes buddiChevPulse{ 0%{ opacity: .45; transform: translateX(0); text-shadow: none; } 100%{ opacity: 1; transform: translateX(-1px); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent); } } /* === Explore pass v19: soft pill Add to Slot action === */ .buddiUpAddBtn{ min-width: 0 !important; padding: 6px 14px !important; border: 1px solid color-mix(in srgb, var(--accent) 72%, rgba(255,255,255,.18)) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, rgba(18,22,30,.28)), color-mix(in srgb, var(--accent) 4%, rgba(10,14,20,.12)) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), 0 8px 18px rgba(0,0,0,.16) !important; border-radius: 999px !important; color: var(--accent) !important; font-weight: 800 !important; letter-spacing: .01em !important; text-transform: none !important; display: inline-flex !important; align-items: center !important; gap: 3px !important; line-height: 1.1 !important; } .buddiUpAddRow{ margin-top: 0 !important; margin-bottom: 4px !important; } .buddiUpBtnLabel{ color: var(--accent) !important; } .buddiUpAddBtn:hover, .buddiUpAddBtn:focus-visible{ color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 86%, rgba(255,255,255,.24)) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, rgba(18,22,30,.32)), color-mix(in srgb, var(--accent) 6%, rgba(10,14,20,.16)) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 10px 22px rgba(0,0,0,.18), 0 0 16px color-mix(in srgb, var(--accent) 16%, transparent) !important; filter: brightness(1.04) saturate(1.06); text-shadow: none !important; } .buddiUpAddBtn:active{ transform: translateY(1px); } .buddiUpChev{ color: var(--accent) !important; opacity: .95; display: inline-block; animation: buddiChevPulseSoft 1.2s ease-in-out infinite alternate; } .buddiUpChev.c2{ animation-delay: .16s; } @keyframes buddiChevPulseSoft{ 0%{ opacity: .5; transform: translateX(0); text-shadow: none; } 100%{ opacity: 1; transform: translateX(-1px); text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 26%, transparent); } } /* === v25: restore classic faction button style (bold ring + underline, no halo) === */ #factionBar .factionBtn{ position: relative; overflow: visible; border-radius: 999px; } #factionBar .factionBtn::before{ content: none !important; } #factionBar .factionBtn::after{ content: none; } #factionBar .factionBtn:hover, #factionBar .factionBtn:focus-visible{ outline: none; background: rgba(0,0,0,.18) !important; } #factionBar .factionBtn.is-active::after, #factionBar .factionBtn.active::after, #factionBar .factionBtn[aria-pressed="true"]::after{ content:""; position:absolute; left:50%; bottom:-7px; width:20px; height:3px; transform:translateX(-50%); border-radius:999px; background: var(--btnCol, #fff); box-shadow:none; } #factionBar .factionBtn .factionSymbol{ filter:none !important; } /* kill any old overlay/pseudo ring rules */ #factionBar .factionBtn::before{ content: none !important; display: none !important; box-shadow: none !important; border: 0 !important; background: transparent !important; } #factionBar .factionBtn::after{ content: none !important; display: none !important; box-shadow: none !important; } #factionBar .factionBtn.faction--MAGI{ border: 2px solid #A36BFF !important; } #factionBar .factionBtn.faction--MEXX{ border: 2px solid #53B3FF !important; } #factionBar .factionBtn.faction--HOLOWZ{ border: 2px solid #4FD8FF !important; } #factionBar .factionBtn.faction--MEZMAZ{ border: 2px solid #FF4FD8 !important; } #factionBar .factionBtn.faction--SEPTIX{ border: 2px solid #B7F230 !important; } #factionBar .factionBtn.faction--TYTANZ{ border: 2px solid #E39A2F !important; } #factionBar .factionBtn.faction--JURASIX{ border: 2px solid #7BE05F !important; } #factionBar .factionBtn.faction--WYLDZ{ border: 2px solid #22C06A !important; } #factionBar .factionBtn.faction--BROOTZ{ border: 2px solid #FF5A2A !important; } #factionBar .factionBtn.faction--BUGZ{ border: 2px solid #62E3C1 !important; } #factionBar .factionBtn.faction--REEVERZ{ border: 2px solid #FF2020 !important; } #factionBar .factionBtn .factionSymbol{ width: 30px !important; height: 30px !important; transform: none !important; transform-origin: center !important; opacity: 1 !important; filter: none !important; } #factionBar .factionBtn:hover, #factionBar .factionBtn:focus-visible{ transform: translateY(-1px) !important; } #factionBar .factionBtn.is-active, #factionBar .factionBtn.active, #factionBar .factionBtn[aria-pressed="true"]{ border-width: 3px !important; } #factionBar .factionBtn.is-active::after, #factionBar .factionBtn.active::after, #factionBar .factionBtn[aria-pressed="true"]::after{ content: "" !important; display: block !important; position: absolute !important; left: 50% !important; bottom:-12px !important; width: 22px !important; height: 5px !important; transform: translateX(-50%) !important; border-radius: 999px !important; box-shadow: none !important; } #factionBar .factionBtn.faction--MAGI.is-active::after, #factionBar .factionBtn.faction--MAGI.active::after, #factionBar .factionBtn.faction--MAGI[aria-pressed="true"]::after{ background:#A36BFF !important; } #factionBar .factionBtn.faction--MEXX.is-active::after, #factionBar .factionBtn.faction--MEXX.active::after, #factionBar .factionBtn.faction--MEXX[aria-pressed="true"]::after{ background:#53B3FF !important; } #factionBar .factionBtn.faction--HOLOWZ.is-active::after, #factionBar .factionBtn.faction--HOLOWZ.active::after, #factionBar .factionBtn.faction--HOLOWZ[aria-pressed="true"]::after{ background:#4FD8FF !important; } #factionBar .factionBtn.faction--MEZMAZ.is-active::after, #factionBar .factionBtn.faction--MEZMAZ.active::after, #factionBar .factionBtn.faction--MEZMAZ[aria-pressed="true"]::after{ background:#FF4FD8 !important; } #factionBar .factionBtn.faction--SEPTIX.is-active::after, #factionBar .factionBtn.faction--SEPTIX.active::after, #factionBar .factionBtn.faction--SEPTIX[aria-pressed="true"]::after{ background:#B7F230 !important; } #factionBar .factionBtn.faction--TYTANZ.is-active::after, #factionBar .factionBtn.faction--TYTANZ.active::after, #factionBar .factionBtn.faction--TYTANZ[aria-pressed="true"]::after{ background:#E39A2F !important; } #factionBar .factionBtn.faction--JURASIX.is-active::after, #factionBar .factionBtn.faction--JURASIX.active::after, #factionBar .factionBtn.faction--JURASIX[aria-pressed="true"]::after{ background:#7BE05F !important; } #factionBar .factionBtn.faction--WYLDZ.is-active::after, #factionBar .factionBtn.faction--WYLDZ.active::after, #factionBar .factionBtn.faction--WYLDZ[aria-pressed="true"]::after{ background:#22C06A !important; } #factionBar .factionBtn.faction--BROOTZ.is-active::after, #factionBar .factionBtn.faction--BROOTZ.active::after, #factionBar .factionBtn.faction--BROOTZ[aria-pressed="true"]::after{ background:#FF5A2A !important; } #factionBar .factionBtn.faction--BUGZ.is-active::after, #factionBar .factionBtn.faction--BUGZ.active::after, #factionBar .factionBtn.faction--BUGZ[aria-pressed="true"]::after{ background:#62E3C1 !important; } #factionBar .factionBtn.faction--REEVERZ.is-active::after, #factionBar .factionBtn.faction--REEVERZ.active::after, #factionBar .factionBtn.faction--REEVERZ[aria-pressed="true"]::after{ background:#FF2020 !important; } /* v29 ADD TO SLOT refinement */ .addToSlot, .add-to-slot, .addSlotBtn{ text-transform: uppercase !important; font-size: 0.85em !important; letter-spacing: .04em !important; } /* v30 ADD TO SLOT visual fix */ .addToSlotBtn, .add-to-slot, .addSlotBtn, [class*="addToSlot"]{ text-transform:uppercase !important; font-size:12px !important; letter-spacing:0.06em !important; } /* ensure arrows have breathing room */ [class*="addToSlot"]::before{ margin-right:4px !important; } /* === v32: kit tabs gold default -> faction hover/active === */ .kitTabBtn{ border: 2px solid #C8A96A !important; color: #C8A96A !important; background: rgba(0,0,0,.22) !important; transition: border-color .18s ease, color .18s ease, transform .14s ease, box-shadow .18s ease, filter .18s ease !important; } .kitTabBtn:hover, .kitTabBtn:focus-visible{ border-color: var(--accent) !important; color: var(--accent) !important; transform: translateY(-2px) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent) !important; } .kitTabBtn.isActive, .kitTabBtn[aria-selected="true"]{ border-color: var(--accent) !important; color: var(--accent) !important; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 75%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 10px color-mix(in srgb, var(--accent) 14%, transparent) !important; } /* === v32: slightly stronger swarm hover/readability === */ .swarmBubble:hover .bubbleCore{ filter: brightness(1.08) saturate(1.04) !important; border-color: var(--accent) !important; box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 2px color-mix(in srgb, var(--accent) 32%, rgba(255,255,255,.08)), 0 0 18px color-mix(in srgb, var(--accent) 32%, transparent) !important; transform: translate(-50%, -50%) scale(1.055) !important; } .swarmBubble.isSelected .bubbleCore{ box-shadow: 0 0 0 3px var(--accent), 0 18px 40px rgba(0,0,0,.55), 0 0 16px color-mix(in srgb, var(--accent) 22%, transparent) !important; } /* === v33: faction buttons behave like swarm bubbles (dim -> brighten on hover) === */ #factionBar .factionBtn{ position: relative !important; width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; background: rgba(0,0,0,.10) !important; overflow: visible !important; outline: none !important; box-shadow: 0 10px 22px rgba(0,0,0,.18) !important; transition: transform .12s ease, filter .12s ease, box-shadow .16s ease, border-color .16s ease !important; } /* kill any old overlay/pseudo ring rules */ #factionBar .factionBtn::before{ content: none !important; display: none !important; box-shadow: none !important; border: 0 !important; background: transparent !important; } #factionBar .factionBtn::after{ content: none !important; display: none !important; box-shadow: none !important; } #factionBar .factionBtn.faction--MAGI{ --btnCol:#A36BFF; --btnColDim: rgba(163,107,255,.52); } #factionBar .factionBtn.faction--MEXX{ --btnCol:#53B3FF; --btnColDim: rgba(83,179,255,.52); } #factionBar .factionBtn.faction--HOLOWZ{ --btnCol:#4FD8FF; --btnColDim: rgba(79,216,255,.52); } #factionBar .factionBtn.faction--MEZMAZ{ --btnCol:#FF4FD8; --btnColDim: rgba(255,79,216,.52); } #factionBar .factionBtn.faction--SEPTIX{ --btnCol:#B7F230; --btnColDim: rgba(183,242,48,.52); } #factionBar .factionBtn.faction--TYTANZ{ --btnCol:#E39A2F; --btnColDim: rgba(227,154,47,.52); } #factionBar .factionBtn.faction--JURASIX{ --btnCol:#7BE05F; --btnColDim: rgba(123,224,95,.52); } #factionBar .factionBtn.faction--WYLDZ{ --btnCol:#22C06A; --btnColDim: rgba(34,192,106,.52); } #factionBar .factionBtn.faction--BROOTZ{ --btnCol:#FF5A2A; --btnColDim: rgba(255,90,42,.52); } #factionBar .factionBtn.faction--BUGZ{ --btnCol:#62E3C1; --btnColDim: rgba(98,227,193,.52); } #factionBar .factionBtn.faction--REEVERZ{ --btnCol:#FF2020; --btnColDim: rgba(255,32,32,.52); } #factionBar .factionBtn{ border: 2px solid var(--btnColDim) !important; } #factionBar .factionBtn .factionSymbol{ width: 30px !important; height: 30px !important; transform: none !important; transform-origin: center !important; opacity: .88 !important; filter: saturate(.92) brightness(.94) !important; transition: transform .12s ease, filter .12s ease, opacity .12s ease !important; } #factionBar .factionBtn:hover, #factionBar .factionBtn:focus-visible{ transform: translateY(-1px) !important; filter: brightness(1.04) !important; border-color: var(--btnCol) !important; box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 0 0 2px color-mix(in srgb, var(--btnCol) 10%, transparent), 0 0 14px color-mix(in srgb, var(--btnCol) 16%, transparent) !important; } #factionBar .factionBtn:hover .factionSymbol, #factionBar .factionBtn:focus-visible .factionSymbol{ opacity: 1 !important; filter: saturate(1.02) brightness(1.03) !important; transform: scale(1.03) !important; } #factionBar .factionBtn.is-active, #factionBar .factionBtn.active, #factionBar .factionBtn[aria-pressed="true"]{ border-width: 3px !important; border-color: var(--btnCol) !important; box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 -2px 0 color-mix(in srgb, var(--btnCol) 92%, transparent), 0 0 16px color-mix(in srgb, var(--btnCol) 14%, transparent) !important; } #factionBar .factionBtn.is-active .factionSymbol, #factionBar .factionBtn.active .factionSymbol, #factionBar .factionBtn[aria-pressed="true"] .factionSymbol{ opacity: 1 !important; filter: saturate(1.02) brightness(1.03) !important; } #factionBar .factionBtn.is-active::after, #factionBar .factionBtn.active::after, #factionBar .factionBtn[aria-pressed="true"]::after{ content: "" !important; display: block !important; position: absolute !important; left: 50% !important; bottom: -12px !important; width: 22px !important; height: 5px !important; transform: translateX(-50%) !important; border-radius: 999px !important; background: var(--btnCol) !important; box-shadow: none !important; } /* === v34: hard override faction buttons to remove white/offset overlay === */ main .stage #factionBar > .factionBtn, #explore #factionBar > .factionBtn, #factionBar > .factionBtn{ position: relative !important; width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; padding: 0 !important; border-radius: 999px !important; background: rgba(0,0,0,.10) !important; box-shadow: 0 10px 22px rgba(0,0,0,.18) !important; outline: none !important; overflow: visible !important; } main .stage #factionBar > .factionBtn::before, #explore #factionBar > .factionBtn::before, #factionBar > .factionBtn::before{ content: none !important; display: none !important; inset: auto !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } main .stage #factionBar > .factionBtn::after, #explore #factionBar > .factionBtn::after, #factionBar > .factionBtn::after{ content: none; display: none; border: 0 !important; background: transparent !important; box-shadow: none !important; } #factionBar > .factionBtn.faction--MAGI{ border: 2px solid #A36BFF !important; } #factionBar > .factionBtn.faction--MEXX{ border: 2px solid #53B3FF !important; } #factionBar > .factionBtn.faction--HOLOWZ{ border: 2px solid #4FD8FF !important; } #factionBar > .factionBtn.faction--MEZMAZ{ border: 2px solid #FF4FD8 !important; } #factionBar > .factionBtn.faction--SEPTIX{ border: 2px solid #B7F230 !important; } #factionBar > .factionBtn.faction--TYTANZ{ border: 2px solid #E39A2F !important; } #factionBar > .factionBtn.faction--JURASIX{ border: 2px solid #7BE05F !important; } #factionBar > .factionBtn.faction--WYLDZ{ border: 2px solid #22C06A !important; } #factionBar > .factionBtn.faction--BROOTZ{ border: 2px solid #FF5A2A !important; } #factionBar > .factionBtn.faction--BUGZ{ border: 2px solid #62E3C1 !important; } #factionBar > .factionBtn.faction--REEVERZ{ border: 2px solid #FF2020 !important; } #factionBar > .factionBtn .factionSymbol{ width: 30px !important; height: 30px !important; transform: none !important; filter: none !important; opacity: .88 !important; } #factionBar > .factionBtn:hover, #factionBar > .factionBtn:focus-visible{ transform: translateY(-1px) !important; } #factionBar > .factionBtn:hover.faction--MAGI{ border-color:#A36BFF !important; box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 14px rgba(163,107,255,.16) !important; } #factionBar > .factionBtn:hover.faction--MEXX{ border-color:#53B3FF !important; box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 14px rgba(83,179,255,.16) !important; } #factionBar > .factionBtn:hover.faction--HOLOWZ{ border-color:#4FD8FF !important; box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 14px rgba(79,216,255,.16) !important; } #factionBar > .factionBtn:hover.faction--MEZMAZ{ border-color:#FF4FD8 !important; box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 14px rgba(255,79,216,.16) !important; } #factionBar > .factionBtn:hover.faction--SEPTIX{ border-color:#B7F230 !important; box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 14px rgba(183,242,48,.16) !important; } #factionBar > .factionBtn:hover.faction--TYTANZ{ border-color:#E39A2F !important; box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 14px rgba(227,154,47,.16) !important; } #factionBar > .factionBtn:hover.faction--JURASIX{ border-color:#7BE05F !important; box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 14px rgba(123,224,95,.16) !important; } #factionBar > .factionBtn:hover.faction--WYLDZ{ border-color:#22C06A !important; box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 14px rgba(34,192,106,.16) !important; } #factionBar > .factionBtn:hover.faction--BROOTZ{ border-color:#FF5A2A !important; box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 14px rgba(255,90,42,.16) !important; } #factionBar > .factionBtn:hover.faction--BUGZ{ border-color:#62E3C1 !important; box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 14px rgba(98,227,193,.16) !important; } #factionBar > .factionBtn:hover.faction--REEVERZ{ border-color:#FF2020 !important; box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 14px rgba(255,32,32,.16) !important; } #factionBar > .factionBtn.is-active, #factionBar > .factionBtn.active, #factionBar > .factionBtn[aria-pressed="true"]{ border-width: 3px !important; } #factionBar > .factionBtn.is-active::after, #factionBar > .factionBtn.active::after, #factionBar > .factionBtn[aria-pressed="true"]::after{ display:block !important; content:"" !important; position:absolute !important; left:50% !important; bottom:-12px !important; width:22px !important; height:5px !important; transform:translateX(-50%) !important; border-radius:999px !important; box-shadow:none !important; } #factionBar > .factionBtn.faction--MAGI.is-active::after, #factionBar > .factionBtn.faction--MAGI.active::after, #factionBar > .factionBtn.faction--MAGI[aria-pressed="true"]::after{ background:#A36BFF !important; } #factionBar > .factionBtn.faction--MEXX.is-active::after, #factionBar > .factionBtn.faction--MEXX.active::after, #factionBar > .factionBtn.faction--MEXX[aria-pressed="true"]::after{ background:#53B3FF !important; } #factionBar > .factionBtn.faction--HOLOWZ.is-active::after, #factionBar > .factionBtn.faction--HOLOWZ.active::after, #factionBar > .factionBtn.faction--HOLOWZ[aria-pressed="true"]::after{ background:#4FD8FF !important; } #factionBar > .factionBtn.faction--MEZMAZ.is-active::after, #factionBar > .factionBtn.faction--MEZMAZ.active::after, #factionBar > .factionBtn.faction--MEZMAZ[aria-pressed="true"]::after{ background:#FF4FD8 !important; } #factionBar > .factionBtn.faction--SEPTIX.is-active::after, #factionBar > .factionBtn.faction--SEPTIX.active::after, #factionBar > .factionBtn.faction--SEPTIX[aria-pressed="true"]::after{ background:#B7F230 !important; } #factionBar > .factionBtn.faction--TYTANZ.is-active::after, #factionBar > .factionBtn.faction--TYTANZ.active::after, #factionBar > .factionBtn.faction--TYTANZ[aria-pressed="true"]::after{ background:#E39A2F !important; } #factionBar > .factionBtn.faction--JURASIX.is-active::after, #factionBar > .factionBtn.faction--JURASIX.active::after, #factionBar > .factionBtn.faction--JURASIX[aria-pressed="true"]::after{ background:#7BE05F !important; } #factionBar > .factionBtn.faction--WYLDZ.is-active::after, #factionBar > .factionBtn.faction--WYLDZ.active::after, #factionBar > .factionBtn.faction--WYLDZ[aria-pressed="true"]::after{ background:#22C06A !important; } #factionBar > .factionBtn.faction--BROOTZ.is-active::after, #factionBar > .factionBtn.faction--BROOTZ.active::after, #factionBar > .factionBtn.faction--BROOTZ[aria-pressed="true"]::after{ background:#FF5A2A !important; } #factionBar > .factionBtn.faction--BUGZ.is-active::after, #factionBar > .factionBtn.faction--BUGZ.active::after, #factionBar > .factionBtn.faction--BUGZ[aria-pressed="true"]::after{ background:#62E3C1 !important; } #factionBar > .factionBtn.faction--REEVERZ.is-active::after, #factionBar > .factionBtn.faction--REEVERZ.active::after, #factionBar > .factionBtn.faction--REEVERZ[aria-pressed="true"]::after{ background:#FF2020 !important; } /* === v37: faction bar corrected (muted default + underline + lower badge) === */ #swarmBadge, .swarmBadge{ margin-top: 22px !important; } #factionBar > .factionBtn, main .stage #factionBar > .factionBtn, #explore #factionBar > .factionBtn{ filter: saturate(.82) brightness(.88) !important; opacity: .95 !important; } #factionBar > .factionBtn .factionSymbol, main .stage #factionBar > .factionBtn .factionSymbol, #explore #factionBar > .factionBtn .factionSymbol{ opacity: .88 !important; filter: saturate(.92) brightness(.94) !important; } #factionBar > .factionBtn:hover, #factionBar > .factionBtn:focus-visible, main .stage #factionBar > .factionBtn:hover, main .stage #factionBar > .factionBtn:focus-visible, #explore #factionBar > .factionBtn:hover, #explore #factionBar > .factionBtn:focus-visible{ filter: saturate(1.0) brightness(1.02) !important; opacity: 1 !important; } #factionBar > .factionBtn:hover .factionSymbol, #factionBar > .factionBtn:focus-visible .factionSymbol, main .stage #factionBar > .factionBtn:hover .factionSymbol, main .stage #factionBar > .factionBtn:focus-visible .factionSymbol, #explore #factionBar > .factionBtn:hover .factionSymbol, #explore #factionBar > .factionBtn:focus-visible .factionSymbol{ opacity: 1 !important; filter: saturate(1.02) brightness(1.03) !important; } #factionBar > .factionBtn.is-active, #factionBar > .factionBtn.active, #factionBar > .factionBtn[aria-pressed="true"], main .stage #factionBar > .factionBtn.is-active, main .stage #factionBar > .factionBtn.active, main .stage #factionBar > .factionBtn[aria-pressed="true"], #explore #factionBar > .factionBtn.is-active, #explore #factionBar > .factionBtn.active, #explore #factionBar > .factionBtn[aria-pressed="true"]{ filter: none !important; opacity: 1 !important; border-width: 3px !important; } #factionBar > .factionBtn.is-active::after, #factionBar > .factionBtn.active::after, #factionBar > .factionBtn[aria-pressed="true"]::after, main .stage #factionBar > .factionBtn.is-active::after, main .stage #factionBar > .factionBtn.active::after, main .stage #factionBar > .factionBtn[aria-pressed="true"]::after, #explore #factionBar > .factionBtn.is-active::after, #explore #factionBar > .factionBtn.active::after, #explore #factionBar > .factionBtn[aria-pressed="true"]::after{ content: "" !important; display: block !important; position: absolute !important; left: 50% !important; bottom: -14px !important; width: 22px !important; height: 5px !important; transform: translateX(-50%) !important; border-radius: 999px !important; box-shadow: none !important; } #factionBar > .factionBtn.faction--MAGI, #factionBar > .factionBtn.faction--MAGI::after{ color:#A36BFF !important; background:#A36BFF; } #factionBar > .factionBtn.faction--MEXX, #factionBar > .factionBtn.faction--MEXX::after{ color:#53B3FF !important; background:#53B3FF; } #factionBar > .factionBtn.faction--HOLOWZ, #factionBar > .factionBtn.faction--HOLOWZ::after{ color:#4FD8FF !important; background:#4FD8FF; } #factionBar > .factionBtn.faction--MEZMAZ, #factionBar > .factionBtn.faction--MEZMAZ::after{ color:#FF4FD8 !important; background:#FF4FD8; } #factionBar > .factionBtn.faction--SEPTIX, #factionBar > .factionBtn.faction--SEPTIX::after{ color:#B7F230 !important; background:#B7F230; } #factionBar > .factionBtn.faction--TYTANZ, #factionBar > .factionBtn.faction--TYTANZ::after{ color:#E39A2F !important; background:#E39A2F; } #factionBar > .factionBtn.faction--JURASIX, #factionBar > .factionBtn.faction--JURASIX::after{ color:#7BE05F !important; background:#7BE05F; } #factionBar > .factionBtn.faction--WYLDZ, #factionBar > .factionBtn.faction--WYLDZ::after{ color:#22C06A !important; background:#22C06A; } #factionBar > .factionBtn.faction--BROOTZ, #factionBar > .factionBtn.faction--BROOTZ::after{ color:#FF5A2A !important; background:#FF5A2A; } #factionBar > .factionBtn.faction--BUGZ, #factionBar > .factionBtn.faction--BUGZ::after{ color:#62E3C1 !important; background:#62E3C1; } #factionBar > .factionBtn.faction--REEVERZ, #factionBar > .factionBtn.faction--REEVERZ::after{ color:#FF2020 !important; background:#FF2020; } /* === v38: hard restore active faction underline === */ #factionBar > .factionBtn.is-active::after, #factionBar > .factionBtn.active::after, #factionBar > .factionBtn[aria-pressed="true"]::after, main .stage #factionBar > .factionBtn.is-active::after, main .stage #factionBar > .factionBtn.active::after, main .stage #factionBar > .factionBtn[aria-pressed="true"]::after, #explore #factionBar > .factionBtn.is-active::after, #explore #factionBar > .factionBtn.active::after, #explore #factionBar > .factionBtn[aria-pressed="true"]::after{ content: "" !important; display: block !important; position: absolute !important; left: 50% !important; bottom: -14px !important; width: 22px !important; height: 5px !important; transform: translateX(-50%) !important; border-radius: 999px !important; opacity: 1 !important; z-index: 4 !important; box-shadow: none !important; } #factionBar > .factionBtn.faction--MAGI.is-active::after, #factionBar > .factionBtn.faction--MAGI.active::after, #factionBar > .factionBtn.faction--MAGI[aria-pressed="true"]::after{ background:#A36BFF !important; } #factionBar > .factionBtn.faction--MEXX.is-active::after, #factionBar > .factionBtn.faction--MEXX.active::after, #factionBar > .factionBtn.faction--MEXX[aria-pressed="true"]::after{ background:#53B3FF !important; } #factionBar > .factionBtn.faction--HOLOWZ.is-active::after, #factionBar > .factionBtn.faction--HOLOWZ.active::after, #factionBar > .factionBtn.faction--HOLOWZ[aria-pressed="true"]::after{ background:#4FD8FF !important; } #factionBar > .factionBtn.faction--MEZMAZ.is-active::after, #factionBar > .factionBtn.faction--MEZMAZ.active::after, #factionBar > .factionBtn.faction--MEZMAZ[aria-pressed="true"]::after{ background:#FF4FD8 !important; } #factionBar > .factionBtn.faction--SEPTIX.is-active::after, #factionBar > .factionBtn.faction--SEPTIX.active::after, #factionBar > .factionBtn.faction--SEPTIX[aria-pressed="true"]::after{ background:#B7F230 !important; } #factionBar > .factionBtn.faction--TYTANZ.is-active::after, #factionBar > .factionBtn.faction--TYTANZ.active::after, #factionBar > .factionBtn.faction--TYTANZ[aria-pressed="true"]::after{ background:#E39A2F !important; } #factionBar > .factionBtn.faction--JURASIX.is-active::after, #factionBar > .factionBtn.faction--JURASIX.active::after, #factionBar > .factionBtn.faction--JURASIX[aria-pressed="true"]::after{ background:#7BE05F !important; } #factionBar > .factionBtn.faction--WYLDZ.is-active::after, #factionBar > .factionBtn.faction--WYLDZ.active::after, #factionBar > .factionBtn.faction--WYLDZ[aria-pressed="true"]::after{ background:#22C06A !important; } #factionBar > .factionBtn.faction--BROOTZ.is-active::after, #factionBar > .factionBtn.faction--BROOTZ.active::after, #factionBar > .factionBtn.faction--BROOTZ[aria-pressed="true"]::after{ background:#FF5A2A !important; } #factionBar > .factionBtn.faction--BUGZ.is-active::after, #factionBar > .factionBtn.faction--BUGZ.active::after, #factionBar > .factionBtn.faction--BUGZ[aria-pressed="true"]::after{ background:#62E3C1 !important; } #factionBar > .factionBtn.faction--REEVERZ.is-active::after, #factionBar > .factionBtn.faction--REEVERZ.active::after, #factionBar > .factionBtn.faction--REEVERZ[aria-pressed="true"]::after{ background:#FF2020 !important; } /* === v39: faction underline fail-safe === */ #factionBar{ overflow: visible !important; padding-bottom: 18px !important; } #factionBar > .factionBtn{ overflow: visible !important; } /* kill any old global pseudo reset for active buttons by restating full rule at EOF */ #factionBar > .factionBtn.is-active::after, #factionBar > .factionBtn.active::after, #factionBar > .factionBtn[aria-pressed="true"]::after{ content: "" !important; display: block !important; position: absolute !important; left: 50% !important; bottom: -12px !important; width: 20px !important; height: 4px !important; transform: translateX(-50%) !important; border-radius: 999px !important; opacity: 1 !important; visibility: visible !important; z-index: 99 !important; box-shadow: none !important; pointer-events: none !important; } #factionBar > .factionBtn.faction--MAGI.is-active::after, #factionBar > .factionBtn.faction--MAGI.active::after, #factionBar > .factionBtn.faction--MAGI[aria-pressed="true"]::after{ background:#A36BFF !important; } #factionBar > .factionBtn.faction--MEXX.is-active::after, #factionBar > .factionBtn.faction--MEXX.active::after, #factionBar > .factionBtn.faction--MEXX[aria-pressed="true"]::after{ background:#53B3FF !important; } #factionBar > .factionBtn.faction--HOLOWZ.is-active::after, #factionBar > .factionBtn.faction--HOLOWZ.active::after, #factionBar > .factionBtn.faction--HOLOWZ[aria-pressed="true"]::after{ background:#4FD8FF !important; } #factionBar > .factionBtn.faction--MEZMAZ.is-active::after, #factionBar > .factionBtn.faction--MEZMAZ.active::after, #factionBar > .factionBtn.faction--MEZMAZ[aria-pressed="true"]::after{ background:#FF4FD8 !important; } #factionBar > .factionBtn.faction--SEPTIX.is-active::after, #factionBar > .factionBtn.faction--SEPTIX.active::after, #factionBar > .factionBtn.faction--SEPTIX[aria-pressed="true"]::after{ background:#B7F230 !important; } #factionBar > .factionBtn.faction--TYTANZ.is-active::after, #factionBar > .factionBtn.faction--TYTANZ.active::after, #factionBar > .factionBtn.faction--TYTANZ[aria-pressed="true"]::after{ background:#E39A2F !important; } #factionBar > .factionBtn.faction--JURASIX.is-active::after, #factionBar > .factionBtn.faction--JURASIX.active::after, #factionBar > .factionBtn.faction--JURASIX[aria-pressed="true"]::after{ background:#7BE05F !important; } #factionBar > .factionBtn.faction--WYLDZ.is-active::after, #factionBar > .factionBtn.faction--WYLDZ.active::after, #factionBar > .factionBtn.faction--WYLDZ[aria-pressed="true"]::after{ background:#22C06A !important; } #factionBar > .factionBtn.faction--BROOTZ.is-active::after, #factionBar > .factionBtn.faction--BROOTZ.active::after, #factionBar > .factionBtn.faction--BROOTZ[aria-pressed="true"]::after{ background:#FF5A2A !important; } #factionBar > .factionBtn.faction--BUGZ.is-active::after, #factionBar > .factionBtn.faction--BUGZ.active::after, #factionBar > .factionBtn.faction--BUGZ[aria-pressed="true"]::after{ background:#62E3C1 !important; } #factionBar > .factionBtn.faction--REEVERZ.is-active::after, #factionBar > .factionBtn.faction--REEVERZ.active::after, #factionBar > .factionBtn.faction--REEVERZ[aria-pressed="true"]::after{ background:#FF2020 !important; } /* visual fallback if browser suppresses pseudo rendering */ #factionBar > .factionBtn.is-active, #factionBar > .factionBtn.active, #factionBar > .factionBtn[aria-pressed="true"]{ box-shadow: 0 10px 22px rgba(0,0,0,.18), inset 0 -2px 0 rgba(255,255,255,.06), 0 8px 0 -4px transparent !important; } #factionBar > .factionBtn.faction--MAGI.is-active, #factionBar > .factionBtn.faction--MAGI.active, #factionBar > .factionBtn.faction--MAGI[aria-pressed="true"]{ box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 -2px 0 rgba(255,255,255,.06), 0 10px 0 -4px #A36BFF !important; } #factionBar > .factionBtn.faction--MEXX.is-active, #factionBar > .factionBtn.faction--MEXX.active, #factionBar > .factionBtn.faction--MEXX[aria-pressed="true"]{ box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 -2px 0 rgba(255,255,255,.06), 0 10px 0 -4px #53B3FF !important; } #factionBar > .factionBtn.faction--HOLOWZ.is-active, #factionBar > .factionBtn.faction--HOLOWZ.active, #factionBar > .factionBtn.faction--HOLOWZ[aria-pressed="true"]{ box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 -2px 0 rgba(255,255,255,.06), 0 10px 0 -4px #4FD8FF !important; } #factionBar > .factionBtn.faction--MEZMAZ.is-active, #factionBar > .factionBtn.faction--MEZMAZ.active, #factionBar > .factionBtn.faction--MEZMAZ[aria-pressed="true"]{ box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 -2px 0 rgba(255,255,255,.06), 0 10px 0 -4px #FF4FD8 !important; } #factionBar > .factionBtn.faction--SEPTIX.is-active, #factionBar > .factionBtn.faction--SEPTIX.active, #factionBar > .factionBtn.faction--SEPTIX[aria-pressed="true"]{ box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 -2px 0 rgba(255,255,255,.06), 0 10px 0 -4px #B7F230 !important; } #factionBar > .factionBtn.faction--TYTANZ.is-active, #factionBar > .factionBtn.faction--TYTANZ.active, #factionBar > .factionBtn.faction--TYTANZ[aria-pressed="true"]{ box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 -2px 0 rgba(255,255,255,.06), 0 10px 0 -4px #E39A2F !important; } #factionBar > .factionBtn.faction--JURASIX.is-active, #factionBar > .factionBtn.faction--JURASIX.active, #factionBar > .factionBtn.faction--JURASIX[aria-pressed="true"]{ box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 -2px 0 rgba(255,255,255,.06), 0 10px 0 -4px #7BE05F !important; } #factionBar > .factionBtn.faction--WYLDZ.is-active, #factionBar > .factionBtn.faction--WYLDZ.active, #factionBar > .factionBtn.faction--WYLDZ[aria-pressed="true"]{ box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 -2px 0 rgba(255,255,255,.06), 0 10px 0 -4px #22C06A !important; } #factionBar > .factionBtn.faction--BROOTZ.is-active, #factionBar > .factionBtn.faction--BROOTZ.active, #factionBar > .factionBtn.faction--BROOTZ[aria-pressed="true"]{ box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 -2px 0 rgba(255,255,255,.06), 0 10px 0 -4px #FF5A2A !important; } #factionBar > .factionBtn.faction--BUGZ.is-active, #factionBar > .factionBtn.faction--BUGZ.active, #factionBar > .factionBtn.faction--BUGZ[aria-pressed="true"]{ box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 -2px 0 rgba(255,255,255,.06), 0 10px 0 -4px #62E3C1 !important; } #factionBar > .factionBtn.faction--REEVERZ.is-active, #factionBar > .factionBtn.faction--REEVERZ.active, #factionBar > .factionBtn.faction--REEVERZ[aria-pressed="true"]{ box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 -2px 0 rgba(255,255,255,.06), 0 10px 0 -4px #FF2020 !important; } /* === v40: underline without pseudo-elements (box-shadow fallback promoted to primary) === */ #factionBar, .factionBar, .swarmHeader, .swarmHeaderRow{ overflow: visible !important; } #factionBar > .factionBtn, .factionBar > .factionBtn{ overflow: visible !important; } /* Hide pseudo underline entirely; use box-shadow bar instead */ #factionBar > .factionBtn::after, .factionBar > .factionBtn::after{ content: none !important; display: none !important; } /* Active button gets a visible underline below the circle */ #factionBar > .factionBtn.is-active, #factionBar > .factionBtn.active, #factionBar > .factionBtn[aria-pressed="true"], .factionBar > .factionBtn.is-active, .factionBar > .factionBtn.active, .factionBar > .factionBtn[aria-pressed="true"]{ border-width: 3px !important; } /* explicit per-faction underline via stacked shadow */ #factionBar > .factionBtn.faction--MAGI.is-active, #factionBar > .factionBtn.faction--MAGI.active, #factionBar > .factionBtn.faction--MAGI[aria-pressed="true"], .factionBar > .factionBtn.faction--MAGI.is-active, .factionBar > .factionBtn.faction--MAGI.active, .factionBar > .factionBtn.faction--MAGI[aria-pressed="true"]{ box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 14px 0 -6px #A36BFF !important; } #factionBar > .factionBtn.faction--MEXX.is-active, #factionBar > .factionBtn.faction--MEXX.active, #factionBar > .factionBtn.faction--MEXX[aria-pressed="true"], .factionBar > .factionBtn.faction--MEXX.is-active, .factionBar > .factionBtn.faction--MEXX.active, .factionBar > .factionBtn.faction--MEXX[aria-pressed="true"]{ box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 14px 0 -6px #53B3FF !important; } #factionBar > .factionBtn.faction--HOLOWZ.is-active, #factionBar > .factionBtn.faction--HOLOWZ.active, #factionBar > .factionBtn.faction--HOLOWZ[aria-pressed="true"], .factionBar > .factionBtn.faction--HOLOWZ.is-active, .factionBar > .factionBtn.faction--HOLOWZ.active, .factionBar > .factionBtn.faction--HOLOWZ[aria-pressed="true"]{ box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 14px 0 -6px #4FD8FF !important; } #factionBar > .factionBtn.faction--MEZMAZ.is-active, #factionBar > .factionBtn.faction--MEZMAZ.active, #factionBar > .factionBtn.faction--MEZMAZ[aria-pressed="true"], .factionBar > .factionBtn.faction--MEZMAZ.is-active, .factionBar > .factionBtn.faction--MEZMAZ.active, .factionBar > .factionBtn.faction--MEZMAZ[aria-pressed="true"]{ box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 14px 0 -6px #FF4FD8 !important; } #factionBar > .factionBtn.faction--SEPTIX.is-active, #factionBar > .factionBtn.faction--SEPTIX.active, #factionBar > .factionBtn.faction--SEPTIX[aria-pressed="true"], .factionBar > .factionBtn.faction--SEPTIX.is-active, .factionBar > .factionBtn.faction--SEPTIX.active, .factionBar > .factionBtn.faction--SEPTIX[aria-pressed="true"]{ box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 14px 0 -6px #B7F230 !important; } #factionBar > .factionBtn.faction--TYTANZ.is-active, #factionBar > .factionBtn.faction--TYTANZ.active, #factionBar > .factionBtn.faction--TYTANZ[aria-pressed="true"], .factionBar > .factionBtn.faction--TYTANZ.is-active, .factionBar > .factionBtn.faction--TYTANZ.active, .factionBar > .factionBtn.faction--TYTANZ[aria-pressed="true"]{ box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 14px 0 -6px #E39A2F !important; } #factionBar > .factionBtn.faction--JURASIX.is-active, #factionBar > .factionBtn.faction--JURASIX.active, #factionBar > .factionBtn.faction--JURASIX[aria-pressed="true"], .factionBar > .factionBtn.faction--JURASIX.is-active, .factionBar > .factionBtn.faction--JURASIX.active, .factionBar > .factionBtn.faction--JURASIX[aria-pressed="true"]{ box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 14px 0 -6px #7BE05F !important; } #factionBar > .factionBtn.faction--WYLDZ.is-active, #factionBar > .factionBtn.faction--WYLDZ.active, #factionBar > .factionBtn.faction--WYLDZ[aria-pressed="true"], .factionBar > .factionBtn.faction--WYLDZ.is-active, .factionBar > .factionBtn.faction--WYLDZ.active, .factionBar > .factionBtn.faction--WYLDZ[aria-pressed="true"]{ box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 14px 0 -6px #22C06A !important; } #factionBar > .factionBtn.faction--BROOTZ.is-active, #factionBar > .factionBtn.faction--BROOTZ.active, #factionBar > .factionBtn.faction--BROOTZ[aria-pressed="true"], .factionBar > .factionBtn.faction--BROOTZ.is-active, .factionBar > .factionBtn.faction--BROOTZ.active, .factionBar > .factionBtn.faction--BROOTZ[aria-pressed="true"]{ box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 14px 0 -6px #FF5A2A !important; } #factionBar > .factionBtn.faction--BUGZ.is-active, #factionBar > .factionBtn.faction--BUGZ.active, #factionBar > .factionBtn.faction--BUGZ[aria-pressed="true"], .factionBar > .factionBtn.faction--BUGZ.is-active, .factionBar > .factionBtn.faction--BUGZ.active, .factionBar > .factionBtn.faction--BUGZ[aria-pressed="true"]{ box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 14px 0 -6px #62E3C1 !important; } #factionBar > .factionBtn.faction--REEVERZ.is-active, #factionBar > .factionBtn.faction--REEVERZ.active, #factionBar > .factionBtn.faction--REEVERZ[aria-pressed="true"], .factionBar > .factionBtn.faction--REEVERZ.is-active, .factionBar > .factionBtn.faction--REEVERZ.active, .factionBar > .factionBtn.faction--REEVERZ[aria-pressed="true"]{ box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 14px 0 -6px #FF2020 !important; } /* === v41: real DOM underline for active faction button === */ #factionBar, .factionBar, .swarmHeader, .swarmHeaderRow{ overflow: visible !important; } #factionBar > .factionBtn, .factionBar > .factionBtn{ overflow: visible !important; position: relative !important; } #factionBar > .factionBtn .factionUnderline, .factionBar > .factionBtn .factionUnderline{ position: absolute !important; left: 50% !important; bottom: -12px !important; width: 20px !important; height: 4px !important; transform: translateX(-50%) !important; border-radius: 999px !important; pointer-events: none !important; z-index: 120 !important; display: block !important; } #factionBar > .factionBtn.faction--MAGI .factionUnderline, .factionBar > .factionBtn.faction--MAGI .factionUnderline{ background:#A36BFF !important; } #factionBar > .factionBtn.faction--MEXX .factionUnderline, .factionBar > .factionBtn.faction--MEXX .factionUnderline{ background:#53B3FF !important; } #factionBar > .factionBtn.faction--HOLOWZ .factionUnderline, .factionBar > .factionBtn.faction--HOLOWZ .factionUnderline{ background:#4FD8FF !important; } #factionBar > .factionBtn.faction--MEZMAZ .factionUnderline, .factionBar > .factionBtn.faction--MEZMAZ .factionUnderline{ background:#FF4FD8 !important; } #factionBar > .factionBtn.faction--SEPTIX .factionUnderline, .factionBar > .factionBtn.faction--SEPTIX .factionUnderline{ background:#B7F230 !important; } #factionBar > .factionBtn.faction--TYTANZ .factionUnderline, .factionBar > .factionBtn.faction--TYTANZ .factionUnderline{ background:#E39A2F !important; } #factionBar > .factionBtn.faction--JURASIX .factionUnderline, .factionBar > .factionBtn.faction--JURASIX .factionUnderline{ background:#7BE05F !important; } #factionBar > .factionBtn.faction--WYLDZ .factionUnderline, .factionBar > .factionBtn.faction--WYLDZ .factionUnderline{ background:#22C06A !important; } #factionBar > .factionBtn.faction--BROOTZ .factionUnderline, .factionBar > .factionBtn.faction--BROOTZ .factionUnderline{ background:#FF5A2A !important; } #factionBar > .factionBtn.faction--BUGZ .factionUnderline, .factionBar > .factionBtn.faction--BUGZ .factionUnderline{ background:#62E3C1 !important; } #factionBar > .factionBtn.faction--REEVERZ .factionUnderline, .factionBar > .factionBtn.faction--REEVERZ .factionUnderline{ background:#FF2020 !important; } /* === v24: BodLab launch polish + pane top alignment === */ /* Lift the swarm pane so its top line aligns more closely with the Bod panel. */ .swarm{ top: 8px !important; } /* Keep the right panel position that already feels good. */ .panelWrap{ top: 8px !important; } /* Remove the odd rounded focus box / launch chrome when BodLab is activated. */ .buddiUpLabBtn, .buddiUpLabBtn:focus, .buddiUpLabBtn:focus-visible, .buddiUpLabBtn:active{ outline: none !important; -webkit-tap-highlight-color: transparent; } .buddiUpLabBtn:focus-visible{ box-shadow: none !important; } /* Prevent any extra rounded launch overlay from the CTA shimmer layer from reading as a box. */ .buddiUpLabBtn::after, .buddiUpLabBtn:focus-visible::before{ box-shadow: none !important; } /* === v25: remove BuddiUp formation box artifact + reopen pip spacing === */ /* The readiness bloom/charge box reads as a stray rounded panel when slots fill. */ .buddiUp::after, .buddiUp.isFormationReady::before, .buddiUp.isFormationReady::after{ content: none !important; animation: none !important; opacity: 0 !important; box-shadow: none !important; background: none !important; border: 0 !important; } /* === Explore medium-width polish: keep Fold landscape / narrow tablets usable === */ @media (max-width: 1400px){ .panelWrap{ width: clamp(300px, 28vw, 360px); transform: translateX(calc(100% + 20px)); transition: transform .22s ease; pointer-events: none; } .stage.has-open-panel .panelWrap{ transform: translateX(0); pointer-events: auto; } .swarm{ right: 28px; transition: right .22s ease; } .stage.has-open-panel .swarm{ right: calc(clamp(300px, 28vw, 360px) + 34px); } .buddiUp{ right: 16px; } } /* === Explore mobile stack pass: Fold / large-phone portrait === */ @media (max-width: 1100px) and (orientation: portrait) { .stage{ display:flex; flex-direction:column; gap:18px; height:auto; min-height:calc(100vh - 56px); padding:14px; padding-bottom:28px; } .swarm{ position:relative; top:auto; left:auto; right:auto; bottom:auto; width:100%; height:min(70vh, 860px); min-height:560px; margin:0; } .panelWrap{ position:relative; top:auto; right:auto; bottom:auto; width:100%; margin:0; padding-right:0; overflow:visible; } .planetWrap{ display:none; } .swarmHeader{ padding:10px 12px 8px; } .swarmHeaderRow{ display:grid; grid-template-columns: 1fr; align-items:stretch; gap:10px; } .swarmHeaderTools{ width:100%; justify-content:space-between; gap:10px; flex-wrap:wrap; } .swarmRight{ align-items:flex-start; } .swarmZoom{ order:2; } .swarmDiscoveredBubble{ order:1; margin-left:auto; } .swarmField{ top:52px; } .swarmBadgeCorner{ top:106px !important; left:12px !important; } } @media (max-width: 760px) { .stage{ padding:12px; gap:16px; } .swarm{ min-height:500px; height:min(64vh, 720px); } .swarmHeaderTools{ justify-content:flex-start; } .swarmZoom{ transform:scale(.96); transform-origin:left center; } .swarmDiscoveredBubble{ transform:scale(.96); transform-origin:right center; } } /* === Explore mobile fit pass: keep the swarm usable on Fold / large phones === */ @media (max-width: 1100px) and (orientation: portrait) { .stage{ padding: 10px !important; gap: 14px !important; overflow-x: hidden; } .swarm{ width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; height: min(62vh, 760px) !important; min-height: 520px !important; margin: 0 auto !important; } .swarmHeader{ padding: 8px 10px 8px !important; } .swarmHeaderRow{ display: grid !important; grid-template-columns: 1fr auto !important; grid-template-areas: "factions discovered" "zoom zoom" "buddiup buddiup" !important; align-items: center !important; gap: 10px !important; } .swarmKicker{ display:block !important; min-width:0; grid-area: factions; } #factionBar, .factionBar{ display:flex !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 2px 10px 2px !important; max-width: 100%; } #factionBar::-webkit-scrollbar, .factionBar::-webkit-scrollbar{ display:none; } #factionBar .factionBtn{ width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } #factionBar .factionBtn .factionSymbol{ width: 22px !important; height: 22px !important; } .swarmHeaderTools{ grid-area: zoom; width: 100% !important; display:flex !important; justify-content: space-between !important; align-items:center !important; gap: 10px !important; } .swarmZoom{ order: 1; transform: none !important; } .swarmDiscoveredBubble{ grid-area: discovered; position: static !important; order: 2; margin: 0 !important; transform: none !important; justify-self: end; align-self: start; } .buddiUp{ display: grid !important; grid-area: buddiup; position: static !important; width: 100% !important; max-width: none !important; padding: 10px 12px !important; border-radius: 16px !important; grid-template-columns: auto 1fr auto !important; grid-template-areas: "title slots cta" "hint slots sub" !important; align-items: center !important; column-gap: 12px !important; row-gap: 6px !important; margin-top: 2px !important; } .buddiUpTitle{ grid-area: title; text-align: left !important; font-size: 14px !important; white-space: nowrap; } .buddiUpGuide{ grid-area: hint; min-height: 0 !important; text-align: left !important; font-size: 10px !important; line-height: 1.25 !important; max-width: 180px; } .buddiUpSlots{ grid-area: slots; display:flex !important; flex-direction: row !important; justify-content:center !important; gap: 8px !important; } .buddiUpSlot{ width: 58px !important; min-width: 58px !important; aspect-ratio: 1 / 1; border-radius: 14px !important; } .buddiUpSlot .slotLabel{ font-size: 20px !important; left: 8px !important; top: 8px !important; } .buddiUpLabBtn{ grid-area: cta; align-self: center; min-width: 92px; padding: 10px 10px !important; } .buddiUpHint{ grid-area: sub; font-size: 10px !important; line-height: 1.2 !important; text-align: right !important; max-width: 120px; } .swarmBadgeCorner{ top: 146px !important; left: 12px !important; } .swarmField{ top: 150px !important; } } @media (max-width: 760px) and (orientation: portrait) { .swarm{ width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; min-height: 500px !important; height: min(60vh, 680px) !important; } .swarmHeaderRow{ grid-template-columns: 1fr !important; grid-template-areas: "factions" "discovered" "zoom" "buddiup" !important; } .swarmDiscoveredBubble{ justify-self: start; } .swarmHeaderTools{ justify-content: flex-start !important; } .buddiUp{ grid-template-columns: 1fr !important; grid-template-areas: "title" "slots" "cta" "hint" !important; } .buddiUpTitle, .buddiUpGuide, .buddiUpHint, .buddiUpLabBtn{ text-align: center !important; max-width: none; } .buddiUpSlots{ justify-content: flex-start !important; } .swarmBadgeCorner{ top: 204px !important; } .swarmField{ top: 206px !important; } } /* === Z Fold / square-portrait rescue: avoid split canvas with floating right card === */ @media (max-width: 1400px) and (orientation: portrait), (max-width: 1400px) and (max-aspect-ratio: 11/10) { .stage{ display:flex !important; flex-direction:column !important; gap:16px !important; height:auto !important; min-height:calc(100vh - 56px); padding:12px !important; overflow-x:hidden !important; } .swarm{ position:relative !important; inset:auto !important; right:auto !important; bottom:auto !important; width:100% !important; max-width:100% !important; height:min(58vh, 760px) !important; min-height:460px !important; margin:0 !important; } .panelWrap{ position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; width:100% !important; max-width:none !important; transform:none !important; pointer-events:auto !important; margin:0 !important; padding-right:0 !important; overflow:visible !important; } .stage.has-open-panel .swarm{ right:auto !important; } .planetWrap{ display:none !important; } .bodPanel{ width:100% !important; max-width:none !important; } } /* === Fold / near-square rescue layout === When the viewport is tablet-ish or fold-ish (not wide enough for a proper two-column view), stack the Bod panel under the swarm instead of reserving a right dock. This leaves the PC layout alone while fixing square-ish devices like the Z Fold. */ @media (max-width: 1400px) and (max-aspect-ratio: 6/5) { body{ overflow-x: hidden; } .stage{ display: flex !important; flex-direction: column !important; gap: 16px !important; height: auto !important; min-height: calc(100vh - 56px) !important; padding: 12px !important; padding-bottom: 24px !important; } .swarm, .stage.has-open-panel .swarm{ position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; height: min(64vh, 980px) !important; min-height: 560px !important; margin: 0 !important; } .panelWrap, .stage.has-open-panel .panelWrap{ position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-right: 0 !important; transform: none !important; transition: none !important; pointer-events: auto !important; overflow: visible !important; } .bodPanel{ width: min(760px, 100%) !important; margin: 0 auto !important; } .swarmHeaderTools{ flex-wrap: wrap !important; justify-content: space-between !important; } .swarmBadgeCorner{ top: 96px !important; left: 12px !important; } .swarmDiscoveredBubble{ top: 96px !important; right: 12px !important; } } /* === Fold fill-screen pass === Once the topbar no longer forces desktop scaling, make the Explore stage truly edge-to-edge on fold/square devices with tighter side padding and full-width cards. */ @media (max-width: 1100px) and (max-aspect-ratio: 6/5){ main{ width: 100%; } .stage{ width: 100%; max-width: 100%; padding-left: 8px !important; padding-right: 8px !important; } .swarm, .stage.has-open-panel .swarm, .panelWrap, .stage.has-open-panel .panelWrap, .bodPanel{ width: 100% !important; max-width: 100% !important; } } /* === Fold quick-select bar pass === Keep BuddiUp visible on fold / near-square screens, but make it a compact pill tray so it does not cover the swarm play area. */ @media (max-width: 1400px) and (max-aspect-ratio: 6/5) { .stage{ padding-bottom: 104px !important; } .buddiUp{ display: flex !important; position: fixed !important; left: 50% !important; right: auto !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; transform: translateX(-50%) !important; width: min(96vw, 560px) !important; max-width: min(96vw, 560px) !important; margin: 0 !important; padding: 10px 12px !important; border-radius: 20px !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; z-index: 30 !important; background: linear-gradient(180deg, rgba(14,18,28,.90), rgba(10,14,22,.82)) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 16px 34px rgba(0,0,0,.36) !important; backdrop-filter: blur(14px) !important; } .buddiUpTitle, .buddiUpGuide, .buddiUpHint{ display: none !important; } .buddiUpSlots{ display: flex !important; flex-direction: row !important; justify-content: center !important; gap: 8px !important; flex: 0 0 auto !important; } .buddiUpSlot{ width: 54px !important; min-width: 54px !important; max-width: 54px !important; aspect-ratio: 1 / 1; border-radius: 14px !important; } .buddiUpSlot .slotLabel{ font-size: 20px !important; left: 8px !important; top: 8px !important; } .buddiUpLabBtn{ align-self: center; min-width: 110px; margin-left: 4px !important; padding: 11px 14px !important; border-radius: 14px !important; } } /* === Fold inline BuddiUp pass === On fold / near-square screens, move the BuddiUp tray below the swarm so it never covers the bubbles. Desktop keeps the original in-swarm overlay. */ body.foldInlineBuddiUp .stage{ display: block !important; padding-bottom: 18px !important; } body.foldInlineBuddiUp .swarm{ position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 0 16px 0 !important; } body.foldInlineBuddiUp .buddiUp{ position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; margin: 0 0 16px 0 !important; padding: 12px 14px !important; display: grid !important; grid-template-columns: 1fr auto !important; grid-template-areas: 'title title' 'slots lab' 'hint hint'; align-items: center !important; gap: 10px 12px !important; border-radius: 20px !important; background: linear-gradient(180deg, rgba(14,18,28,.90), rgba(10,14,22,.82)) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 16px 34px rgba(0,0,0,.28) !important; backdrop-filter: blur(14px) !important; z-index: 4 !important; } body.foldInlineBuddiUp .buddiUpTitle{ grid-area: title; display: block !important; text-align: left !important; font-size: 14px !important; } body.foldInlineBuddiUp .buddiUpGuide, body.foldInlineBuddiUp .buddiUpHint{ display: block !important; margin: 0 !important; font-size: 12px !important; line-height: 1.25 !important; } body.foldInlineBuddiUp .buddiUpGuide{ display:none !important; } body.foldInlineBuddiUp .buddiUpHint{ grid-area: hint; text-align: left !important; opacity: .82; } body.foldInlineBuddiUp .buddiUpSlots{ grid-area: slots; display: flex !important; flex-direction: row !important; justify-content: flex-start !important; gap: 10px !important; } body.foldInlineBuddiUp .buddiUpSlot{ width: 58px !important; min-width: 58px !important; max-width: 58px !important; aspect-ratio: 1 / 1 !important; border-radius: 14px !important; } body.foldInlineBuddiUp .buddiUpSlot .slotLabel{ font-size: 22px !important; left: 9px !important; top: 8px !important; } body.foldInlineBuddiUp .buddiUpLabBtn{ grid-area: lab; align-self: center !important; min-width: 112px !important; margin: 0 !important; padding: 11px 14px !important; border-radius: 14px !important; } @media (max-width: 700px){ body.foldInlineBuddiUp .buddiUp{ grid-template-columns: 1fr !important; grid-template-areas: 'title' 'slots' 'lab' 'hint'; } body.foldInlineBuddiUp .buddiUpSlots{ justify-content: center !important; } body.foldInlineBuddiUp .buddiUpLabBtn{ width: 100% !important; min-width: 0 !important; } }