/* =============================================================================
   MGM Social 1.4.0 — community profile, Friends and Recruit a Friend.
   Loads after mgm-guilds.css and reuses its tokens (.mgg), buttons, chips,
   crest, empty states and the reveal/ambient engine in mgm-guilds.js.

   Motion: one-shot reveals and bar/ring fills everywhere; endless loops
   (orbit drift, step pulse, invite motes) only on html.mgfx-full while the
   element is on screen (.mgg-anim).
   ============================================================================= */

.mgs { --mgs-ring: 6px; }
.mgs .mgg-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.mgs-hero-art { display: flex; align-items: center; justify-content: center; }

/* ── Player card ───────────────────────────────────────────────────────────── */
.mgs-card {
    --rc: #e8c96b;
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; align-items: center;
    margin: 0 0 14px; padding: 26px 30px;
    border: 1px solid var(--g-line); border-radius: 20px;
    background: linear-gradient(135deg, rgba(27, 21, 53, .96), rgba(16, 16, 30, .96));
    box-shadow: 0 12px 44px rgba(0, 0, 0, .45);
}
.mgs-card > * { position: relative; }
.mgs-card-glow { position: absolute; inset: -40% 55% 40% -20%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%); }
.mgs-avatar { position: relative; width: 148px; height: 148px; flex: none; display: grid; place-items: center; }
.mgs-avatar img { width: 118px; height: 118px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(10, 10, 20, .9); box-shadow: 0 6px 20px rgba(0, 0, 0, .55); }
.mgs-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mgs-ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.mgs-ring-track { stroke: rgba(255, 255, 255, .08); }
.mgs-ring-fill { stroke: var(--rc); stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s cubic-bezier(.22, .8, .3, 1); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rc) 55%, transparent)); }
.mgs-avatar.is-filled .mgs-ring-fill { stroke-dashoffset: calc(100 - var(--p, 0)); }
.mgs-rank-chip { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px; border-radius: 999px; background: var(--rc); color: #15100a; font-size: .78rem; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.mgs-rank-chip img { width: 16px; height: 16px; border-radius: 0; border: 0; box-shadow: none; }
.mgs-card-id { min-width: 0; }
.mgs-card-id h1 { margin: 0; color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; overflow-wrap: anywhere; }
.mgs-title-badge { display: inline-block; margin-top: 8px; padding: 3px 12px; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--rc) 14%, transparent); color: var(--rc); font-size: .82rem; font-weight: 700; }
.mgs-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; color: var(--g-muted); font-size: .95rem; }
.mgs-meta span { display: inline-flex; align-items: center; gap: 6px; }
.mgs-rank-title { color: var(--rc) !important; font-weight: 700; }
.mgs-xp { margin-top: 14px; max-width: 520px; }
.mgs-xpbar { position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.mgs-xpbar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 60%, #000), var(--rc)); transition: width 1.1s cubic-bezier(.22, .8, .3, 1); }
.mgs-xpbar.is-filled i { width: calc(var(--p, 0) * 1%); }
.mgs-xp-text { margin-top: 7px; color: var(--g-soft); font-size: .95rem; }
.mgs-xp-text b { color: #fff; }
.mgs-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mgs-card-actions .user-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mgs-friend-seal { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid rgba(34, 197, 94, .45); border-radius: 999px; background: rgba(34, 197, 94, .12); color: #86efac; font-weight: 700; font-size: .9rem; }
.mgs-shards { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 22px; border: 1px solid rgba(232, 201, 107, .3); border-radius: 16px; background: rgba(10, 10, 20, .5); text-align: center; }
.mgs-shard-glyph svg { width: 40px; height: 48px; display: block; }
.mgs-shard-text { display: flex; flex-direction: column; }
.mgs-shard-text i { color: var(--g-muted); font-size: .74rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.mgs-shard-text b { color: var(--g-gold2); font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mgs-shard-text small { color: var(--g-muted); font-size: .8rem; }
.mgs-card--sm { padding: 18px 20px; gap: 18px; }
.mgs-card--sm .mgs-avatar { width: 104px; height: 104px; }
.mgs-card--sm .mgs-avatar img { width: 82px; height: 82px; }

/* ── Stat tiles ────────────────────────────────────────────────────────────── */
.mgs-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.mgs-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mgs-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mgs-stats > * { display: block; padding: 13px 16px; border: 1px solid rgba(232, 201, 107, .16); border-radius: 12px; background: rgba(20, 20, 38, .9); text-decoration: none !important; color: inherit; transition: border-color .2s, transform .15s; }
.mgs-stats a:hover { border-color: var(--g-line-strong); transform: translateY(-2px); }
.mgs-stats dt { display: flex; align-items: center; gap: 6px; color: var(--g-muted); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mgs-stats dt .mgg-ico { width: 1em; height: 1em; color: var(--g-gold); }
.mgs-stats dd { margin: 2px 0 0; color: #fff; font-size: 1.7rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* ── Diagrams ──────────────────────────────────────────────────────────────── */
.mgs-dg { margin: 0; }
.mgs-dg figcaption { margin-top: 14px; color: var(--g-muted); font-size: .92rem; text-align: center; }

/* Step rail */
.mgs-steps { position: relative; }
.mgs-steps ol { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mgs-steps li { position: relative; margin: 0; padding: 26px 18px 20px; border: 1px solid rgba(232, 201, 107, .18); border-radius: 16px; background: linear-gradient(180deg, #1b1a33, #141428); text-align: center; transition: opacity .55s ease var(--d, 0s), translate .55s ease var(--d, 0s), border-color .2s, transform .2s; }
.mgs-steps li:hover { border-color: rgba(232, 201, 107, .45); transform: translateY(-3px); }
.mgs-step-dot { position: relative; display: inline-grid; place-items: center; width: 62px; height: 62px; margin-bottom: 12px; border: 1px solid rgba(232, 201, 107, .38); border-radius: 50%; color: var(--g-gold); background: radial-gradient(circle, rgba(232, 201, 107, .2), rgba(232, 201, 107, .03)) #17162c; }
.mgs-step-dot .mgg-ico { width: 26px; height: 26px; }
.mgs-step-dot b { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #d8b85a, #f0d47b); color: #1b1407; font-size: .78rem; font-weight: 800; }
.mgs-steps h3 { margin: 0 0 6px; color: #fff; font-size: 1.12rem; }
.mgs-steps p { margin: 0; color: var(--g-soft); font-size: .97rem; }
.mgs-steps-rail { position: absolute; top: 57px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, rgba(232, 201, 107, .45), transparent); overflow: hidden; }
.mgs-pulse { position: absolute; top: -3px; left: 0; width: 60px; height: 8px; border-radius: 999px; background: radial-gradient(ellipse, rgba(240, 212, 123, .95), transparent 70%); opacity: 0; }

/* Orbit */
.mgs-orbit-panel { padding: 26px 28px; }
.mgs-orbit-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; align-items: center; }
.mgs-orbit-copy h2 { margin: 0 0 10px; color: #fff; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.2; }
.mgs-orbit-copy p { margin: 0 0 14px; color: var(--g-soft); }
.mgs-links { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mgs-links li { margin: 0; }
.mgs-links a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px 14px; border: 1px solid rgba(232, 201, 107, .14); border-radius: 12px; background: rgba(10, 10, 20, .5); color: var(--g-text) !important; text-decoration: none !important; transition: border-color .2s, transform .2s; }
.mgs-links a:hover { border-color: var(--g-line-strong); transform: translateX(3px); }
.mgs-links .mgg-ico { grid-row: span 2; width: 22px; height: 22px; color: var(--g-gold); }
.mgs-links b { color: #fff; }
.mgs-links i { color: var(--g-muted); font-size: .86rem; font-style: normal; }
.mgs-orbit-empty { margin: 0; }

.mgs-orbit-stage { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; }
.mgs-orbit-ring { position: absolute; inset: 12%; border: 1px dashed rgba(232, 201, 107, .3); border-radius: 50%; }
.mgs-orbit-ring--2 { inset: 30%; border-style: solid; border-color: rgba(232, 201, 107, .12); background: radial-gradient(circle, rgba(232, 201, 107, .08), transparent 70%); }
.mgs-orbit-core { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 50%; border: 1px solid rgba(232, 201, 107, .4); background: rgba(12, 12, 24, .92); text-align: center; box-shadow: 0 0 30px rgba(232, 201, 107, .12); }
.mgs-orbit-core img { width: 46%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid rgba(232, 201, 107, .6); }
.mgs-orbit-core b { color: #fff; font-size: .86rem; }
.mgs-orbit-core small { color: var(--g-muted); font-size: .74rem; }
.mgs-orbit-node { position: absolute; left: 50%; top: 50%; width: 30%; margin: -7% 0 0 -15%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border: 1px solid rgba(232, 201, 107, .25); border-radius: 12px; background: rgba(14, 14, 28, .92); text-align: center; transform: rotate(calc(var(--i) * (360deg / var(--n)) - 90deg)) translate(145%) rotate(calc(var(--i) * (-360deg / var(--n)) + 90deg)); }
.mgs-orbit-node img { width: 84%; height: 30px; object-fit: contain; }
.mgs-orbit-node b { color: #fff; font-size: .78rem; line-height: 1.15; }
.mgs-orbit-node i { color: var(--g-muted); font-size: .7rem; font-style: normal; }
.mgs-lane { position: absolute; left: 50%; top: 50%; width: 30%; height: 2px; transform-origin: 0 50%; transform: rotate(calc(var(--i) * (360deg / var(--n)) - 90deg)) translateX(16%); background: linear-gradient(90deg, rgba(232, 201, 107, .05), rgba(232, 201, 107, .4)); overflow: hidden; }
.mgs-lane i { position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #f0d47b; opacity: 0; }

/* Friend constellation */
.mgs-constellation { position: relative; width: min(100%, 330px); aspect-ratio: 1; margin: 0 auto; }
.mgs-con-ring { position: absolute; inset: 14%; border: 1px dashed rgba(232, 201, 107, .28); border-radius: 50%; }
.mgs-con-core { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(232, 201, 107, .6); overflow: hidden; background: #14142a; box-shadow: 0 0 26px rgba(232, 201, 107, .18); }
.mgs-con-core img { width: 100%; height: 100%; object-fit: cover; }
.mgs-con-node { position: absolute; left: 50%; top: 50%; width: 21%; aspect-ratio: 1; margin: -10.5% 0 0 -10.5%; border-radius: 50%; overflow: hidden; border: 2px solid rgba(232, 201, 107, .35); background: #11112099; transform: rotate(calc(var(--i) * (360deg / var(--n)) - 90deg)) translate(175%) rotate(calc(var(--i) * (-360deg / var(--n)) + 90deg)); }
.mgs-con-node img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgs-con-node.is-empty { border-style: dashed; border-color: rgba(232, 201, 107, .18); background: rgba(255, 255, 255, .03); }

/* ── People rows ───────────────────────────────────────────────────────────── */
.mgs-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.mgs-people--rows { grid-template-columns: 1fr; }
.mgs-person, .mgs-person.mgm-friend-card, .mgm-search-results .mgm-user-row {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0;
    border: 1px solid rgba(232, 201, 107, .14); border-radius: 14px; background: rgba(10, 10, 20, .45);
    transition: opacity .55s ease var(--d, 0s), translate .55s ease var(--d, 0s), border-color .2s, transform .2s;
    text-align: left;
}
.mgs-person:hover, .mgm-search-results .mgm-user-row:hover { border-color: rgba(232, 201, 107, .4); }
.mgs-person-av { position: relative; flex: none; display: block; }
.mgs-person .mgs-person-av img { width: 56px; height: 56px; margin: 0; display: block; border-radius: 50%; object-fit: cover; border: 2px solid rgba(232, 201, 107, .25); }
.mgs-person-rank { position: absolute; right: -4px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--rc, #8b93a6); color: #12100a; font-size: .74rem; font-weight: 800; border: 2px solid #12122a; }
.mgs-person-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mgs-person-name { color: #fff !important; font-size: 1.05rem; font-weight: 700; text-decoration: none !important; }
.mgs-person-name:hover { color: var(--g-gold2) !important; }
.mgs-person-title { color: var(--rc, var(--g-muted)); font-size: .82rem; font-weight: 700; }
.mgs-person-sub { display: flex; align-items: center; gap: 6px; color: var(--g-muted); font-size: .86rem; }
.mgs-person-sub .mgg-ico { width: 1em; height: 1em; }
.mgs-person-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex: none; }
.mgs-person .mgg-chips { margin-top: 2px; }
.mgs-shared { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.mgs-shared-crests { display: inline-flex; }
.mgs-shared-crests a { margin-right: -8px; }
.mgs-shared em { color: var(--g-muted); font-size: .82rem; font-style: normal; margin-left: 10px; }
.mgs-person--req { border-color: rgba(232, 201, 107, .35); background: rgba(232, 201, 107, .05); }
/* Card mode (the friends grid): actions drop to their own line so the world
   chips get the full width of the card. */
.mgs-people:not(.mgs-people--rows) .mgs-person { flex-wrap: wrap; align-items: flex-start; }
.mgs-people:not(.mgs-people--rows) .mgs-person-av { margin-top: 2px; }
.mgs-people:not(.mgs-people--rows) .mgs-person-actions { flex-basis: 100%; justify-content: flex-start; margin-top: 2px; padding-left: 70px; }

/* Find players */
.mgs-find .mgg-search { margin-top: 4px; }
.mgs-results { display: grid; gap: 8px; margin-top: 12px; }
.mgm-search-results .mgm-user-row .mgm-user-info { flex: 1; min-width: 0; }
.mgm-search-results .mgm-user-row .name a { color: #fff !important; font-weight: 700; }
.mgm-search-results .mgm-user-row .sub { color: var(--g-muted); font-size: .85rem; }
.mgs-filter { margin-bottom: 12px; }
.mgs-tabs .mgm-tabs { gap: 4px; }
.mgs-tabs .mgm-tab-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; padding: 13px 16px; }
.mgs-suggest { margin-top: 20px; }

/* ── Recruit a friend ──────────────────────────────────────────────────────── */
.mgs-invite-lead { margin: 0 0 14px; color: var(--g-soft); }
.mgs-linkbox { display: flex; flex-wrap: wrap; gap: 10px; }
.mgs-linkbox .mgm-input { flex: 1 1 320px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .98rem; }
.mgs-codebox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding: 16px 18px; border: 1px dashed rgba(232, 201, 107, .4); border-radius: 14px; background: rgba(232, 201, 107, .05); }
.mgs-code-label { color: var(--g-gold); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mgs-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.5rem; font-weight: 800; letter-spacing: .18em; color: #fff; }
.mgs-code-hint { flex: 1 1 100%; color: var(--g-muted); font-size: .88rem; }
.mgs-art { display: block; width: 100%; max-width: 400px; height: auto; }
.mgs-art-card { transform-box: fill-box; transform-origin: center; }

.mgs-ladder { position: relative; display: flex; flex-direction: column; gap: 12px; }
.mgs-ladder-rail { position: absolute; left: 34px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mgs-ladder-fill { position: absolute; inset: 0 0 auto 0; height: 0; border-radius: 3px; background: linear-gradient(180deg, #f0d47b, #c9a83e); transition: height 1.1s cubic-bezier(.22, .8, .3, 1); }
.mgs-ladder-fill.is-filled { height: calc(var(--p, 0) * 1%); }
.mgs-tier { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid rgba(232, 201, 107, .16); border-radius: 14px; background: rgba(10, 10, 20, .45); transition: opacity .55s ease var(--d, 0s), translate .55s ease var(--d, 0s), border-color .2s; }
.mgs-tier-mark { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; border: 2px solid rgba(232, 201, 107, .25); background: #14142a; text-align: center; }
.mgs-tier-mark b { color: #fff; font-size: 1.4rem; line-height: 1; }
.mgs-tier-mark i { color: var(--g-muted); font-size: .66rem; font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
.mgs-tier-body { flex: 1; min-width: 0; }
.mgs-tier-body h3 { margin: 0 0 4px; color: #fff; font-size: 1.1rem; }
.mgs-tier-body p { margin: 0 0 6px; color: var(--g-soft); font-size: .95rem; }
.mgs-reward-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border: 1px solid rgba(232, 201, 107, .35); border-radius: 999px; background: rgba(232, 201, 107, .1); color: var(--g-gold2); font-size: .84rem; font-weight: 700; }
.mgs-tier-state { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--g-muted); font-size: .88rem; font-weight: 700; }
.mgs-tier.is-unlocked { border-color: rgba(232, 201, 107, .5); }
.mgs-tier.is-unlocked .mgs-tier-mark { border-color: var(--g-gold); box-shadow: 0 0 18px rgba(232, 201, 107, .25); }
.mgs-tier.is-unlocked .mgs-tier-state { color: var(--g-gold); }
.mgs-tier.is-claimed .mgs-tier-mark { background: linear-gradient(135deg, #d8b85a, #f0d47b); border-color: #f6dd8e; }
.mgs-tier.is-claimed .mgs-tier-mark b, .mgs-tier.is-claimed .mgs-tier-mark i { color: #1b1407; }
.mgs-tier.is-claimed .mgs-tier-state { color: #86efac; }
.mgs-tier.is-locked { opacity: .82; }

.mgs-table-wrap { overflow-x: auto; border: 1px solid rgba(232, 201, 107, .14); border-radius: 12px; }
.mgs-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .96rem; min-width: 460px; }
.mgs-table th, .mgs-table td { padding: 11px 16px; border: 0; border-bottom: 1px solid rgba(232, 201, 107, .1); text-align: left; }
.mgs-table thead th { background: rgba(10, 10, 20, .5); color: var(--g-muted); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.mgs-table tbody tr:last-child td { border-bottom: 0; }
.mgs-table td strong { color: #fff; }

/* ── Member registry ───────────────────────────────────────────────────────── */
.mgs-sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.mgs-sort a { text-decoration: none !important; }
.mgs-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.mgs-roster-card { --rc: #e8c96b; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 14px 14px; border: 1px solid rgba(232, 201, 107, .14); border-radius: 14px; background: rgba(10, 10, 20, .45); text-align: center; transition: opacity .55s ease var(--d, 0s), translate .55s ease var(--d, 0s), border-color .2s, transform .2s; }
.mgs-roster-card:hover { border-color: color-mix(in srgb, var(--rc) 55%, transparent); transform: translateY(-3px); }
.mgs-roster-main { display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit !important; text-decoration: none !important; }
.mgs-roster-av { position: relative; display: block; }
.mgs-roster-av img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rc); }
.mgs-roster-name { color: #fff; font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.mgs-roster-rank { color: var(--rc); font-size: .82rem; font-weight: 700; }
.mgs-roster-friend { display: inline-flex; align-items: center; gap: 6px; color: #86efac; font-size: .82rem; font-weight: 700; }
.mgs-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }

/* ── Profile ───────────────────────────────────────────────────────────────── */
.mgs-profile .mgm-tabs-wrap { margin-top: 4px; }
.mgs-maintabs { gap: 4px; }
.mgs-maintabs .mgm-tab-btn { display: inline-flex; align-items: center; gap: 8px; font-size: .98rem; padding: 13px 15px; }
.mgs-profile .mgm-tab-panel { padding-top: 6px; }
.mgs-profile .mgm-card, .mgs-profile .mgm-renown-section { border-radius: 16px; }
.mgs-profile .mgm-preview-note { border-radius: 12px; }
.mgs-profile .mgm-profile-stats, .mgs-profile .mgm-shard-panel { display: none; } /* replaced by the hero card */

/* ── Reveal + ambient ──────────────────────────────────────────────────────── */
@keyframes mgs-pulse { 0% { opacity: 0; transform: translateX(0); } 8%, 70% { opacity: .85; } 100% { opacity: 0; transform: translateX(calc(100cqw - 60px)); } }
@keyframes mgs-lane { 0% { transform: translateX(100%); opacity: 0; } 20%, 75% { opacity: 1; } 100% { transform: translateX(6%); opacity: 0; } }
@keyframes mgs-drift { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes mgs-mote { 0% { transform: translate(96px, 130px) scale(.6); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(304px, 130px) scale(1); opacity: 0; } }
@keyframes mgs-card-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

html.mgfx-full .mgs-steps.mgg-anim .mgs-steps-rail { container-type: inline-size; }
html.mgfx-full .mgs-steps.mgg-anim .mgs-pulse { animation: mgs-pulse 4.5s ease-in-out infinite; }
html.mgfx-full .mgs-orbit.mgg-anim .mgs-lane i { animation: mgs-lane 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
html.mgfx-full .mgs-orbit.mgg-anim .mgs-orbit-node { animation: mgs-drift 6s ease-in-out infinite; animation-delay: calc(var(--i) * .7s); }
html.mgfx-full .mgs-constellation.mgg-anim .mgs-con-node { animation: mgs-drift 7s ease-in-out infinite; animation-delay: calc(var(--i) * .55s); }
html.mgfx-full .mgs-art-invite.mgg-anim .mgs-art-motes polygon { animation: mgs-mote 3.4s ease-in-out infinite; }
html.mgfx-full .mgs-art-invite.mgg-anim .m2 { animation-delay: 1.1s; }
html.mgfx-full .mgs-art-invite.mgg-anim .m3 { animation-delay: 2.2s; }
html.mgfx-full .mgs-art-invite.mgg-anim .mgs-art-card { animation: mgs-card-lift 5s ease-in-out infinite; }
.mgs-art-motes polygon { opacity: 0; }
html.mgfx-full .mgs-art-invite.mgg-anim .mgs-art-motes polygon { opacity: 1; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .mgs-stats, .mgs-stats--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mgs-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgs-steps-rail { display: none; }
    .mgs-orbit-grid { grid-template-columns: 1fr; }
    .mgs-people { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .mgs-card { grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 20px; }
    .mgs-shards { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; text-align: left; }
    .mgs-shard-text { flex: 1; }
}
@media (max-width: 640px) {
    .mgs-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .mgs-card-id { text-align: center; }
    .mgs-meta, .mgs-card-actions, .mgg-hero-cta { justify-content: center; }
    .mgs-xp { margin-left: auto; margin-right: auto; }
    .mgs-stats, .mgs-stats--5, .mgs-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgs-stats dd { font-size: 1.45rem; }
    .mgs-steps ol { grid-template-columns: 1fr; }
    .mgs-person { flex-wrap: wrap; }
    .mgs-person-actions { flex-basis: 100%; justify-content: flex-start; }
    .mgs-tier { flex-wrap: wrap; }
    .mgs-ladder-rail { display: none; }
    .mgs-tier-state { flex-basis: 100%; }
    .mgs-orbit-stage { width: min(100%, 320px); }
    .mgs-orbit-node { width: 34%; margin: -8% 0 0 -17%; }
}