/* ============================================================
   LEADERBOARD (leaderboard.html) — Crest Forge, inner page
   Header band: title + the board's live bug beside the crest portal
   onto the moonlit gorge, the allosaurus lunging out of the frame from
   the trampled mud. Standings: over the dimmed gorge, three
   podium plates branch off the spine (via + stub); the light runs on
   along each plate's lower bevel for its share of the leader's score.
   Then the full standings table (rank / name + share trace / columns),
   designed loading, empty and offline states (open plates), and My
   stats as a survivor dossier. Reuses style.css tokens + components.
   ============================================================ */

/* ---------- header band ---------- */

.lb-band .page-band-text > .lede { max-width: 36ch; margin-bottom: var(--s-6); }

/* the board bug: one facet plate of cells (same grammar as home's live strip); its row is reserved */
.bug {
  --cut: var(--cut-s);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: 54px;
}
.bug::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hull);
  box-shadow: inset 0 0 0 1px rgba(70, 210, 245, 0.32);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.bug[hidden] { display: inline-flex !important; visibility: hidden; min-width: 240px; }
.bug[data-mode="off"]::before, .bug[data-mode="loading"]::before { box-shadow: inset 0 0 0 1px var(--rule-strong); }
.bug-live { display: inline-flex; align-items: center; gap: 10px; padding: 0 14px 0 16px; color: var(--chrome); font-size: var(--fs-fine); font-weight: 600; }
.bug .stat-chip { flex-direction: row; align-items: center; gap: 8px; padding: 12px 16px; box-shadow: inset 1px 0 var(--rule); }
.bug .stat-chip .num { font-size: 1.5rem; line-height: 1; }
.bug .stat-chip .lbl { font-size: var(--fs-small); color: var(--silver); }
.bug .dot.is-off { margin-right: 2px; }
.lb-meta { display: flex; flex-direction: column; gap: 6px; margin: var(--s-4) 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--steel); }
.lb-meta li { display: inline-flex; align-items: center; gap: 9px; }
.mark { flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: var(--ase); }
.mark-asa { background: var(--asa); }

/* stage: crest portal onto the moonlit gorge, the allo on trampled mud in front, head out past the left flank */
.lb-stage { --cast-x: -30%; --cast-y: 4%; --cast-w: 92%; }
.lb-plate > img { object-position: 30% 50%; }
.lb-stage .stage-ledge { bottom: -16%; }
html.motion .page-band .portal-win > .env-layer { top: -8%; bottom: -8%; }
@media (min-width: 960px) {
  .lb-band { min-height: clamp(520px, 70svh, 700px); }
  .lb-stage { width: min(100%, 600px); margin-bottom: var(--s-6); }
}
/* narrower desktops: the copy column is too close for the lunge, so the allo stays over the ledge (snout >= 40px clear) */
@media (min-width: 960px) and (max-width: 1279.98px) { .lb-stage { --cast-x: -5%; --cast-w: 90%; } }
@media (max-width: 959.98px) {
  .lb-stage { --cast-x: -20%; --cast-w: 88%; width: min(80%, 460px); margin: var(--s-5) 0 var(--s-6) auto; justify-self: end; }
}
@media (max-width: 719.98px) {
  .lb-stage { width: min(84%, 380px); margin-right: 2%; }
  .bug .stat-chip { padding: 10px 12px; }
  .bug-live { padding: 0 10px 0 12px; }
  .bug { display: flex; }
  .bug-live:not([hidden]) ~ #lb-updated { flex-basis: 100%; box-shadow: inset 0 1px var(--rule); }
}

/* ---------- standings: the header's gorge runs on, dimmed, behind the podium ---------- */

.lb-board { isolation: isolate; overflow: clip; padding-top: var(--s-8); }
.lb-env { z-index: -1; }
/* the plate is height-bound (1000px tall at any width): the gorge floor and its river sit level with the podium
   (~680px into the section) and fade out before the standings table; kept dim so the plates read over it */
.lb-stones { inset: auto 0 auto 0; top: -120px; height: 1000px; }
.lb-stones > img {
  object-position: 62% 62%;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000 34%, #000 74%, transparent 88%);
  mask-image: linear-gradient(180deg, transparent 12%, #000 34%, #000 74%, transparent 88%);
}
.lb-fog { inset: auto -10% auto -10%; top: 480px; height: 360px; }
.lb-fog > img { opacity: 0.12; }
.lb-scrim { background: linear-gradient(90deg, rgba(3, 6, 26, 0.8) 0%, rgba(3, 6, 26, 0.3) 38%, rgba(3, 6, 26, 0) 58%); }
@media (max-width: 719.98px) {
  .lb-stones { top: 40px; }
  .lb-stones > img { object-position: 76% 62%; opacity: 0.36; }
  .lb-fog { top: 680px; }
  .lb-scrim { background: linear-gradient(90deg, rgba(3, 6, 26, 0.55), rgba(3, 6, 26, 0.15)); }
}

.lb-board .sec-note code { white-space: nowrap; }
.lb-noscript { max-width: 46rem; margin: 0 0 var(--s-5); }

/* tabs + search on one bar */
.lb-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  max-width: 1080px;
  margin-bottom: var(--s-6);
}
.lb-tabs { position: relative; isolation: isolate; background: none; padding: 5px; }
.lb-tabs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(203, 215, 220, 0.14) 0 1px, transparent 1px), var(--hull);
  clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s));
}
.lb-tabs .tab { min-height: 46px; padding: 0 24px; transition: color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease); }
.lb-tabs .tab.active, .lb-tabs .tab[aria-selected="true"] { background: var(--hull-2); }
.lb-find { display: flex; align-items: center; gap: 12px; flex: 0 1 25rem; }
.lb-find-label { flex: none; font-size: var(--fs-small); color: var(--steel); }
.lb-find .search { max-width: none; flex: 1 1 auto; min-width: 0; }
@media (max-width: 719.98px) {
  .lb-tabs { display: flex; width: 100%; }
  .lb-tabs .tab { flex: 1 1 0; padding-inline: 8px; }
  .lb-find { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
  .lb-find-label { flex-basis: 100%; }
}

.lb-panel:focus-visible { outline-offset: 6px; }
.lb-notice { max-width: 980px; margin-bottom: var(--s-5); }

/* ---------- podium: three plates off the spine, stepping down 1 > 2 > 3 ---------- */

.podium { display: grid; gap: 12px; max-width: 1080px; margin: 0 0 var(--s-8); }
.podium[hidden] { display: none; }
.podium-slot { position: relative; min-width: 0; }
.podium-slot.p2 { width: 91%; }
.podium-slot.p3 { width: 82%; }
/* the via and stub meet the plate at its lower bevel, where the share trace runs on */
.podium-slot > .pad { --pad: 14px; left: calc(var(--lane) * -0.5 - var(--pad) / 2); top: calc(100% - 9px - var(--pad) / 2); }
.podium-slot > .stub { top: calc(100% - 9px); }

.podium .box {
  --cut: var(--cut-l);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "n name tags" "n pts tags";
  align-items: center;
  column-gap: clamp(16px, 2vw, 28px);
  min-height: 116px;
  padding: 16px 28px 24px 16px;
}
.podium .box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(203, 215, 220, 0.2) 0 1px, transparent 1px calc(100% - 1px), rgba(0, 0, 0, 0.5) calc(100% - 1px)),
              linear-gradient(180deg, rgba(16, 28, 62, 0.94), rgba(10, 18, 48, 0.94) 60%, rgba(9, 16, 41, 0.96));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: opacity var(--dur-ui) var(--ease);
}
.podium .box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: var(--plate-2);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: opacity var(--dur-ui) var(--ease);
}
.podium-slot:hover .box::after { opacity: 0.55; }
.p1 .box { min-height: 156px; padding-block: 20px 28px; }
/* 1st: a chrome cap where the light lands, like the relic plinths */
.p1 .box::before {
  background: linear-gradient(90deg, transparent var(--cut-l), rgba(245, 248, 248, 0.85) var(--cut-l), rgba(203, 215, 220, 0.25) 62%, transparent 92%) top / 100% 2px no-repeat,
              linear-gradient(180deg, rgba(166, 238, 255, 0.1), transparent 40%),
              linear-gradient(180deg, rgba(20, 36, 76, 0.95), rgba(13, 23, 54, 0.95) 60%, rgba(10, 18, 48, 0.97));
}

/* the place numeral in a chamfered socket */
.p-avatar {
  --c: 10px;
  grid-area: n;
  display: grid;
  place-items: center;
  width: 76px;
  aspect-ratio: 1;
  background: linear-gradient(180deg, rgba(203, 215, 220, 0.16) 0 1px, transparent 1px), linear-gradient(160deg, #060B24, #0B1432);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.p1 .p-avatar { --c: 14px; width: 108px; }
.medal {
  font: 800 3rem/1 var(--font-display);
  font-stretch: 86%;
  background-image: var(--chrome-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding: 0.04em 0.02em 0.06em;
}
.p1 .medal { font-size: 4.5rem; }
.podium .name {
  grid-area: name;
  align-self: end;
  min-width: 0;
  font: 700 clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem)/1.12 var(--font-display);
  font-stretch: 92%;
  color: var(--chrome);
  overflow-wrap: anywhere;
}
.p1 .name { font-size: clamp(1.875rem, 1.2rem + 2.1vw, 3rem); font-weight: 800; font-stretch: 88%; line-height: 1.02; }
.p1 .name-t { background-image: var(--chrome-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.podium .pts { grid-area: pts; align-self: start; margin-top: 6px; font-size: var(--fs-small); color: var(--steel); }
.podium .pts .n { font: 800 1.375rem/1 var(--font-display); font-stretch: 86%; color: var(--chrome); margin-right: 2px; }
.p1 .pts .n { font-size: 1.75rem; }
.p-tags { grid-area: tags; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; }
.is-open .name { color: var(--steel); }
.is-open .medal { background-image: none; color: var(--steel); -webkit-text-fill-color: var(--steel); opacity: 0.6; }

/* share of the leader: the light from the stub runs on along the lower bevel */
.p-share { position: absolute; left: 0; right: var(--cut); bottom: 8px; height: 2px; background: rgba(126, 152, 172, 0.14); }
.p-share > i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--trace), var(--trace-hot)); transform-origin: 0 50%; transform: scaleX(var(--share, 0)); }
.p-share > i::after { content: ""; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; background: var(--trace-hot); transform: rotate(45deg); }
.p1 .p-share > i::after { display: none; }

/* loading: plates at their real heights */
.podium-slot.skeleton { --cut: var(--cut-l); min-height: 116px; }
.podium-slot.p1.skeleton { min-height: 156px; }

@media (max-width: 719.98px) {
  .podium { gap: 10px; }
  .podium-slot.p2 { width: 96%; }
  .podium-slot.p3 { width: 92%; }
  .podium .box { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n name" "n pts" "n tags"; row-gap: 0; min-height: 130px; padding: 14px 16px 22px 12px; column-gap: 14px; }
  .p1 .box { min-height: 142px; }
  .p-avatar { width: 56px; --c: 8px; }
  .p1 .p-avatar { width: 72px; --c: 10px; }
  .medal { font-size: 2.25rem; }
  .p1 .medal { font-size: 3rem; }
  .p-tags { justify-content: flex-start; margin-top: 10px; }
  .podium-slot.skeleton { min-height: 130px; }
  .podium-slot.p1.skeleton { min-height: 142px; }
}
/* the narrowest phones wrap the two chips onto two lines: the loading plates reserve that height too */
@media (max-width: 359.98px) {
  .podium-slot.skeleton { min-height: 166px; }
  .podium-slot.p1.skeleton { min-height: 178px; }
}

/* ---------- empty / offline: the first plate states it, the others stand open and unlit ---------- */

.lb-state { display: grid; gap: 12px; max-width: 1080px; margin: 0 0 var(--s-8); }
.lb-state-plate {
  --cut: var(--cut-l);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  padding: 22px 28px 26px 16px;
}
.lb-state-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--violet) 0 2px, transparent 2px), var(--plate);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.lb-state-n, .lb-ghost > span {
  font: 800 4.5rem/1 var(--font-display);
  font-stretch: 86%;
  color: rgba(126, 152, 172, 0.42);
}
.lb-state-n {
  --c: 14px;
  display: grid;
  place-items: center;
  width: 108px;
  aspect-ratio: 1;
  background: linear-gradient(160deg, #060B24, #0B1432);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.lb-state-plate:not(:has(.lb-state-n)) { grid-template-columns: minmax(0, 1fr); padding-left: 28px; }
.lb-state-copy { max-width: 60ch; padding-top: 6px; }
.lb-state-title { margin-bottom: 8px; font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--font-display); font-stretch: 92%; color: var(--chrome); }
.lb-state-copy p { color: var(--silver); }
.lb-state-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-5); }
.lb-ghost { display: grid; gap: 12px; }
.lb-ghost > span {
  --cut: var(--cut-l);
  display: flex;
  align-items: center;
  height: 116px;
  padding-left: 30px;
  font-size: 3rem;
  color: rgba(126, 152, 172, 0.3);
  background: linear-gradient(180deg, rgba(203, 215, 220, 0.08) 0 1px, transparent 1px), rgba(10, 18, 48, 0.55);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.lb-ghost > span:nth-child(1) { width: 91%; }
.lb-ghost > span:nth-child(2) { width: 82%; }
.lb-ghost.is-rows > span { --cut: 10px; height: 66px; width: 100%; opacity: calc(1 - var(--i, 0) * 0.3); }
.lb-ghost.is-rows > span:nth-child(2) { --i: 1; }
.lb-ghost.is-rows > span:nth-child(3) { --i: 2; }
@media (max-width: 719.98px) {
  .lb-state-plate { grid-template-columns: minmax(0, 1fr); padding: 20px 18px 22px; }
  .lb-state-n { display: none; }
  .lb-state-actions .btn { flex: 1 1 auto; }
  .lb-ghost > span { height: 96px; font-size: 2.25rem; padding-left: 20px; }
  .lb-ghost > span:nth-child(1) { width: 96%; }
  .lb-ghost > span:nth-child(2) { width: 92%; }
}

/* ---------- standings table ---------- */

/* rows are separated by void (not see-through) gaps, so the plateau never strobes between the slats */
.lb-table { border-spacing: 0; }
.lb-table tbody td { border-top: 6px solid var(--void); background-clip: padding-box; }
.lb-board .table-wrap { max-width: 1080px; }
.lb-table thead th { padding-bottom: 2px; }
.lb-table tbody td { padding-block: 13px 14px; }
.lb-table td.rank { width: 4.5rem; }
.lb-table td.rank .pos { display: inline-block; min-width: 2ch; }
/* the top three rank numerals are small (under 24px), so they are flat chrome, not the gradient (keeps 4.5:1) */
tr.rank-1 td.rank .pos, tr.rank-2 td.rank .pos, tr.rank-3 td.rank .pos { color: var(--chrome); }
.lb-table .who { width: 46%; min-width: 0; }
.who-name { display: block; font-weight: 600; color: var(--chrome); overflow-wrap: anywhere; }
.share { position: relative; display: block; max-width: 300px; height: 2px; margin-top: 9px; background: rgba(126, 152, 172, 0.14); }
.share > i { position: absolute; inset: 0; background: rgba(126, 152, 172, 0.7); transform-origin: 0 50%; transform: scaleX(var(--share, 0)); }
tr.rank-1 .share > i, tr.rank-2 .share > i, tr.rank-3 .share > i { background: var(--trace); }
.lb-table td.score { font: 800 1.1875rem/1.2 var(--font-display); font-stretch: 88%; }
.lb-table .col-gap { color: var(--steel); white-space: nowrap; }
.lb-table tr.rank-1 .col-gap { color: var(--trace); font-weight: 600; }
.sub-line { display: none; }
.lb-table tr.skeleton td { height: 70px; }
.lb-table tr.lb-nomatch td { color: var(--silver); padding: 20px 22px; }
.lb-table th.sortable button { min-height: 32px; }
.lb-table th.sortable button::after { transition: transform var(--dur-ui) var(--ease-press), opacity var(--dur-ui) var(--ease); }

@media (max-width: 719.98px) {
  .lb-table { font-size: var(--fs-small); }
  .lb-table th, .lb-table td { padding-inline: 10px; }
  .lb-table td.rank { width: 2.75rem; font-size: 1.125rem; }
  .lb-table .col-members, .lb-table .col-gap, .lb-table .col-deaths { display: none; }
  .lb-table .who { width: auto; }
  .sub-line { display: block; margin-top: 3px; font: 400 var(--fs-fine)/1.35 var(--font-text); color: var(--steel); }
  .lb-table td.score .sub-line { white-space: nowrap; }
  /* every row (and its loading skeleton) is one height, with or without a second line */
  .lb-table tbody td, .lb-table tr.skeleton td { height: 88px; }
  .share { margin-top: 7px; }
}

/* ---------- my stats: the survivor dossier ---------- */

#me-content { max-width: 1080px; }
.me-skeleton { min-height: 260px; }
.me-gate {
  --cut: var(--cut-l);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--s-6) var(--s-8);
  align-items: center;
  padding: clamp(24px, 3vw, 40px);
}
.me-gate::before { background: linear-gradient(90deg, var(--trace) 0 2px, transparent 2px), var(--plate); }
.me-gate h3 { margin-bottom: 10px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.me-gate-copy p { color: var(--silver); max-width: 52ch; }
.me-gate-copy .btn { margin-top: var(--s-4); }
.me-off { color: var(--steel) !important; font-size: var(--fs-small); }
.me-msg { color: var(--chrome) !important; }
.me-privacy { grid-column: 1 / -1; margin: 0; padding-top: var(--s-4); box-shadow: inset 0 1px var(--rule); }
.me-privacy a { color: var(--chrome); }

/* the blank dossier (decorative): what logging in fills */
.me-preview { --cut: var(--cut-m); position: relative; isolation: isolate; padding: 18px; }
.me-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(3, 6, 26, 0.55);
  box-shadow: inset 0 0 0 1px rgba(126, 152, 172, 0.22);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.me-preview-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.me-preview-avatar { width: 52px; height: 52px; flex: none; background: var(--hull-2); clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%); }
.me-preview-lines { display: grid; gap: 8px; flex: 1; }
.me-preview-lines i { display: block; height: 8px; width: 70%; background: var(--hull-2); }
.me-preview-lines i + i { width: 44%; }
.me-preview-rank { font: 800 2rem/1 var(--font-display); color: rgba(126, 152, 172, 0.4); }
.me-preview-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.me-preview-stats span { display: grid; gap: 6px; padding: 10px 12px; font-size: var(--fs-fine); color: var(--steel); background: rgba(16, 28, 62, 0.5); }
.me-preview-stats b { display: block; width: 40%; height: 14px; background: var(--hull-2); }

.survivor { display: grid; gap: 12px; }
.me-card {
  --cut: var(--cut-l);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-5) var(--s-6);
  padding: clamp(20px, 2.4vw, 32px);
}
.me-card::before { background: linear-gradient(180deg, rgba(166, 238, 255, 0.28) 0 1px, transparent 1px), var(--plate-2); }
/* avatar in a chamfered chrome frame (the crest's cut corners) */
.me-frame {
  display: block;
  padding: 3px;
  background: var(--chrome-plate);
  clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%);
}
.me-frame .avatar { width: 96px; height: 96px; clip-path: polygon(21% 0, 100% 0, 100% 79%, 79% 100%, 0 100%, 0 21%); background: var(--hull-2); }
.me-id h3 { font: 800 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1.05 var(--font-display); font-stretch: 88%; overflow-wrap: anywhere; }
.me-tribe { margin: 8px 0 0; color: var(--silver); }
.me-groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.me-rank { display: grid; justify-items: end; margin: 0; }
.me-rank .lbl { font-size: var(--fs-fine); color: var(--steel); }
.me-rank .numeral { font-size: clamp(2.75rem, 2rem + 2.4vw, 4.5rem); line-height: 1; background-image: var(--chrome-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.me-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.me-stats-grid .stat-chip { position: relative; isolation: isolate; display: flex; padding: 18px 22px 20px; }
.me-stats-grid .stat-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--plate);
  clip-path: polygon(var(--cut-m) 0, 100% 0, 100% calc(100% - var(--cut-m)), calc(100% - var(--cut-m)) 100%, 0 100%, 0 var(--cut-m));
}
.me-stats-grid .stat-chip .num { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
.me-wallet { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 4px 0 0; padding: 0 4px; }
.me-wallet div { display: flex; gap: 10px; align-items: baseline; }
.me-wallet dt { font-size: var(--fs-small); color: var(--steel); }
.me-wallet dd { margin: 0; font-weight: 600; color: var(--chrome); }
.survivor .me-privacy { box-shadow: none; padding-top: var(--s-2); }

@media (max-width: 859.98px) {
  .me-gate { grid-template-columns: minmax(0, 1fr); }
  .me-card { grid-template-columns: auto minmax(0, 1fr); }
  .me-rank { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; align-items: baseline; gap: 12px; justify-content: start; }
  .me-frame .avatar { width: 72px; height: 72px; }
}