:root {
  --bg: #050709;
  --panel: rgba(13, 18, 21, 0.84);
  --panel-2: #0b1012;
  --line: rgba(146, 255, 41, 0.18);
  --green: #9aff2f;
  --pink: #ff2bb5;
  --blue: #24d8ff;
  --yellow: #ffe142;
  --text: #f4f7f1;
  --muted: #8a9694;
  --danger: #ff4f65;
  --shadow-green: 0 0 22px rgba(154, 255, 47, .22);
  --shadow-pink: 0 0 24px rgba(255, 43, 181, .22);
  --font-display: "Arial Black", "Segoe UI", sans-serif;
  --font-body: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 82% 12%, rgba(36,216,255,.11), transparent 24%),
    radial-gradient(circle at 15% 42%, rgba(255,43,181,.08), transparent 25%),
    linear-gradient(180deg, #050709, #070b0d 56%, #030506);
  font-family: var(--font-body);
  overflow-x: hidden;
}
body::before {
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(154,255,47,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(154,255,47,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
button { color: inherit; }
.shell { width: min(1220px, calc(100% - 42px)); margin-inline: auto; }
.noise { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.scanlines { position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: .08; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.07) 4px); }

.topbar {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 max(22px, calc((100vw - 1220px)/2));
  background: rgba(3,5,6,.88);
  border-bottom: 1px solid rgba(154,255,47,.16);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 30;
}
.brand { display:flex; align-items:center; gap: 11px; min-width: max-content; }
.brand > span:last-child { display:flex; flex-direction:column; }
.brand strong { font-family: var(--font-display); font-style: italic; letter-spacing: -.04em; font-size: 19px; }
.brand strong span { color: var(--green); }
.brand small { color: var(--muted); font-size: 8px; letter-spacing: .22em; margin-top: 3px; }
.brand-mark { width: 36px; height: 36px; border: 1px solid var(--green); transform: skew(-12deg); display:grid; place-items:center; box-shadow: var(--shadow-green); position:relative; overflow:hidden; }
.brand-mark::before, .brand-mark::after, .brand-mark i { content:""; position:absolute; background:var(--green); }
.brand-mark::before { width:4px; height:27px; transform:rotate(-38deg); }
.brand-mark::after { width:4px; height:27px; transform:rotate(38deg); }
.brand-mark i:first-child { width:16px; height:3px; top:11px; }
.brand-mark i:last-child { width:16px; height:3px; bottom:10px; }
.main-nav { display:flex; align-items:center; gap: 34px; height:100%; }
.main-nav a { color:#a9b2b0; font-size: 12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; position:relative; }
.main-nav a:hover, .main-nav a.active { color:white; }
.main-nav a.active::after { content:""; height:3px; width:100%; position:absolute; left:0; bottom:-32px; background:var(--green); box-shadow:var(--shadow-green); }
.wallet { display:flex; align-items:center; gap:12px; }
.wallet-pill { display:flex; align-items:center; gap:10px; border:1px solid rgba(154,255,47,.32); background:rgba(154,255,47,.05); padding:8px 13px; cursor:pointer; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.wallet-pill > span:nth-child(2) { display:flex; flex-direction:column; align-items:flex-start; }
.wallet-pill small { font-size:7px; color:var(--muted); letter-spacing:.13em; }
.wallet-pill strong { font-size:13px; letter-spacing:.04em; }
.coin-icon, .mini-coin { display:inline-grid; place-items:center; color:#111; background:var(--yellow); border-radius:50%; font-family:var(--font-display); box-shadow:0 0 14px rgba(255,225,66,.38); }
.coin-icon { width:23px; height:23px; font-size:11px; }
.mini-coin { width:15px; height:15px; font-size:8px; vertical-align:2px; margin-right:4px; }
.profile-button { width:41px; height:41px; padding:0; border:1px solid rgba(36,216,255,.44); background:#111a1e; position:relative; cursor:pointer; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.profile-avatar { font-family:var(--font-display); color:var(--blue); font-size:12px; }
.online-dot { position:absolute; width:8px; height:8px; border-radius:50%; right:1px; bottom:2px; background:var(--green); box-shadow:0 0 8px var(--green); }

.hero { min-height:620px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:55px; padding-block:70px 58px; position:relative; }
.hero::before { content:"GRID_NODE 09 / CONNECTION: STABLE"; position:absolute; top:28px; right:0; font-size:8px; letter-spacing:.16em; color:#50605c; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--green); font-size:11px; letter-spacing:.18em; font-weight:900; }
.eyebrow span { width:24px; height:2px; background:var(--green); box-shadow:var(--shadow-green); }
.hero h1 { font-family:var(--font-display); font-style:italic; font-size:clamp(55px, 6vw, 92px); line-height:.87; letter-spacing:-.075em; margin:24px 0 28px; max-width:720px; text-shadow:3px 0 0 rgba(255,43,181,.32); }
.hero h1 em { color:transparent; -webkit-text-stroke:2px var(--green); text-shadow:0 0 28px rgba(154,255,47,.18); }
.hero-copy > p { max-width:620px; color:#a3afad; font-size:15px; line-height:1.75; }
.hero-actions { display:flex; gap:14px; margin:34px 0 42px; flex-wrap:wrap; }
.btn { min-height:48px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; gap:16px; border:1px solid transparent; font-size:11px; font-weight:950; letter-spacing:.1em; cursor:pointer; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); transition:.2s ease; }
.btn-primary { color:#071008; background:var(--green); box-shadow:var(--shadow-green); }
.btn-primary:hover { transform:translateY(-2px); filter:brightness(1.1); }
.btn-ghost { background:transparent; border-color:#35413f; }
.btn-ghost:hover { border-color:var(--pink); color:var(--pink); box-shadow:var(--shadow-pink); }
.btn b { font-size:13px; }
.season-stats { display:flex; gap:0; border-top:1px solid #202928; max-width:570px; }
.season-stats div { padding:22px 38px 0 0; margin-right:38px; border-right:1px solid #202928; display:flex; flex-direction:column; }
.season-stats div:last-child { border:0; margin:0; }
.season-stats strong { font-family:var(--font-display); font-size:22px; letter-spacing:-.04em; }
.season-stats span { color:#687370; font-size:8px; letter-spacing:.16em; margin-top:5px; }

.hero-visual { height:510px; position:relative; display:grid; place-items:center; perspective:900px; }
.hero-visual::before { content:""; width:410px; height:410px; position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(36,216,255,.13), transparent 63%); filter:blur(2px); }
.orbit { position:absolute; border:1px solid rgba(36,216,255,.2); border-radius:50%; animation:spin 17s linear infinite; }
.orbit::before { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 14px var(--pink); top:14%; left:8%; }
.orbit-one { width:440px; height:440px; }
.orbit-two { width:360px; height:360px; border-color:rgba(154,255,47,.16); animation-direction:reverse; animation-duration:12s; }
.orbit-two::before { background:var(--green); box-shadow:0 0 14px var(--green); }
@keyframes spin { to { transform:rotate(360deg); } }
.player-card { width:min(385px, 86vw); height:452px; position:relative; background:linear-gradient(145deg, rgba(14,26,29,.94), rgba(7,10,12,.92)); border:1px solid rgba(36,216,255,.4); clip-path:polygon(32px 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%,0 32px); box-shadow:0 0 70px rgba(36,216,255,.12); transform:rotateY(-4deg) rotateX(1deg); overflow:hidden; }
.player-card::before { content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.09) 48%, transparent 58%); transform:translateX(-120%); animation:shine 5s ease-in-out infinite; z-index:5; pointer-events:none; }
@keyframes shine { 55%,100% { transform:translateX(120%); } }
.card-chrome { display:flex; justify-content:space-between; padding:15px 18px; font-size:8px; color:#6f807d; letter-spacing:.14em; border-bottom:1px solid rgba(36,216,255,.16); }
.card-chrome span:last-child { color:var(--green); }
.player-art { height:333px; position:relative; display:flex; justify-content:center; align-items:flex-end; overflow:hidden; background:
  linear-gradient(90deg, transparent 49%, rgba(36,216,255,.05) 50%, transparent 51%),
  linear-gradient(rgba(36,216,255,.04) 1px, transparent 1px); background-size:100% 100%, 100% 22px; }
.player-art::before { content:""; position:absolute; width:280px; height:280px; border:1px solid rgba(255,43,181,.19); border-radius:50%; top:42px; box-shadow:0 0 45px rgba(255,43,181,.1) inset; }
.helmet { position:absolute; width:170px; height:198px; top:55px; background:linear-gradient(135deg,#223137 0 28%,#11191d 29% 69%,#2a3d41 70%); clip-path:polygon(25% 0,77% 0,98% 25%,91% 78%,70% 100%,27% 100%,6% 78%,0 28%); border-top:2px solid rgba(36,216,255,.6); filter:drop-shadow(0 0 16px rgba(36,216,255,.22)); z-index:2; }
.helmet::before, .helmet::after { content:""; position:absolute; width:22px; height:92px; top:62px; background:var(--pink); opacity:.85; box-shadow:0 0 14px var(--pink); }
.helmet::before { left:-4px; transform:skewY(-22deg); }
.helmet::after { right:-4px; transform:skewY(22deg); }
.visor { position:absolute; width:126px; height:52px; left:22px; top:47px; background:linear-gradient(90deg, #0c4c61, var(--blue), #0c4c61); clip-path:polygon(6% 0,94% 0,100% 72%,78% 100%,22% 100%,0 72%); box-shadow:0 0 22px rgba(36,216,255,.6); }
.visor::after { content:""; position:absolute; width:48px; height:3px; background:white; opacity:.75; right:12px; top:10px; filter:blur(.5px); }
.helmet-line { position:absolute; width:5px; height:52px; background:var(--green); left:83px; bottom:8px; box-shadow:0 0 10px var(--green); }
.body-armor { width:278px; height:164px; background:linear-gradient(100deg,#151f23,#33474c 43%,#172126 70%); clip-path:polygon(16% 0,36% 12%,64% 12%,84% 0,100% 25%,94% 100%,6% 100%,0 25%); border-top:2px solid rgba(154,255,47,.4); position:relative; }
.body-armor::before { content:"//"; position:absolute; left:50%; transform:translateX(-50%); top:32px; font-family:var(--font-display); font-size:42px; color:rgba(154,255,47,.55); }
.player-meta { height:88px; display:grid; grid-template-columns:65px 1fr auto; align-items:center; gap:10px; padding:0 17px; background:rgba(3,5,7,.92); border-top:1px solid rgba(154,255,47,.2); }
.rank-number { font-family:var(--font-display); font-size:28px; color:var(--green); }
.player-meta small { font-size:7px; color:#6e7d79; letter-spacing:.16em; }
.player-meta h2 { margin:3px 0 0; font-family:var(--font-display); font-style:italic; font-size:18px; }
.rating { text-align:right; }
.rating strong { display:block; color:var(--blue); margin-top:4px; font-family:var(--font-display); }
.floating-chip { position:absolute; z-index:6; padding:10px 13px; background:rgba(4,8,9,.9); border:1px solid #273432; font-size:8px; letter-spacing:.1em; box-shadow:0 12px 30px rgba(0,0,0,.4); }
.floating-chip span { font-family:var(--font-display); margin-right:6px; color:var(--green); }
.chip-one { left:-12px; top:110px; }
.chip-two { right:-6px; top:192px; }
.chip-two span { color:var(--blue); }
.chip-three { left:45px; bottom:10px; }
.chip-three span { color:var(--pink); }

.ticker { width:100%; overflow:hidden; border-block:1px solid rgba(154,255,47,.14); background:#080d0e; }
.ticker-track { min-width:max-content; display:flex; animation:ticker 28s linear infinite; }
.ticker-track span { padding:13px 34px; color:#899492; font-size:9px; font-weight:800; letter-spacing:.12em; border-right:1px solid #1c2625; }
.ticker-track b { color:var(--green); margin-right:8px; }
.ticker-track b.blue { color:var(--blue); }.ticker-track b.yellow { color:var(--yellow); }.ticker-track b.pink { color:var(--pink); }
.ticker-track i { color:white; font-style:normal; }
@keyframes ticker { to { transform:translateX(-45%); } }

.content-grid { padding-block:85px; display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.72fr); gap:22px; }
.cyber-panel { background:var(--panel); border:1px solid #1d2927; clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); position:relative; backdrop-filter:blur(10px); }
.cyber-panel::after { content:""; position:absolute; left:0; top:0; width:58px; height:2px; background:var(--green); box-shadow:var(--shadow-green); }
.leaderboard-panel { padding:27px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; }
.section-heading > div:first-child { position:relative; padding-left:54px; }
.section-index { position:absolute; left:0; bottom:-7px; color:rgba(154,255,47,.16); font-family:var(--font-display); font-size:60px; line-height:1; }
.section-heading p { margin:0 0 7px; color:#74817e; font-size:8px; letter-spacing:.18em; }
.section-heading h2 { margin:0; font-family:var(--font-display); font-style:italic; letter-spacing:-.04em; font-size:30px; }
.tabs { display:flex; border:1px solid #26312f; padding:3px; }
.tab { border:0; padding:9px 12px; background:transparent; color:#74807e; font-size:8px; font-weight:900; letter-spacing:.12em; cursor:pointer; }
.tab.active { background:var(--green); color:#071008; box-shadow:var(--shadow-green); }
.rank-header, .rank-row { display:grid; grid-template-columns:2.15fr 1fr .62fr .72fr .55fr; align-items:center; gap:10px; }
.rank-header { padding:10px 14px; color:#55615f; font-size:7px; letter-spacing:.14em; border-block:1px solid #1e2827; }
.rank-row { min-height:70px; padding:9px 14px; border-bottom:1px solid #1b2423; transition:.2s ease; }
.rank-row:hover { background:rgba(154,255,47,.035); transform:translateX(3px); }
.player-cell { display:grid; grid-template-columns:26px 42px 1fr; align-items:center; gap:10px; }
.rank-pos { font-family:var(--font-display); color:#697572; }
.rank-row:nth-child(1) .rank-pos { color:var(--yellow); }
.rank-row:nth-child(2) .rank-pos { color:#d7e0e2; }
.rank-row:nth-child(3) .rank-pos { color:#d89362; }
.mini-avatar { width:40px; height:40px; display:grid; place-items:center; font-family:var(--font-display); font-size:11px; background:linear-gradient(135deg,#182428,#0a0e10); border:1px solid var(--avatar-color, var(--blue)); color:var(--avatar-color, var(--blue)); box-shadow:0 0 14px color-mix(in srgb, var(--avatar-color), transparent 74%); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.player-name strong { display:block; font-size:12px; letter-spacing:.03em; }.player-name small { color:#5e6b68; font-size:7px; }
.team-name, .wl, .rating-value { font-size:10px; font-weight:800; }.team-name { color:#8b9794; }.rating-value { color:var(--blue); font-family:var(--font-display); }
.trend { font-size:10px; font-weight:900; color:var(--green); }.trend.down { color:var(--danger); }.trend.flat { color:#64716f; }
.wide-link { width:100%; border:0; background:transparent; color:#7d8986; padding:18px 8px 4px; display:flex; justify-content:space-between; font-size:8px; letter-spacing:.15em; cursor:pointer; }.wide-link:hover { color:var(--green); }
.right-rail { display:flex; flex-direction:column; gap:22px; }
.pulse-panel { padding:21px; }
.mini-heading { display:flex; align-items:center; justify-content:space-between; color:#aeb9b6; font-size:9px; font-weight:900; letter-spacing:.13em; padding-bottom:16px; border-bottom:1px solid #1e2827; }
.mini-heading > span:last-child { color:#586562; font-size:7px; }
.live-dot { width:7px; height:7px; margin-right:auto; margin-left:0; border-radius:50%; background:var(--pink); box-shadow:0 0 10px var(--pink); animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.versus { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; padding:27px 0 12px; }
.team-badge { width:60px; height:60px; display:grid; place-items:center; justify-self:center; font-family:var(--font-display); font-style:italic; clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%); background:#11191b; }
.team-badge.green { color:var(--green); border:1px solid var(--green); box-shadow:var(--shadow-green); }.team-badge.pink { color:var(--pink); border:1px solid var(--pink); box-shadow:var(--shadow-pink); }
.versus-score { text-align:center; }.versus-score small { display:block; font-size:7px; color:#5d6966; letter-spacing:.12em; }.versus-score strong { display:block; font-family:var(--font-display); font-size:25px; margin:3px 0; }.versus-score i { color:#475451; font-style:normal; }.versus-score span { color:var(--yellow); font-size:9px; }
.team-labels { display:flex; justify-content:space-between; font-size:7px; letter-spacing:.08em; color:#697572; }
.viewer-row { margin-top:21px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:15px; border-top:1px solid #1e2827; }.viewer-row span { font-size:8px; color:#74817e; }.viewer-row button { border:0; background:transparent; color:var(--pink); font-size:8px; font-weight:900; cursor:pointer; }
.mission-panel { padding:21px; }.mission-panel::after { background:var(--pink); box-shadow:var(--shadow-pink); }
.mission { display:grid; grid-template-columns:35px 1fr auto; gap:11px; align-items:center; padding:15px 0; border-bottom:1px solid #1a2322; }.mission:last-child { border:0; }
.mission-icon { width:32px; height:32px; display:grid; place-items:center; border:1px solid #33413e; color:var(--green); }.mission:nth-child(3) .mission-icon { color:var(--pink); }.mission:nth-child(4) .mission-icon { color:var(--yellow); }
.mission strong { display:block; font-size:10px; }.mission small { color:#5f6c69; font-size:7px; }.mission > span { font-size:8px; color:#73807d; }
.progress { height:3px; margin-top:8px; background:#1f2927; }.progress i { display:block; height:100%; background:var(--green); box-shadow:0 0 8px var(--green); }.progress.pink i { background:var(--pink); box-shadow:0 0 8px var(--pink); }.progress.yellow i { background:var(--yellow); box-shadow:0 0 8px var(--yellow); }

.gift-section { padding:12px 0 90px; }
.gift-heading { align-items:center; }
.pink-text { color:rgba(255,43,181,.18); }
.section-intro { max-width:440px; color:#74817e!important; font-size:11px!important; line-height:1.65; letter-spacing:0!important; }
.gift-grid { display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:17px; }
.gift-card { min-height:345px; padding:17px; position:relative; display:flex; flex-direction:column; background:linear-gradient(150deg, #0c1214, #070a0b); border:1px solid #202b29; clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); overflow:hidden; transition:.25s ease; }
.gift-card:hover { transform:translateY(-7px); border-color:rgba(36,216,255,.4); box-shadow:0 18px 45px rgba(0,0,0,.35); }
.gift-card.featured { border-color:rgba(255,43,181,.45); background:linear-gradient(150deg,rgba(255,43,181,.11),#090b0d 55%); }
.gift-card::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 45%,rgba(255,255,255,.04),transparent 56%); pointer-events:none; }
.gift-rarity { align-self:flex-start; padding:5px 7px; font-size:7px; letter-spacing:.15em; font-weight:950; color:#080709; background:var(--pink); }.gift-rarity.rare { background:var(--blue); }.gift-rarity.uncommon { background:var(--green); }.gift-rarity.common { background:#8e9997; }
.gift-visual { flex:1; display:grid; place-items:center; font-family:var(--font-display); font-style:italic; font-size:84px; color:var(--blue); text-shadow:0 0 22px rgba(36,216,255,.6); position:relative; }
.gift-visual::after { content:""; width:120px; height:18px; position:absolute; bottom:23px; border-radius:50%; background:currentColor; filter:blur(18px); opacity:.18; }
.gift-visual.crown { color:var(--blue); }.gift-visual.pulse { color:var(--green); }.gift-visual.gg { color:var(--yellow); font-size:57px; }
.gift-visual.fox { min-height:190px; }
.fox-face { width:105px; height:88px; display:grid; place-items:center; background:linear-gradient(135deg,var(--pink),#8f1bff); color:white; font-size:26px; clip-path:polygon(50% 0,93% 26%,82% 86%,50% 100%,18% 86%,7% 26%); box-shadow:0 0 30px rgba(255,43,181,.4); z-index:2; }
.fox-ear { position:absolute; width:55px; height:70px; top:28px; background:var(--pink); clip-path:polygon(50% 0,100% 100%,0 75%); }.fox-ear.left { left:22%; transform:rotate(-25deg); }.fox-ear.right { right:22%; transform:scaleX(-1) rotate(-25deg); }
.gift-info { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; border-top:1px solid #202a28; padding-top:14px; }
.gift-info small { color:#596562; font-size:7px; letter-spacing:.12em; }.gift-info h3 { margin:4px 0 0; font-family:var(--font-display); font-size:13px; }.gift-info > strong { font-size:10px; color:var(--yellow); white-space:nowrap; }
.send-gift { margin-top:14px; height:37px; border:1px solid #2b3734; background:rgba(255,255,255,.02); color:#8d9996; font-size:8px; font-weight:900; letter-spacing:.13em; cursor:pointer; transition:.2s; }.send-gift:hover { border-color:var(--pink); color:var(--pink); box-shadow:var(--shadow-pink); }

.bottom-dashboard { display:grid; grid-template-columns:.92fr 1.4fr; gap:22px; padding-bottom:80px; }
.activity-panel { padding:21px; }.activity-feed { display:flex; flex-direction:column; }
.activity-item { display:grid; grid-template-columns:34px 1fr auto; gap:11px; align-items:center; padding:13px 0; border-bottom:1px solid #1d2625; }.activity-item:last-child { border:0; }.activity-avatar { width:32px; height:32px; display:grid; place-items:center; background:#101719; color:var(--blue); border:1px solid #294047; font-family:var(--font-display); font-size:8px; }.activity-item p { margin:0; font-size:9px; color:#7c8986; }.activity-item p strong { color:white; }.activity-item small { font-size:7px; color:#4f5d5a; }
.coin-banner { min-height:220px; padding:32px 34px; position:relative; overflow:hidden; background:linear-gradient(120deg,#ceff20,#93ff32 48%,#24d8ff); color:#071009; clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px); display:flex; align-items:center; justify-content:space-between; gap:25px; }
.coin-banner::before { content:""; width:350px; height:350px; position:absolute; right:70px; top:-170px; border:28px solid rgba(0,0,0,.06); border-radius:50%; }
.coin-banner > div:first-child { z-index:2; max-width:430px; }.coin-banner small { font-size:8px; letter-spacing:.15em; font-weight:900; }.coin-banner h2 { font-family:var(--font-display); font-style:italic; font-size:34px; margin:9px 0; letter-spacing:-.05em; }.coin-banner p { font-size:11px; line-height:1.55; margin:0; }
.coin-banner button { z-index:2; height:44px; padding:0 18px; border:1px solid #071009; background:#071009; color:white; font-size:8px; font-weight:900; letter-spacing:.12em; cursor:pointer; white-space:nowrap; }
.coin-stack { width:150px; height:110px; position:relative; z-index:2; }.coin-stack span { position:absolute; width:80px; height:80px; display:grid; place-items:center; border:5px solid #111; border-radius:50%; background:var(--yellow); font-family:var(--font-display); font-size:25px; box-shadow:8px 10px 0 rgba(0,0,0,.16); }.coin-stack span:nth-child(1) { left:0; top:28px; transform:rotate(-20deg); }.coin-stack span:nth-child(2) { left:42px; top:4px; transform:rotate(8deg); }.coin-stack span:nth-child(3) { right:0; top:32px; transform:rotate(24deg); }

.footer { min-height:120px; border-top:1px solid #192120; display:flex; justify-content:space-between; align-items:center; gap:25px; color:#56615f; }.footer p { font-size:7px; letter-spacing:.12em; }.footer > div:last-child { display:flex; gap:18px; }.footer > div:last-child a { font-size:8px; letter-spacing:.1em; }.footer > div:last-child a:hover { color:var(--green); }.footer-brand { opacity:.78; }
.toast { position:fixed; right:22px; bottom:22px; z-index:60; transform:translateY(130%); opacity:0; padding:14px 18px; background:#0b1012; border:1px solid var(--green); color:#dfffd1; font-size:10px; font-weight:800; letter-spacing:.06em; box-shadow:var(--shadow-green); transition:.3s ease; }.toast.show { transform:translateY(0); opacity:1; }
.gift-dialog { width:min(420px,calc(100% - 34px)); color:white; border:1px solid var(--pink); padding:34px; background:linear-gradient(145deg,#111419,#080a0d); box-shadow:0 0 80px rgba(255,43,181,.22); clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px); }.gift-dialog::backdrop { background:rgba(0,0,0,.8); backdrop-filter:blur(7px); }.dialog-close { position:absolute; top:12px; right:15px; border:0; background:transparent; color:#76817f; font-size:24px; cursor:pointer; }.dialog-icon { width:70px; height:70px; display:grid; place-items:center; margin:0 auto 18px; border:1px solid var(--pink); color:var(--pink); font-size:34px; box-shadow:var(--shadow-pink); transform:rotate(45deg); }.dialog-icon::first-letter { transform:rotate(-45deg); }.gift-dialog > small { display:block; text-align:center; color:var(--pink); font-size:8px; letter-spacing:.17em; }.gift-dialog h2 { text-align:center; font-family:var(--font-display); font-size:28px; margin:8px 0 10px; }.gift-dialog > p { text-align:center; color:#788381; font-size:11px; line-height:1.6; }.gift-dialog label { display:block; margin-top:22px; color:#687471; font-size:8px; letter-spacing:.14em; }.gift-dialog select { width:100%; height:46px; margin-top:8px; padding:0 12px; color:white; background:#090d0f; border:1px solid #2d3736; }.dialog-cost { display:flex; justify-content:space-between; padding:18px 0; margin-top:8px; font-size:9px; color:#6f7c79; }.dialog-cost strong { color:var(--yellow); }.confirm-gift { width:100%; }

@media (max-width: 1020px) {
  .main-nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:65px; }
  .hero-copy { text-align:center; }.eyebrow { justify-content:center; }.hero-copy > p, .season-stats { margin-inline:auto; }.hero-actions { justify-content:center; }
  .hero-visual { margin-top:-20px; }
  .content-grid { grid-template-columns:1fr; }.right-rail { display:grid; grid-template-columns:1fr 1fr; }
  .gift-grid { grid-template-columns:1fr 1fr; }.bottom-dashboard { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  .shell { width:min(100% - 24px,1220px); }.topbar { height:70px; padding-inline:12px; }.wallet-pill small { display:none; }.wallet-pill { padding:8px; }.brand small { display:none; }
  .hero { min-height:auto; padding-block:50px 35px; }.hero h1 { font-size:clamp(46px,15vw,72px); }.hero-copy > p { font-size:13px; }.season-stats { justify-content:center; }.season-stats div { margin-right:17px; padding-right:17px; }.season-stats strong { font-size:17px; }
  .hero-visual { height:470px; }.orbit-one { width:360px; height:360px; }.orbit-two { width:300px; height:300px; }.player-card { height:420px; }.player-art { height:301px; }
  .content-grid { padding-block:58px; }.leaderboard-panel { padding:16px 12px; }.section-heading { align-items:flex-start; flex-direction:column; }.tabs { align-self:stretch; }.tab { flex:1; }.rank-header { display:none; }.rank-row { grid-template-columns:1.8fr .7fr .6fr; }.rank-row .team-name, .rank-row .wl { display:none; }.right-rail { grid-template-columns:1fr; }
  .gift-heading { align-items:flex-start; }.gift-grid { grid-template-columns:1fr; }.gift-card { min-height:315px; }
  .coin-banner { flex-direction:column; align-items:flex-start; }.coin-stack { position:absolute; right:10px; bottom:7px; opacity:.45; }.coin-banner button { margin-top:10px; }
  .footer { flex-direction:column; justify-content:center; padding-block:35px; text-align:center; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }