/* ============================================================ BATTLE MVP - social action menu (player row popover) Rendered into , NOT into the sidebar: .rsb-inner has overflow:hidden and would clip it. Position is fixed and computed from the anchor row rect. Visual language mirrors .bmHeader__dropdown so the sidebar and the header profile menu read as one system. Colours come from theme tokens only - the light theme needs no extra rules. ============================================================ */ .smx{ position:fixed; z-index:1200; min-width:214px; max-width:240px; padding:0 0 4px; background:var(--bm-hdr-drop); border:1px solid var(--bm-acc-glow); border-radius:12px; overflow:hidden; box-shadow:0 14px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03); animation:smxIn .15s ease; } .smx[hidden]{display:none} /* Accent hairline - same device as .rsb-inner::before */ .smx::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--bm-acc),transparent); opacity:.55; } @keyframes smxIn{ from{opacity:0;transform:translateX(6px) scale(.98)} to {opacity:1;transform:translateX(0) scale(1)} } /* ---- header ------------------------------------------------ */ .smx-head{display:flex;align-items:center;gap:9px;padding:12px 13px 10px} .smx-av{width:34px;height:34px;border-radius:9px;object-fit:cover;flex-shrink:0; border:1px solid var(--bm-acc-bdr);display:block;background:var(--bm-w1)} .smx-id{display:flex;flex-direction:column;gap:2px;min-width:0} .smx-nick{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--bm-tx); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .smx-sub{font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--bm-mu)} .smx-sub b{font-weight:800;font-family:'Rajdhani',sans-serif;font-size:11px} .smx-div{height:1px;background:var(--bm-l2);margin:2px 0} /* ---- items ------------------------------------------------- */ .smx-item{ display:flex;align-items:center;gap:9px;width:100%; padding:9px 13px; font-size:11.5px;font-weight:700;letter-spacing:.02em; color:var(--bm-mu);text-decoration:none; background:none;border:0;text-align:left;cursor:pointer; font-family:inherit; transition:background .12s ease,color .12s ease,padding-left .12s ease; } .smx-item .ti{font-size:15px;width:16px;flex-shrink:0;color:var(--bm-mu2); transition:color .12s ease} .smx-item:hover{background:var(--bm-acc-dim);color:var(--bm-tx);padding-left:16px} .smx-item:hover .ti{color:var(--bm-acc-ink)} .smx-item:focus-visible{outline:1px solid var(--bm-acc-bdr);outline-offset:-1px} .smx-item.is-accent{color:var(--bm-acc-ink)} .smx-item.is-accent .ti{color:var(--bm-acc-ink)} .smx-item.is-danger{color:#ff6b6b} .smx-item.is-danger .ti{color:#ff6b6b} .smx-item.is-danger:hover{background:rgba(255,80,80,.08);color:#ff8b8b} .smx-item.is-disabled{cursor:default;opacity:.42} .smx-item.is-disabled:hover{background:none;color:var(--bm-mu);padding-left:13px} .smx-item.is-disabled:hover .ti{color:var(--bm-mu2)} .smx-item .smx-hint{margin-left:auto;font-size:8px;font-weight:800; letter-spacing:.06em;color:var(--bm-mu2);text-transform:uppercase} .smx-item[data-busy]{pointer-events:none;opacity:.5} /* ---- states ------------------------------------------------ */ .smx-note{padding:9px 13px;font-size:10px;font-weight:700;color:var(--bm-mu2); letter-spacing:.04em} .smx-note.is-err{color:#ff6b6b} .smx-note.is-ok{color:var(--bm-acc-ink)} /* Row that owns the open menu */ .rsb-player.is-smx-open{background:var(--bm-acc-dim)} @media (prefers-reduced-motion:reduce){ .smx{animation:none} .smx-item{transition:none} }