/* My Stadium (#me). Functional styling from the site tokens + mockup class names; scoped under .pg-me. */
.pg-me { --D: "Big Shoulders Display", var(--f), sans-serif; --win: #4CB38F; color: var(--tx); }
.pg-me a { color: inherit; text-decoration: none; }
.pg-me h1, .pg-me h3 { margin: 0; }
.pg-me .mh { position: relative; height: 300px; overflow: hidden; background: linear-gradient(135deg, #1b2536, #0b0f17); }
.pg-me .mh img.bn { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-me .mh-fill { width: 100%; height: 100%; background: radial-gradient(circle at 70% 30%, #2a4f86, #0b0f17 70%); }
.pg-me .mh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 4%, #0b0f1700 70%); }
.pg-me .mid { max-width: var(--max); margin: -130px auto 0; padding: 0 var(--gut); position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 24px; align-items: end; }
.pg-me .ring { width: 170px; height: 170px; border-radius: 50%; padding: 5px; background: conic-gradient(var(--win) 0 var(--p, 0%), #ffffff1a var(--p, 0%) 100%); flex: none; }
.pg-me .ring > * { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid var(--bg); background: #2a3446; display: grid; place-items: center; font: 800 44px/1 var(--f); }
.pg-me .lbl { font: 700 12px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pg-me .mid h1 { font: 800 clamp(48px, 8vw, 84px)/.86 var(--D); text-transform: uppercase; letter-spacing: 0; margin-top: 8px; overflow-wrap: anywhere; }
.pg-me .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pg-me .tag { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--ln2); font-size: 12px; font-weight: 600; background: none; }
.pg-me .tag.g { border-color: #d4af3780; color: var(--gold); }
.pg-me .xp { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--mut); }
.pg-me .xp b { color: #fff; }
.pg-me .bar { height: 6px; background: #ffffff14; border-radius: 4px; overflow: hidden; width: 260px; max-width: 100%; margin: 0; }
.pg-me .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--win), #9be7c4); }
.pg-me .mid .acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 6px; }
.pg-me .bt { padding: 12px 18px; min-height: 44px; border-radius: 6px; font-weight: 700; font-size: 14px; border: 1px solid var(--ln2); display: inline-flex; align-items: center; }
.pg-me .bt.g { background: var(--gold); color: #11141a; border-color: var(--gold); }
.pg-me .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) 60px; }
.pg-me .dash { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; padding-top: 30px; }
.pg-me .card { background: var(--s1); border: 1px solid var(--ln2); border-radius: 12px; padding: 20px; }
.pg-me .card h3 { font: 800 24px/1 var(--D); text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0; }
.pg-me .evc { position: relative; overflow: hidden; padding: 0; }
.pg-me .evc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.pg-me .evc > div { position: relative; padding: 22px; }
.pg-me .evc h3 { font-size: 40px; margin: 8px 0 6px; }
.pg-me .kv4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 14px; margin-top: 18px; }
.pg-me .kv4 b { font: 800 32px/1 var(--D); display: block; }
.pg-me .kv4 small { font-size: 12px; color: var(--mut); }
.pg-me .trs { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-me .tr { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--s2); font-size: 13px; }
.pg-me .tr b { font: 800 22px/1 var(--D); color: var(--gold); }
.pg-me .ql { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pg-me .ql a { padding: 14px; border-radius: 8px; background: var(--s2); font-weight: 700; font-size: 14px; }
.pg-me .ql a small { display: block; font-weight: 500; color: var(--mut); font-size: 12px; }
.pg-me .slot { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ln); font-size: 14px; }
.pg-me .slot small { margin-left: auto; color: var(--mut); font-size: 12px; }
.pg-me .slot b { font: 800 16px/1 var(--D); }
.pg-me .slot b.w { color: var(--win); }
.pg-me .slot b.l { color: var(--loss, #F26B6B); }
.pg-me .mut { color: var(--mut); }
@media (max-width: 600px) {
  .pg-me .mh { height: 180px; }
  .pg-me .mid { margin-top: -80px; }
  .pg-me .ring { width: 110px; height: 110px; }
  .pg-me .ring > * { font-size: 30px; }
  .pg-me .mid .acts { margin-left: 0; }
  .pg-me .bar { width: 140px; }
  .pg-me .dash { grid-template-columns: 1fr; }
  .pg-me .evc h3 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .pg-me * { transition: none !important; animation: none !important; } }