/* =========================
   GUILD CARD — CLEAN & SCOPED
   ========================= */

/* Wrapper visibility */
#MageCard{display:none;position:fixed;inset:0;z-index:9999;pointer-events:none}
#MageCard.is-open{display:block;pointer-events:auto}

/* Panel theme variables (no :root pollution) */
#MageCard .mc-panel{
  --w:420px; --w-m:92vw;
  --text:#eef3ff; --sub:#b7c2dd;
  --bd:rgba(255,255,255,.14);
  --pill-bg:rgba(255,255,255,.06);
  --pill-bd:rgba(255,255,255,.18);
  --shadow:-14px 0 34px rgba(0,0,0,.45);
  --from:#7b6ac6; --to:#1b0f32;       /* default arcane */
  --ring1:#e7d6ff; --ring2:#a48fff;
}

/* Themes */
#MageCard .theme-fire   { --from:#ff6a00; --to:#8a1a00; --ring1:#ffd29a; --ring2:#ff8a4c; --pill-bg:rgba(255,138,76,.14); --pill-bd:rgba(255,206,170,.42); }
#MageCard .theme-water  { --from:#0ea5e9; --to:#0b3f66; --ring1:#9ce5ff; --ring2:#64c7ff; --pill-bg:rgba(100,199,255,.16); --pill-bd:rgba(156,229,255,.46); }
#MageCard .theme-metal  { --from:#9aa4ad; --to:#2f3841; --ring1:#e3e7eb; --ring2:#9aa4ad; --pill-bg:rgba(190,198,206,.14); --pill-bd:rgba(227,231,235,.40); }
#MageCard .theme-earth  { --from:#2b6b3f; --to:#102317; --ring1:#a6f0c1; --ring2:#68bf91; --pill-bg:rgba(104,191,145,.16); --pill-bd:rgba(166,240,193,.42); }
#MageCard .theme-air    { --from:#b7e3ff; --to:#385c8a; --ring1:#ffffff; --ring2:#b7e3ff; --pill-bg:rgba(183,227,255,.18); --pill-bd:rgba(255,255,255,.42); }
#MageCard .theme-arcane { --from:#7b6ac6; --to:#1b0f32; --ring1:#e7d6ff; --ring2:#a48fff; --pill-bg:rgba(123,106,198,.20); --pill-bd:rgba(231,214,255,.46); }
#MageCard .theme-bone   { --from:#c7c1b6; --to:#4b4339; --ring1:#fff6e6; --ring2:#c7c1b6; --pill-bg:rgba(199,193,182,.20); --pill-bd:rgba(255,246,230,.45); }

@media (max-width:640px){ #MageCard .mc-panel{ --w:var(--w-m);} }

/* Backdrop */
#MageCard .mc-backdrop{
  position:absolute; inset:0;
  background:radial-gradient(1200px 800px at right 50%, rgba(0,0,0,.55), rgba(0,0,0,.2) 55%, transparent 80%);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
#MageCard.is-open .mc-backdrop{ opacity:1; pointer-events:auto; }

/* Panel */
#MageCard .mc-panel{
  position:absolute; top:0; right:0; height:100%; width:var(--w);
  display:grid; grid-template-rows:auto 1fr auto;
  background:linear-gradient(165deg,var(--from),var(--to));
  color:var(--text); border-left:1px solid var(--bd); box-shadow:var(--shadow);
  transform:translateX(104%); transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
#MageCard.is-open .mc-panel{ transform:translateX(0); }

/* Header */
#MageCard .mc-header{ padding:18px 18px 14px; border-bottom:1px solid var(--bd); }
#MageCard .mc-toprow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#MageCard .mc-title{ font-weight:800; font-size:18px; }
#MageCard .mc-close{ appearance:none; border:0; background:transparent; color:var(--sub); cursor:pointer; font-size:22px; line-height:1; padding:4px; border-radius:8px; }
#MageCard .mc-close:hover{ color:#fff; }

/* Hero block */
#MageCard .mc-hero{ display:grid; justify-items:center; gap:12px; padding:12px 16px 0; }
#MageCard .pfp-square{ position:relative; width:112px; height:112px; border-radius:18px; }
#MageCard .pfp-square img{
  width:100%; height:100%; object-fit:cover; border-radius:18px;
  border:2px solid rgba(255,255,255,.18); position:relative; z-index:2;
}

/* Circular rank rings (placed by JS) */
#MageCard .ring-pos{
  position:absolute; left:0; top:0; width:var(--d); height:var(--d); border-radius:50%; z-index:1;
  --t:6px;
  -webkit-mask: radial-gradient(circle, transparent calc(50% - var(--t)),
    #000 calc(50% - var(--t) + 1px), #000 calc(50% + var(--t) - 1px),
    transparent calc(50% + var(--t)));
          mask: radial-gradient(circle, transparent calc(50% - var(--t)),
    #000 calc(50% - var(--t) + 1px), #000 calc(50% + var(--t) - 1px),
    transparent calc(50% + var(--t)));
  background:conic-gradient(from 0deg, var(--ring1), var(--ring2), var(--ring1));
  filter: drop-shadow(0 0 8px rgba(0,0,0,.35));
  overflow:hidden;
}
#MageCard .ring-pos::after{
  content:""; position:absolute; inset:-20%;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--ring1), white 30%), transparent);
  transform: translateX(-120%); animation: mcShimmer 4.6s linear infinite; opacity:.55;
  -webkit-mask: inherit; mask: inherit;
}
@keyframes mcShimmer{ to { transform: translateX(120%); } }

/* Name + rank line (no "RANK:" label) */
#MageCard .mc-meta{ text-align:center; display:grid; gap:6px; }
#MageCard .mc-name{ font-weight:800; font-size:18px; }
#MageCard .mc-rankline{ font-size:12px; color:var(--sub); letter-spacing:.03em; text-transform:uppercase; }
#MageCard .mc-rankline .dot{ margin:0 6px; opacity:.6; }

/* Token/Badge rows — fixed size like your reference */
#MageCard .mc-bar.imgbar{
  width:100%; max-width:520px;
  height:44px;                 /* adjust here if you want shorter/taller */
  padding:8px 12px;
  gap:10px;
  border-radius:14px;
  background:var(--pill-bg); border:1px solid var(--pill-bd);
  display:flex; align-items:center;
  overflow-x:auto; overflow-y:hidden;
}
#MageCard .mc-bar.imgbar img{
  display:block; width:28px; height:28px;
  object-fit:cover; border-radius:6px; flex:0 0 28px;
  border:1px solid rgba(255,255,255,.15);
}

/* Scrollbars (theme-colored, no track) */
#MageCard{ --scroll-thumb: color-mix(in oklab, var(--ring1), #000 20%); }
#MageCard *::-webkit-scrollbar{ width:10px; height:10px; background:transparent; }
#MageCard *::-webkit-scrollbar-track{ background:transparent; }
#MageCard *::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb); border-radius:999px;
  border:3px solid transparent; background-clip:content-box;
}
#MageCard, #MageCard *{ scrollbar-color: var(--scroll-thumb) transparent; scrollbar-width: thin; }

/* Body + Inventory */
#MageCard .mc-scroll{ overflow:auto; scrollbar-gutter:stable; }
#MageCard .mc-section{ padding:0 18px 16px; --inv-start: 140px; } /* move grid up/down by editing --inv-start */
#MageCard .mc-section h4{ padding-top:var(--inv-start); margin-bottom:12px; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--sub); }

/* Always-visible 3×6 grid (18 boxes) */
#MageCard .mc-inventory{
  --slot-bg:url('/Media/Placeholders/inventory_slot.png'); /* change to your art */
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px;
  margin-bottom:clamp(60px,10vh,120px);
}
#MageCard .mc-slot{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--slot-bg) center/cover no-repeat;
  border:1px solid rgba(255,255,255,.14);
}
#MageCard .mc-slot .item{
  position:absolute;