/* ==========================================================================
   PlayGurus — Challenge feature styles
   Depends on CSS custom properties defined in app.css (:root).
   Do NOT redefine tokens here.
   ========================================================================== */

/* ==========================================================================
   YOUR MATCHUPS PANEL
   ========================================================================== */

.mu-panel {
  background: linear-gradient(135deg, rgba(248,113,113,0.06), rgba(251,146,60,0.04));
  border: 1px solid rgba(248,113,113,0.35);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 14px;
}

.mu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mu-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mu-title .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: chPulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes chPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

/* ==========================================================================
   NEW CHALLENGE BUTTON (inside matchups panel header)
   ========================================================================== */

.new-btn {
  background: linear-gradient(135deg, var(--red), var(--orange));
  color: var(--bg);
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(248,113,113,0.25);
  text-transform: uppercase;
}

/* ==========================================================================
   PRE-LOCK MATCHUPS PANEL (above the leaderboard while contest.status='open')
   ========================================================================== */

.sf-chal-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.sf-chal-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 800;
  color: var(--s500);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.sf-chal-panel-title { display: inline-flex; align-items: center; gap: 8px; color: var(--s700); }
.sf-chal-panel-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: rgba(248,113,113,0.15);
  color: var(--red);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}
.sf-chal-panel-lock {
  font-size: 11px;
  font-weight: 700;
  color: var(--orange);
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.sf-chal-panel-list { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 640px) {
  .sf-chal-panel { padding: 10px; border-radius: 12px; }
  .sf-chal-panel-head { font-size: 10px; letter-spacing: 1px; }
}

/* ==========================================================================
   MATCHUP CARD (single challenge row — compact one-row layout)
   Cards collapse to a 4-column grid: identity | stake | status | actions.
   On mobile (≤640px) they wrap to two rows: identity + stake on top,
   status + actions below.
   ========================================================================== */

.mc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s ease;
}
.mc:hover { border-color: rgba(248,113,113,0.45); }
.mc.pending  { border-color: rgba(251,146,60,0.28); }
.mc.accepted { border-color: rgba(248,113,113,0.28); }
.mc.incoming {
  border-color: rgba(251,146,60,0.45);
  background: linear-gradient(90deg, rgba(251,146,60,0.06), transparent 40%);
}

.mc-people {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mc-name {
  font-weight: 700;
  color: var(--s800);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.mc-name strong { font-weight: 800; color: var(--s900); }
.mc-name .you {
  color: var(--s500);
  font-weight: 600;
  margin-left: 4px;
  font-size: 11px;
}

.mc-vs {
  color: var(--s400);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.mc-stake {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  color: var(--gold);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.mc-stake svg { flex-shrink: 0; }

.mc-status {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mc-status.pending  { background: rgba(251,146,60,0.14); color: var(--orange); border: 1px solid rgba(251,146,60,0.30); }
.mc-status.incoming { background: rgba(251,146,60,0.18); color: var(--orange); border: 1px solid var(--orange); }
.mc-status.accepted { background: rgba(248,113,113,0.14); color: var(--red);    border: 1px solid rgba(248,113,113,0.30); }

.mc-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mc-btn {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--s500);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.mc-btn:hover { color: var(--s800); border-color: var(--s500); }
.mc-btn:disabled { opacity: .5; cursor: wait; }
.mc-btn.accept {
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #000;
  border-color: transparent;
  font-weight: 800;
}
.mc-btn.accept:hover { filter: brightness(1.1); border-color: transparent; }

.mc-lock-warn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .mc {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 6px;
    column-gap: 10px;
    padding: 8px 10px;
  }
  .mc-people    { grid-column: 1; grid-row: 1; }
  .mc-stake     { grid-column: 2; grid-row: 1; justify-self: end; }
  .mc-status    { grid-column: 1; grid-row: 2; justify-self: start; }
  .mc-actions   { grid-column: 2; grid-row: 2; justify-self: end; }
  .mc-lock-warn { grid-column: 2; grid-row: 2; justify-self: end; }
  .mc-name      { max-width: 100px; }
}

/* ==========================================================================
   CHALLENGE CTA (leaderboard header button)
   ========================================================================== */

.challenge-cta {
  background: linear-gradient(135deg, var(--red), var(--orange));
  color: var(--bg);
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(248,113,113,0.25);
  text-transform: uppercase;
}

/* ==========================================================================
   COMPOSER MODAL
   ========================================================================== */

.composer {
  max-width: 580px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}

.comp-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.comp-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--s900);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comp-close {
  background: none;
  border: none;
  color: var(--s400);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.comp-body { padding: 20px; }

.field-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--s400);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Opponent slot */
.opp-slot {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.opp-slot:hover { border-color: var(--red); }
.opp-slot.empty { color: var(--s400); }
.opp-slot.filled { border-style: solid; border-color: var(--emerald); }

.opp-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.opp-info { flex: 1; min-width: 0; }

.opp-name {
  font-weight: 800;
  color: var(--s900);
  font-size: 14px;
}

.opp-meta {
  font-size: 11px;
  color: var(--s500);
  margin-top: 2px;
}

.opp-rank-pill {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 800;
  color: #f0b429; /* coin-gold */
  white-space: nowrap;
}

/* Stake tier buttons */
.stake-tiers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.stake-tier {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--s700);
  border-radius: 10px;
  padding: 10px 4px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: all 0.15s ease;
}

.stake-tier:hover { border-color: #f0b429; }

.stake-tier.selected,
.stake-tier.sel {
  background: rgba(240,180,41,0.12);
  border-color: #f0b429;
  color: #f0b429;
  box-shadow: 0 0 0 1px #f0b429 inset;
}

.stake-custom {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stake-custom input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--s900);
  font-size: 14px;
  font-weight: 700;
  outline: none;
  font-variant-numeric: tabular-nums;
  padding: 0;
  box-shadow: none;
}

.stake-bal {
  font-size: 11px;
  color: var(--s400);
  margin-top: 6px;
  text-align: right;
}

.stake-bal strong { color: var(--emerald); }

/* Summary strip */
.summary {
  background: linear-gradient(135deg, rgba(248,113,113,0.08), rgba(251,146,60,0.08));
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0 0 0;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 0;
  font-size: 12px;
  color: var(--s500);
}

.summary-row .val {
  color: var(--s900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.summary-row.win { color: var(--emerald); font-size: 13px; }
.summary-row.win .val { color: var(--emerald); font-weight: 800; }

/* Composer footer */
.comp-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.comp-btn {
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
}

.comp-btn.cancel {
  background: var(--surface2);
  color: var(--s700);
  border: 1px solid var(--border);
}

.comp-btn.send {
  background: linear-gradient(135deg, var(--red) 0%, var(--orange) 100%);
  color: var(--bg);
  text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(248,113,113,0.3);
}

.comp-btn.send:disabled {
  background: var(--border);
  color: var(--s400);
  box-shadow: none;
  cursor: not-allowed;
}

/* ==========================================================================
   OPPONENT PICKER (dropdown below search)
   ========================================================================== */

.picker-search {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  display: flex;
  align-items: center;
}

.picker-search-icon {
  padding: 0 14px;
  color: var(--s400);
}

.picker-input {
  background: transparent;
  border: none;
  color: var(--s900);
  font-size: 13px;
  width: 100%;
  padding: 12px 16px 12px 0;
  outline: none;
  box-shadow: none;
}

.picker-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
}

.picker-list.open {
  max-height: 240px;
  overflow: auto;
}

.picker-row {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--surface2);
}

.picker-row:last-child { border-bottom: none; }
.picker-row:hover { background: var(--surface2); }

.picker-row .pa {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.picker-name {
  font-weight: 700;
  color: var(--s900);
  font-size: 13px;
}

.picker-rank {
  color: #f0b429;
  font-weight: 800;
  font-size: 12px;
  margin-right: 6px;
  min-width: 24px;
}

/* ==========================================================================
   SLAP ANIMATION (Style B — chicken silhouette)
   ========================================================================== */

.slap-stage {
  position: relative;
  aspect-ratio: 1.05;
  background: radial-gradient(ellipse at center, var(--surface2) 0%, var(--bg) 80%);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slap-underlay {
  text-align: center;
  z-index: 1;
  padding: 16px;
  animation: chShake 2.4s linear infinite;
}

.slap-underlay .from {
  font-size: 10px;
  color: var(--red);
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.slap-underlay .av {
  width: 56px;
  height: 56px;
  margin: 8px auto 6px;
  border: 2px solid var(--red);
}

.slap-underlay .nm {
  font-size: 18px;
  font-weight: 800;
  color: var(--s900);
  margin-bottom: 6px;
}

.slap-underlay .stake {
  font-size: 13px;
  color: #f0b429;
  font-weight: 700;
}

@keyframes chShake {
  0%, 44%  { transform: translate(0, 0); }
  46%      { transform: translate(-6px, -2px); }
  47%      { transform: translate(6px, 2px); }
  48%      { transform: translate(-4px, 1px); }
  49%      { transform: translate(4px, -1px); }
  50%      { transform: translate(0, 0); }
  100%     { transform: translate(0, 0); }
}

.slap-glove {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 50px;
  transform: translate(-50%, -50%) scale(0);
  filter: drop-shadow(0 0 16px var(--red));
  animation: chGz 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes chGz {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg);    opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(0.3) rotate(-30deg); opacity: 0.5; }
  45%  { transform: translate(-50%, -50%) scale(7) rotate(-30deg);   opacity: 1; }
  50%  { transform: translate(-50%, -50%) scale(7) rotate(-30deg);   opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(0) rotate(0deg);    opacity: 0; }
}

.slap-flash {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  animation: chFl 2.4s linear infinite;
}

@keyframes chFl {
  0%, 44%  { opacity: 0; }
  45%      { opacity: 1; }
  48%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* Chicken silhouette (Style B) */
.slap-chick {
  position: absolute;
  right: -100px;
  top: 0;
  bottom: 0;
  width: 100px;
  font-size: 100px;
  opacity: 0.18;
  display: flex;
  align-items: center;
  animation: chCk 2.4s ease-in-out infinite;
}

@keyframes chCk {
  0%   { right: -100px; opacity: 0; }
  20%  { right: -100px; opacity: 0; }
  50%  { right: -20px;  opacity: 0.18; }
  80%  { right: 60%;    opacity: 0; }
  100% { right: 60%;    opacity: 0; }
}

/* ==========================================================================
   SETTLE CARD (victory / defeat result)
   ========================================================================== */

.settle-card {
  background: var(--surface);
  border: 1px solid var(--emerald);
  border-radius: 10px;
  overflow: hidden;
}

.settle-banner {
  padding: 14px;
  text-align: center;
  background: linear-gradient(180deg, rgba(52,211,153,0.16), transparent);
  position: relative;
  overflow: hidden;
}

.settle-verdict {
  font-family: Impact, sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--emerald);
  text-shadow: 3px 3px 0 rgba(0,0,0,0.4);
  -webkit-text-stroke: 1.5px var(--bg);
}

.settle-sub {
  font-size: 9px;
  color: var(--s400);
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-top: 2px;
}

.settle-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  padding: 12px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.settle-side { text-align: center; }

.settle-side .av {
  width: 44px;
  height: 44px;
  margin: 0 auto 6px;
  border: 3px solid var(--border);
  position: relative;
}

.settle-side.win .av {
  border-color: var(--emerald);
  box-shadow: 0 0 16px rgba(52,211,153,0.4);
}

.settle-side.lose .av { opacity: 0.55; }

.settle-side .crown {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
}

.settle-side .nm {
  font-weight: 800;
  color: var(--s900);
  font-size: 11px;
}

.settle-side .fp {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--s900);
}

.settle-side.win .fp  { color: var(--emerald); }
.settle-side.lose .fp { color: var(--s500); }

.settle-side .fpl {
  font-size: 8px;
  color: var(--s400);
  font-weight: 800;
  letter-spacing: 1px;
}

.settle-vs {
  font-family: Impact, sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: var(--s400);
  align-self: center;
}

.settle-pot {
  padding: 12px;
  text-align: center;
  background: linear-gradient(0deg, rgba(52,211,153,0.08), transparent);
}

.settle-amt {
  font-size: 24px;
  font-weight: 900;
  color: var(--emerald);
  font-variant-numeric: tabular-nums;
}

.settle-amt-sub {
  font-size: 10px;
  color: var(--s500);
  margin-top: 2px;
}

/* Coin burst animation */
.coin-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.coin-burst .c {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 14px;
  animation: chCf 1.6s ease-out infinite;
}

.coin-burst .c:nth-child(1) { animation-delay: 0s;    --tx: -80px; --ty: -40px; }
.coin-burst .c:nth-child(2) { animation-delay: 0.15s; --tx: 80px;  --ty: -50px; }
.coin-burst .c:nth-child(3) { animation-delay: 0.3s;  --tx: -60px; --ty: 30px; }
.coin-burst .c:nth-child(4) { animation-delay: 0.45s; --tx: 70px;  --ty: 40px; }

@keyframes chCf {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.5); opacity: 0; }
}

/* coin-spin alias kept for forward compat */
@keyframes coin-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* ==========================================================================
   AVATAR GRADIENT CLASSES  (.av-1 through .av-10)
   ========================================================================== */

.av-1  { background: linear-gradient(135deg, #34d399, #60a5fa); }
.av-2  { background: linear-gradient(135deg, #f87171, #fb923c); }
.av-3  { background: linear-gradient(135deg, #60a5fa, #a78bfa); }
.av-4  { background: linear-gradient(135deg, #fb923c, #f0b429); }
.av-5  { background: linear-gradient(135deg, #a78bfa, #f87171); }
.av-6  { background: linear-gradient(135deg, #34d399, #f0b429); }
.av-7  { background: linear-gradient(135deg, #60a5fa, #34d399); }
.av-8  { background: linear-gradient(135deg, #f87171, #a78bfa); }
.av-9  { background: linear-gradient(135deg, #fb923c, #60a5fa); }
.av-10 { background: linear-gradient(135deg, #f0b429, #a78bfa); }

/* === Glove chip on leaderboard rows (Variant C — accepted only) === */
.sf-glove-chip-wrap {
  position: relative;
  margin-left: 8px;
  display: inline-block;
  vertical-align: middle;
}
/* Inside the leaderboard name-block flex line: drop the margin (gap
   already handles spacing) and don't let the pill shrink on tight rows. */
[data-sf-name-block] > .sf-glove-chip-wrap {
  margin-left: 0;
  flex-shrink: 0;
}
.sf-glove-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgba(248,113,113,0.10);
  border: 1px solid rgba(248,113,113,0.40);
  color: #f87171;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.sf-glove-chip:hover { background: rgba(248,113,113,0.18); }
.sf-glove-chip .x { color: var(--s500, #8b90b0); font-weight: 700; margin-right: 1px; }
.sf-glove-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface, #13151d);
  border: 1px solid var(--border, #2a2d3d);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  padding: 10px 12px;
  min-width: 240px;
  max-width: 320px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 30;
}
.sf-glove-chip-wrap:hover .sf-glove-popover,
.sf-glove-chip-wrap.open .sf-glove-popover {
  opacity: 1;
  pointer-events: auto;
}
.sf-glove-popover::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border, #2a2d3d);
}
.sf-glove-popover .ttl {
  font-size: 9px;
  font-weight: 800;
  color: var(--s500, #8b90b0);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.sf-glove-popover .item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--surface2, #1a1d28);
}
.sf-glove-popover .item:last-child { border-bottom: none; }
.sf-glove-popover .item .pa {
  width: 22px; height: 22px; border-radius: 50%;
  flex-shrink: 0;
}
.sf-glove-popover .item .nm {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--s900, #eef0ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-glove-popover .item .stake {
  font-size: 11px;
  font-weight: 800;
  color: #f0b429;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .sf-glove-popover {
    min-width: 200px;
    max-width: calc(100vw - 24px);
    left: auto; right: 0;
    transform: none;
  }
  .sf-glove-popover::after { right: 16px; left: auto; transform: none; }
}

/* Notification deep-link highlight — pulses the targeted matchup card
   for a couple seconds so the user sees what they were notified about. */
@keyframes mc-glow {
  0%   { box-shadow: 0 0 0 0 rgba(248,113,113,0.55); border-color: rgba(248,113,113,0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(248,113,113,0.0);  border-color: rgba(248,113,113,0.7); }
  100% { box-shadow: 0 0 0 0 rgba(248,113,113,0);     border-color: var(--border, #2a2d3d); }
}
.mc.mc-highlight {
  animation: mc-glow 2.2s ease-out;
}