/* SAN STATUS · pilot app
   Brand: SAN orange #FC4C01 · cream #F9F4EE · #161616 / #0A0A0A
   Type: Futura PT Bold Oblique → Jost 700 italic (web) · Red Hat Display / Text · JetBrains Mono */
/* 3.4 · hidden means gone, everywhere. A component's own display (grid, flex) used to beat its [hidden] rule: the walk-up's lesson
   card, emptied but still drawn, was the empty box under the opponent in every lesson and trial */
[hidden] { display: none !important; }
:root {
  --bg: #0A0A0A;
  --surface: #121212;
  --surface-2: #181818;
  --line: #262626;
  --line-2: #333;
  --ink: #F9F4EE;
  --ink-2: #C9C5C0;
  --dim: #8A8784;
  --mute: #85827F;   /* 4.9:1 on --bg */
  --orange: #FC4C01;
  --orange-ink: #0A0A0A;
  --bronze: #C08F66;
  --silver: #C9CDD3;
  --gold: #D8B574;
  --diamond: #BCD7EC;
  --tier: var(--bronze);
  --ok: #7FD08A;
  --r: 2px;
  --gut: 16px;
  --max: 560px;
  --nav: 64px;
  --f-head: 'Jost', 'Futura PT', 'Futura', sans-serif;
  --f-disp: 'Red Hat Display', system-ui, sans-serif;
  --f-text: 'Red Hat Text', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  color-scheme: dark;
}
[data-tier="silver"] { --tier: var(--silver); }
[data-tier="gold"] { --tier: var(--gold); }
[data-tier="diamond"] { --tier: var(--diamond); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--f-text); min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 1.5px solid var(--orange); outline-offset: 2px; }

/* ---------- type ---------- */
.label { font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.head { font: italic 700 32px/0.95 var(--f-head); text-transform: uppercase; letter-spacing: -.005em; }
.sub { font: 600 17px/1.25 var(--f-disp); letter-spacing: .01em; }
.body { color: var(--ink-2); font-size: 14.5px; }
.small { font-size: 13px; color: var(--dim); }
.mono { font-family: var(--f-mono); }

/* ---------- shell ---------- */
.shell { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) calc(var(--nav) + 40px + env(safe-area-inset-bottom)); }
.topbar { position: sticky; top: 0; z-index: 20; background: linear-gradient(var(--bg) 70%, rgba(10,10,10,0)); }
.topbar-in { max-width: var(--max); margin: 0 auto; padding: 14px var(--gut) 18px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { width: 44px; height: auto; color: var(--ink); }
.brand .label { color: var(--ink-2); border-left: 1px solid var(--line-2); padding-left: 12px; }
.me-btn { width: 34px; height: 34px; border: 1px solid var(--line-2); display: grid; place-items: center; font: 600 12px var(--f-mono); color: var(--ink-2); }

.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(10,10,10,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.nav-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); height: var(--nav); }
.nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: 500 10px var(--f-mono); letter-spacing: .16em; color: var(--mute); }
.nav button svg { width: 18px; height: 18px; }
.nav button.on { color: var(--ink); }
.nav button.on::after { content: ''; position: absolute; }

/* ---------- blocks ---------- */
.sec { margin-top: 36px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); position: relative; }
.frame::before, .frame::after { content: ''; position: absolute; width: 10px; height: 10px; border-color: var(--tier); border-style: solid; pointer-events: none; }
.frame::before { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; }
.frame::after { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }
.pad { padding: 20px; }
.rule { height: 1px; background: var(--line); margin: 18px 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; height: 48px; padding: 0 18px; font: 600 12px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--ink); background: transparent; }
.btn.primary { background: var(--orange); border-color: var(--orange); color: var(--orange-ink); }
.btn.block { width: 100%; }
.btn.sm { height: 40px; padding: 0 14px; font-size: 10.5px; white-space: nowrap; flex: none; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.tri { width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.link { font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }

/* ---------- auth ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; max-width: 440px; margin: 0 auto; padding: 28px 24px calc(28px + env(safe-area-inset-bottom)); }
.auth-top { display: flex; justify-content: space-between; align-items: center; }
.auth-top svg { width: 56px; color: var(--ink); }
.auth-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.auth .head { font-size: 56px; margin: 14px 0 14px; }
.auth .lede { color: var(--ink-2); font-size: 16px; margin-bottom: 36px; }
.field { display: block; margin-bottom: 14px; }
.field .label { display: block; margin-bottom: 8px; }
.input { width: 100%; height: 52px; background: var(--surface); border: 1px solid var(--line-2); padding: 0 16px; font-size: 16px; border-radius: 0; }
.input:focus { border-color: var(--ink-2); outline: none; }
.input.code { font: 500 22px var(--f-mono); letter-spacing: .3em; text-align: center; }
.input.code::placeholder { font: 400 14px var(--f-text); letter-spacing: 0; }
.err { min-height: 18px; font: 500 11px var(--f-mono); letter-spacing: .08em; color: var(--orange); margin: 4px 0 10px; text-transform: uppercase; }
.auth-foot { display: flex; justify-content: space-between; }
.spinner { width: 14px; height: 14px; border: 1.5px solid var(--line-2); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- reveal ---------- */
.reveal { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; max-width: 440px; margin: 0 auto; padding: 28px 24px calc(28px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 60% at 50% 38%, color-mix(in srgb, var(--tier) 16%, transparent), transparent 70%); }
.reveal .tierword { font: italic 700 clamp(64px, 20vw, 96px)/.9 var(--f-head); text-transform: uppercase; color: var(--tier); margin: 18px 0 16px; animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); letter-spacing: .08em; } to { opacity: 1; transform: none; } }
.reveal .why { color: var(--ink-2); font-size: 16px; max-width: 32ch; animation: fade 1s .5s both; }
@keyframes fade { from { opacity: 0; } }

/* ---------- hero ---------- */
.hero { padding: 22px 20px 20px; overflow: hidden; }
.hero::marker { display: none; }
.hero-glow { position: absolute; inset: 0; background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--tier) 14%, transparent), transparent 65%); pointer-events: none; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.hero .tierword { font: italic 700 clamp(56px, 17vw, 80px)/.88 var(--f-head); text-transform: uppercase; color: var(--tier); margin: 16px 0 10px; position: relative; }
.hero .why { color: var(--ink-2); position: relative; max-width: 40ch; }
.progress { margin-top: 22px; position: relative; }
.bar { height: 3px; background: var(--line-2); margin-top: 10px; position: relative; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tier); }
.bar b { position: absolute; top: -4px; width: 1px; height: 11px; background: var(--ink); }
.progress-row { display: flex; justify-content: space-between; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--line-2); font: 500 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.pill.tier { border-color: color-mix(in srgb, var(--tier) 60%, transparent); color: var(--tier); }
.pill .dot { width: 5px; height: 5px; background: currentColor; transform: rotate(45deg); }

.next { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--line); position: relative; }
.next .sub { font-size: 15px; }

/* ---------- signals ---------- */
.sig { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.sig:first-child { border-top: 1px solid var(--line); }
.sig .name { font: 600 15px var(--f-disp); }
.sig .word { font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-align: right; }
.sig .detail { font-size: 13px; color: var(--dim); }
.meter { display: flex; gap: 3px; justify-content: flex-end; }
.meter i { width: 14px; height: 4px; background: var(--line-2); }
.meter i.on { background: var(--ink); }
.sig.off .name { color: var(--dim); }
.soon { font: 500 10px var(--f-mono); letter-spacing: .14em; color: var(--mute); border: 1px dashed var(--line-2); padding: 4px 8px; text-transform: uppercase; }

/* ---------- benefits ---------- */
.ben { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ben:last-child { border-bottom: 0; }
.ben .mark { width: 44px; height: 44px; border: 1px solid var(--line-2); display: grid; place-items: center; overflow: hidden; background: var(--surface-2); }
.ben .mark img { width: 100%; height: 100%; object-fit: cover; }
.ben .mark svg { width: 18px; height: 18px; color: var(--ink-2); }
.ben .t { font: 600 15px var(--f-disp); }
.ben .s { font-size: 12.5px; color: var(--dim); }
.ben.locked .t { color: var(--dim); }
.ben.locked .mark { opacity: .45; }
.state { font: 500 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.state.on { color: var(--ok); }
.state.off { color: var(--mute); }
.ben-group + .ben-group { margin-top: 26px; }
.ben-group > .label { display: block; margin-bottom: 4px; }

/* ---------- avatars ---------- */
.av-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; }
.av-tabs::-webkit-scrollbar { display: none; }
.av-tab { flex: 0 0 auto; width: 58px; height: 58px; border: 1px solid var(--line-2); overflow: hidden; position: relative; opacity: .55; }
.av-tab.on { opacity: 1; border-color: var(--ink); }
.av-tab img { width: 100%; height: 100%; object-fit: cover; }
.av { overflow: hidden; }
.av-art { aspect-ratio: 1; background: var(--surface-2); position: relative; }
.av-art img { width: 100%; height: 100%; object-fit: cover; }
.av-art .tag { position: absolute; left: 12px; top: 12px; background: rgba(10,10,10,.78); padding: 6px 9px; font: 500 10.5px var(--f-mono); letter-spacing: .14em; }
.av-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.av-stats > div { padding: 16px 20px; }
.av-stats > div + div { border-left: 1px solid var(--line); }
.av-stats .v { font: italic 700 40px/1 var(--f-head); margin-top: 6px; }
.gear { padding: 4px 20px 16px; }
.gear-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.gear-row:last-child { border-bottom: 0; }
.gear-row .c { font: 500 10px var(--f-mono); letter-spacing: .12em; color: var(--dim); text-transform: uppercase; display: block; }
.gear-row .n { color: var(--ink); }
.gear-row .vf { font: 500 11.5px var(--f-mono); color: var(--ink-2); text-align: right; white-space: nowrap; }
.av-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); }

.origin { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 14px; margin-top: 12px; }
.origin img { width: 72px; height: 72px; object-fit: cover; background: var(--surface-2); }

/* ---------- collection ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.item { overflow: hidden; }
.item .ph { aspect-ratio: 1; background: #E9E6E2; display: grid; place-items: center; overflow: hidden; }
.item .ph img { width: 100%; height: 100%; object-fit: cover; }
.item .ph.dark { background: var(--surface-2); }
.item .ph svg { width: 40%; color: var(--mute); }
.item .meta { padding: 12px; }
.item .n { font: 600 13.5px/1.25 var(--f-disp); }
.item .s { font-size: 12px; color: var(--dim); margin-top: 2px; }
.qty { position: absolute; right: 8px; top: 8px; background: var(--bg); color: var(--ink); font: 600 10.5px var(--f-mono); padding: 4px 7px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 11px var(--f-mono); letter-spacing: .08em; padding: 7px 10px; border: 1px solid var(--line-2); color: var(--ink-2); }

/* ---------- badges ---------- */
.badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.badge { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 12px; }
.badge .n { font: 600 12.5px/1.2 var(--f-disp); text-transform: uppercase; letter-spacing: .02em; }
.badge .r { font: 500 9.5px var(--f-mono); letter-spacing: .12em; color: var(--dim); text-transform: uppercase; margin-top: 3px; }
.r-legendary { color: var(--orange) !important; }
.r-ultra { color: var(--gold) !important; }

/* ---------- leaderboard ---------- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line-2); margin-bottom: 16px; }
.seg button { height: 40px; font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.seg button.on { background: var(--ink); color: var(--bg); }
.row { display: grid; grid-template-columns: 34px 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.row .rk { font: 600 13px var(--f-mono); color: var(--dim); }
.row .ini { width: 34px; height: 34px; border: 1px solid var(--line-2); display: grid; place-items: center; font: 600 11px var(--f-mono); color: var(--ink-2); }
.row .nm { font: 600 14.5px var(--f-disp); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .bd { font: 500 10px var(--f-mono); letter-spacing: .1em; color: var(--dim); margin-top: 2px; }
.row.you { background: color-mix(in srgb, var(--tier) 8%, transparent); margin: 0 calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); border-bottom-color: color-mix(in srgb, var(--tier) 35%, transparent); }
.tchip { font: 500 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.t-bronze { color: var(--bronze); } .t-silver { color: var(--silver); } .t-gold { color: var(--gold); } .t-diamond { color: var(--diamond); }
.empty { padding: 28px 20px; text-align: center; color: var(--dim); font-size: 14px; }

/* ---------- sheet ---------- */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40; opacity: 0; transition: opacity .2s; }
.scrim.on { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-width: var(--max); margin: 0 auto; background: var(--surface); border-top: 1px solid var(--line-2); max-height: 88vh; overflow-y: auto; transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.7,.2,1); padding: 10px var(--gut) calc(24px + env(safe-area-inset-bottom)); }
.sheet.on { transform: none; }
.sheet:not(.on) { visibility: hidden; }
.grab { width: 36px; height: 3px; background: var(--line-2); margin: 4px auto 18px; }
.sheet-sec { padding: 18px 0; border-bottom: 1px solid var(--line); }
.sheet-sec:last-child { border-bottom: 0; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.kv .v { color: var(--ink-2); font-size: 14px; }
.inline { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.inline .input { height: 44px; font-size: 15px; }
.inline .btn { height: 44px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav) + 18px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 60; width: calc(100% - 32px); max-width: 520px; background: var(--ink); color: var(--bg); padding: 14px 16px; font-size: 14px; opacity: 0; transition: all .25s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast b { display: block; font: 600 10.5px var(--f-mono); letter-spacing: .14em; margin-bottom: 3px; }

.foot { margin-top: 44px; display: flex; justify-content: space-between; align-items: center; }
.preview-flag { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 70; background: var(--orange); color: var(--orange-ink); font: 600 10px var(--f-mono); letter-spacing: .16em; padding: 4px 10px; }
.preview-flag button { text-decoration: underline; font: inherit; color: inherit; margin-left: 8px; }

@media (min-width: 720px) {
  :root { --gut: 24px; }
  .head { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
select.input { appearance: none; -webkit-appearance: none; font: inherit; font-size: 16px; color: inherit;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type="date"].input { font: inherit; font-size: 16px; color: inherit; }

/* Badge emblems: hex frame in the rarity color + SAN brand icon (icons.js) + optional level tag */
.emb { --rc: #4A4A4A; position: relative; width: 48px; height: 48px; display: grid; place-items: center; color: var(--rc); flex: none; }
.emb .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.emb .ico { position: relative; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink); }
.emb .ico svg { max-width: 100%; max-height: 100%; width: 100%; height: 100%; }
.emb .tag { position: absolute; right: -4px; bottom: 0; min-width: 18px; padding: 2px 4px; background: var(--bg); border: 1px solid var(--rc);
  font: 700 8.5px/1 var(--f-mono); letter-spacing: .04em; color: var(--rc); text-align: center; }
.emb.r-common { --rc: #4A4A4A; } .emb.r-uncommon { --rc: var(--dim); } .emb.r-rare { --rc: var(--ink); }
.emb.r-ultra { --rc: var(--gold); } .emb.r-legendary { --rc: var(--orange); }
.emb.r-ultra .frame path, .emb.r-legendary .frame path { stroke-width: 1.6; }
.emb.r-legendary .frame path { fill: var(--orange); }
.emb.r-legendary .ico { color: var(--orange-ink); }
.emb.r-common, .emb.r-uncommon, .emb.r-rare, .emb.r-ultra, .emb.r-legendary { color: var(--rc) !important; }
.emb.xs { width: 22px; height: 22px; } .emb.xs .ico { width: 11px; height: 11px; }
.row .bd { display: flex; gap: 4px; margin-top: 4px; }

/* Community art (art.js): role cats, Soulbound, SANWEAR owners, The 33, 4th anniversary */
.emb.art { width: 48px; height: 48px; display: grid; place-items: center; }
.emb.art img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.emb.art.xs { width: 22px; height: 22px; }
.ben .mark img.role-art { width: 32px; height: 32px; object-fit: contain; }
.emoji { display: block; width: 56px; height: 56px; object-fit: contain; margin: 18px auto 0; }
.emoji.hello { width: 64px; height: 64px; margin: 0 0 18px; }
.emoji.sm { width: 44px; height: 44px; margin: 0 auto 12px; opacity: .9; }
.emoji.pulse { animation: sanpulse 1.4s ease-in-out infinite; }
@keyframes sanpulse { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .emoji.pulse { animation: none; } }
.r-team { color: var(--orange) !important; }

/* Status Points */
.pts-total { display: flex; align-items: baseline; gap: 10px; margin: -2px 0 10px; position: relative; }
.pts-total b { font: 600 26px var(--f-mono); letter-spacing: -.01em; color: var(--ink); }
.pcat { padding: 16px 0; border-bottom: 1px solid var(--line); }
.pcat:first-of-type { border-top: 1px solid var(--line); }
.pc-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pc-h .name { font: 600 15px var(--f-disp); }
.pcat.off .pc-h .name { color: var(--dim); }
.pc-n { font: 500 12px var(--f-mono); color: var(--dim); letter-spacing: .04em; }
.pc-n b { color: var(--ink); font-weight: 600; font-size: 14px; }
.pc-bar { height: 3px; background: var(--line); margin: 10px 0 8px; }
.pc-bar i { display: block; height: 100%; background: var(--tier); }
.pc-about { font-size: 13px; color: var(--dim); }
.pc-lines { display: grid; gap: 5px; }
.pl { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink-2); }
.pl .mono { font: 500 12px var(--f-mono); color: var(--ink); white-space: nowrap; }
.pl .mono i { font-style: normal; color: var(--mute, #5a5a5a); }
/* Order numbers on collection cards */
.item .ord { font: 500 10px var(--f-mono); letter-spacing: .1em; color: var(--dim); margin-top: 6px; }
/* Side-scrolling rails: unbound accessories, SANGA */
.rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 0 6px; margin: 0 calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rcard { flex: 0 0 136px; scroll-snap-align: start; border: 1px solid var(--line-2); background: var(--surface); }
.rail.sanga .rcard { flex-basis: 150px; }
.rimg { position: relative; aspect-ratio: 1; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.rimg.tall { aspect-ratio: 3 / 4; }
.rimg img { width: 100%; height: 100%; object-fit: cover; }
.rimg svg { width: 36%; color: var(--mute, #5a5a5a); }
.rmeta { padding: 9px 10px 11px; display: grid; gap: 3px; }
.rmeta .c { font: 500 9.5px var(--f-mono); letter-spacing: .12em; color: var(--dim); text-transform: uppercase; }
.rmeta .n { font: 600 12.5px/1.2 var(--f-disp); text-transform: uppercase; }
.rmeta .vf { font: 500 10px var(--f-mono); letter-spacing: .08em; color: var(--tier); margin-top: 2px; }
/* Avatar as profile picture */
.av-pfp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.me-btn.pic, .row .ini.pic { padding: 0; overflow: hidden; border-color: var(--tier); }
.me-btn.pic img, .row .ini.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail.sanga .rimg img { object-fit: contain; background: #0d0d0d; }

/* ===== v2.1 · SAN Key, key inventory, category boards, team tools ===== */
.ben { grid-template-columns: 44px 1fr auto; }
.ben-r { display: flex; justify-content: flex-end; }
.keycard { border: 1px solid var(--line-2); padding: 16px; margin-bottom: 22px; background: var(--surface-2); }
.keycard.live { border-color: color-mix(in srgb, var(--tier) 55%, var(--line-2)); }
.kc-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.kc-url { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line-2); padding: 6px 6px 6px 12px; margin-bottom: 10px; background: var(--bg); }
.kc-url .mono { font-size: 14px; overflow-wrap: anywhere; color: var(--ink); }
.kc-comm { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.kc-big { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; margin-bottom: 14px; }
.kc-big svg { width: 24px; height: 24px; color: var(--tier); }
.kc-pre { display: flex; align-items: center; border: 1px solid var(--line-2); background: var(--bg); }
.kc-pre > .mono { padding: 0 0 0 12px; color: var(--dim); font-size: 14px; white-space: nowrap; }
.kc-pre .input { border: 0; padding-left: 2px; min-width: 0; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; margin: 4px 0 16px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--orange); }
.empty.left { display: grid; grid-template-columns: 28px 1fr; gap: 14px; text-align: left; }
.empty.left svg { width: 24px; height: 24px; color: var(--dim); }
.alloc-list { display: grid; gap: 10px; }
.card.alloc { display: grid; grid-template-columns: 96px 1fr; overflow: hidden; }
.al-img { background: var(--surface-2); display: grid; place-items: center; min-height: 96px; }
.al-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-img svg { width: 28px; height: 28px; color: var(--dim); }
.al-body { padding: 14px; display: grid; gap: 6px; min-width: 0; }
.al-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.seg.lb { overflow-x: auto; grid-auto-columns: minmax(84px, 1fr); scrollbar-width: none; }
.seg.lb::-webkit-scrollbar { display: none; }
.seg.lb button { font-size: 10px; letter-spacing: .1em; padding: 0 8px; white-space: nowrap; min-height: 44px; }
.row.first .rk { color: var(--tier); }
.crown { font: 600 9.5px var(--f-mono); letter-spacing: .14em; color: var(--orange); border: 1px solid color-mix(in srgb, var(--orange) 50%, transparent); padding: 3px 6px; margin-right: 4px; white-space: nowrap; }
.grid2f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid2f .field { min-width: 0; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.sheet:focus { outline: none; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* narrow phones: nothing overflows */
.hero .tierword, .reveal .tierword { overflow-wrap: anywhere; }
.badge .n { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 360px) {
  .hero .tierword { font-size: 48px; }
  .reveal .tierword { font-size: 56px; }
  .grid2f { grid-template-columns: 1fr; }
  .card.alloc { grid-template-columns: 72px 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===== v2.2 · shared key perks, holder perks, desktop dashboard ===== */
.uico { display: grid; place-items: center; width: 22px; height: 22px; color: var(--ink-2); }
.uico svg { width: 100%; height: 100%; }
.ben .mark .uico { width: 22px; height: 22px; }
.kc-big .kc-ico { width: 30px; height: 30px; color: var(--tier); display: grid; place-items: center; }
.kc-big .kc-ico svg { width: 100%; height: 100%; }
.kc-big { grid-template-columns: 34px 1fr; }
.kc-big .small { margin-top: 4px; }
.kc-gives { margin: 4px 0 14px; }
.kc-gives .chips { margin-top: 8px; }
.chip.on { color: var(--ink); border-color: color-mix(in srgb, var(--tier) 60%, var(--line-2)); }
.keycard { margin-bottom: 0; }
.empty.left .uico { width: 26px; height: 26px; color: var(--dim); }
.np-list { margin: -6px 0 6px 58px; border-left: 1px solid var(--line-2); padding-left: 12px; }
.np { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--ink-2); }
/* holder perks */
.sbl { padding: 14px 0 6px; border-top: 1px solid var(--line); }
.ben-group + .sbl, .sbl:first-child { border-top: 0; }
.sbl-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.sbl.cur .sbl-h .label { color: var(--tier); }
.perk { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: start; padding: 9px 0; }
.perk .uico { width: 22px; height: 22px; margin-top: 1px; }
.perk .t { font: 600 14px/1.3 var(--f-disp); }
.perk .s { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.perk.locked .t, .perk.locked .uico { color: var(--mute); }
.pstate { font: 500 9.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; padding-top: 3px; }
.pstate.on { color: var(--ok); }
.pstate.soon { color: var(--tier); }
.pstate.off { color: var(--mute); }
/* tier ladder in the hero */
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 14px; position: relative; }
.ladder span { border-top: 2px solid var(--line-2); padding-top: 6px; display: grid; gap: 1px; }
.ladder span.past { border-color: color-mix(in srgb, var(--tier) 45%, var(--line-2)); }
.ladder span.on { border-color: var(--tier); }
.ladder b { font: 500 9.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ladder span.on b { color: var(--tier); }
.ladder i { font: 500 10px var(--f-mono); font-style: normal; color: var(--mute); }
/* account button: picture on phones, name + picture on desktop */
.me-btn { width: auto; height: auto; border: 0; display: flex; align-items: center; gap: 12px; padding: 0; }
.me-pic { width: 34px; height: 34px; border: 1px solid var(--line-2); display: grid; place-items: center; font: 600 12px var(--f-mono); color: var(--ink-2); overflow: hidden; }
.me-btn.pic .me-pic { border-color: var(--tier); }
.me-btn.pic .me-pic img { width: 100%; height: 100%; object-fit: cover; }
.me-name, .topnav { display: none; }
/* leaderboard */
.seg.lb button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.seg.lb button i { font-style: normal; font-size: 9.5px; opacity: .7; }
.lb-intro { margin-bottom: 20px; }
.lb-head, .lb-you { display: none; }
.lby { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n r" "n s"; width: 100%; text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); gap: 0 10px; }
.lby span { grid-area: n; font: 600 13px var(--f-disp); align-self: center; color: var(--ink-2); }
.lby b { grid-area: r; font: 600 18px var(--f-mono); text-align: right; }
.lby i { grid-area: s; font: 500 9.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-style: normal; text-align: right; }
.lby.on span { color: var(--tier); }
.lby:last-of-type { border-bottom: 0; }
/* team */
.tg-side > .sec-h:first-child { margin-top: 28px; }

/* tablet */
@media (min-width: 720px) and (max-width: 1079px) {
  :root { --max: 720px; }
  .a-collection .grid2 { grid-template-columns: repeat(3, 1fr); }
  .alloc-list { grid-template-columns: 1fr 1fr; }
  .badges { grid-template-columns: repeat(3, 1fr); }
}

/* desktop */
@media (min-width: 1080px) {
  :root { --max: 1240px; --gut: 32px; --nav: 0px; }
  .nav { display: none; }
  .shell { max-width: var(--max); padding: 8px var(--gut) 72px; }
  .topbar { background: rgba(10,10,10,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .topbar-in { max-width: var(--max); padding: 14px var(--gut); display: grid; grid-template-columns: 1fr auto 1fr; }
  .topbar-in .me-btn { justify-self: end; }
  .topnav { display: flex; gap: 2px; }
  .topnav button { height: 36px; padding: 0 18px; font: 500 11px var(--f-mono); letter-spacing: .16em; color: var(--dim); border: 1px solid transparent; }
  .topnav button:hover { color: var(--ink); }
  .topnav button.on { color: var(--ink); border-color: var(--line-2); background: var(--surface); }
  .me-name { display: grid; justify-items: end; font: 600 13.5px/1.2 var(--f-disp); color: var(--ink); }
  .me-name i { font: 500 9.5px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; font-style: normal; }
  .me-pic { width: 38px; height: 38px; }
  .head { font-size: 48px; }

  /* status dashboard: 7 / 5 columns, sections placed by area */
  .dash { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px 32px; align-items: start; margin-top: 24px;
    grid-template-areas: "hero key" "points benefits" "discord benefits" "badges benefits" "claim claim" "avatars holders" "collection collection" "sanga sanga";
    grid-template-rows: auto auto auto 1fr auto auto auto auto; }
  .dash > .blk > .sec { margin-top: 0; }
  .a-hero { grid-area: hero; } .a-key { grid-area: key; } .a-points { grid-area: points; } .a-benefits { grid-area: benefits; }
  .a-discord { grid-area: discord; } .a-claim { grid-area: claim; } .a-avatars { grid-area: avatars; } .a-holders { grid-area: holders; }
  .a-collection { grid-area: collection; } .a-sanga { grid-area: sanga; } .a-badges { grid-area: badges; }
  .dash:not(:has(.a-holders)) .a-avatars, .dash:not(:has(.a-avatars)) .a-holders { grid-column: 1 / -1; }
  /* left column (points, Discord, badges) stacks beside the taller benefits column, so collapsing points leaves no hole.
     The badges row is 1fr, so any leftover height sits below the badges instead of between sections. */
  .a-hero, .a-key { align-self: stretch; }
  .a-hero > .card, .a-key > .sec { height: 100%; }
  .a-key > .sec { display: flex; flex-direction: column; }
  .a-key .keycard { flex: 1; }

  .a-hero > .card { display: flex; flex-direction: column; }
  .hero { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 30px 32px 28px; flex: 1; }
  .hero .tierword { font-size: clamp(80px, 7.6vw, 116px); margin: 22px 0 12px; white-space: nowrap; }
  .hero-r { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 40px; align-items: end; }
  .hero-r .ladder { grid-column: 2; grid-row: 1; margin: 0; }
  .hero-r .progress { grid-column: 1 / -1; }
  .pts-total { flex-direction: column; gap: 4px; margin: 0; grid-row: 1; }
  .pts-total b { font-size: 46px; line-height: 1; }
  .next { padding: 18px 32px; }

  .pcats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .pcats .pcat:first-of-type, .pcats .pcat:nth-of-type(2) { border-top: 1px solid var(--line); }
  .pcats .pcat.off:last-child { grid-column: 1 / -1; }

  .alloc-list { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .card.alloc { grid-template-columns: 1fr; }
  .card.alloc .al-img { aspect-ratio: 16 / 10; min-height: 0; }
  .card.alloc .al-img.dark { aspect-ratio: auto; height: 72px; justify-items: start; padding-left: 14px; border-bottom: 1px solid var(--line); }
  .card.alloc .al-img.dark svg { width: 26px; height: 26px; }
  .a-discord { align-self: start; }

  .card.av { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; }
  .card.av .av-art { grid-row: 1 / 5; aspect-ratio: 1; align-self: start; }
  .card.av .gear { max-height: 300px; overflow-y: auto; }
  .card.av .av-stats { border-top: 0; border-left: 1px solid var(--line); }
  .card.av .gear, .card.av .av-foot, .card.av .av-pfp { border-left: 1px solid var(--line); }
  .av-tabs { flex-wrap: wrap; }

  .a-collection .grid2 { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .rail { margin: 0; padding-left: 0; padding-right: 0; }
  .a-collection .rail .rcard { flex-basis: 160px; }
  .badges { grid-template-columns: 1fr 1fr; }
  .dash:not(:has(.a-sanga)) .badges { grid-template-columns: repeat(4, 1fr); }
  .foot { margin-top: 56px; }

  /* leaderboard: boards · list · your positions */
  .lb-page { margin-top: 32px !important; }
  .lbwrap { display: grid; grid-template-columns: 200px minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
  .seg.lb { display: flex; flex-direction: column; border: 0; border-left: 1px solid var(--line-2); overflow: visible; margin: 0; position: sticky; top: 96px; }
  .seg.lb button { justify-content: space-between; height: 48px; padding: 0 16px; text-align: left; font-size: 11px; letter-spacing: .14em; }
  .seg.lb button.on { background: transparent; color: var(--ink); box-shadow: inset 2px 0 0 var(--tier); }
  .seg.lb button i { font-size: 11px; opacity: 1; color: var(--tier); }
  .lb-head { display: grid; border-bottom: 1px solid var(--line-2); padding: 0 16px 10px; }
  .lb-main .row { grid-template-columns: 48px 40px minmax(0, 1fr) 110px; padding: 14px 16px; }
  .lb-main .row .ini { width: 40px; height: 40px; }
  .lb-main .row .tchip { text-align: right; }
  .lb-head .label:last-child { text-align: right; }
  .row.you { margin: 0; padding-left: 16px; padding-right: 16px; }
  .lb-you { display: block; position: sticky; top: 96px; }
  .lb-you .lby { cursor: pointer; }

  /* team: queue left, tools right */
  .team-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .tg-side > .sec-h:first-child { margin-top: 0; }

  /* account: a drawer from the right */
  .sheet { left: auto; right: 0; top: 0; bottom: 0; width: 440px; max-width: none; max-height: none; margin: 0; border-top: 0; border-left: 1px solid var(--line-2);
    transform: translateX(100%); padding: 24px 28px 32px; }
  .sheet.on { transform: none; }
  .grab { display: none; }
  .toast { left: auto; right: 32px; bottom: 32px; transform: translateY(20px); width: 380px; }
  .toast.on { transform: none; }

  /* sign-in: tier ladder art beside the form */
  .auth-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
  .auth-art { display: flex; align-items: center; padding: 64px; border-right: 1px solid var(--line);
    background: radial-gradient(80% 60% at 20% 30%, color-mix(in srgb, var(--orange) 10%, transparent), transparent 70%); }
  .aa-in { display: grid; gap: 4px; }
  .aa-in .label { margin-bottom: 18px; }
  .aa-tier { font: italic 700 clamp(64px, 7vw, 108px)/.9 var(--f-head); text-transform: uppercase; opacity: calc(1 - var(--i) * .18); }
  .aa-in .small { margin-top: 24px; max-width: 34ch; }
  .auth { margin: 0 auto; max-width: 460px; width: 100%; }
  .reveal { max-width: 640px; }
  .reveal .tierword { font-size: 128px; }
}
.auth-art { display: none; }
@media (min-width: 1080px) { .auth-art { display: flex; } }
@media (min-width: 1440px) { :root { --max: 1320px; } }

/* ===== v2.3 · key card: perk tiles, pending steps ===== */
.ptiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 10px; }
.ptile { border: 1px solid color-mix(in srgb, var(--tier) 45%, var(--line-2)); background: var(--bg); padding: 12px 10px; display: grid; gap: 6px; justify-items: start; min-width: 0; }
.ptile.locked { border-color: var(--line); opacity: .55; }
.pt-mark { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); overflow: hidden; }
.pt-mark svg { width: 24px; height: 24px; }
.pt-mark img { width: 100%; height: 100%; object-fit: cover; }
.pt-t { font: 600 13px/1.2 var(--f-disp); }
.pt-s { font: 500 9.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tier); }
.ptile.locked .pt-s { color: var(--mute); }
.kc-inline { color: var(--ink); font-size: 12px; }
.ben-note { margin: 4px 0 2px; }
.kc-url.pending { background: transparent; border-style: dashed; padding: 10px 12px; }
.kc-url.pending .mono { color: var(--ink-2); }
.ksteps { list-style: none; display: grid; gap: 0; margin: 4px 0 18px; }
.kst { display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding: 8px 0; position: relative; }
.kst i { width: 9px; height: 9px; margin: 5px 0 0 4px; border: 1.5px solid var(--line-2); transform: rotate(45deg); background: var(--bg); position: relative; z-index: 1; }
.kst:not(:last-child)::before { content: ''; position: absolute; left: 8px; top: 18px; bottom: -6px; width: 1px; background: var(--line-2); }
.kst.done i { background: var(--ok); border-color: var(--ok); }
.kst.cur i { border-color: var(--tier); background: var(--tier); animation: sanpulse 1.6s ease-in-out infinite; }
.kst .t { font: 600 14px/1.3 var(--f-disp); }
.kst.up .t { color: var(--dim); }
.kst .s { font-size: 12.5px; color: var(--dim); }
.keycard { display: flex; flex-direction: column; }
.keycard .kc-comm { margin-top: auto; padding-top: 14px; }
.keycard > .kc-gives { margin-bottom: 14px; }
@media (max-width: 520px) { .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .kst.cur i { animation: none; } }
@media (min-width: 1080px) {
  .ksteps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 18px; }
  .kst { grid-template-columns: 1fr; padding: 14px 0 0; border-top: 1px solid var(--line-2); }
  .kst.done { border-top-color: var(--ok); }
  .kst.cur { border-top-color: var(--tier); }
  .kst i { position: absolute; top: -5px; left: 0; margin: 0; }
  .kst:not(:last-child)::before { display: none; }
}

/* ===== v3 · compact page: expandables, one benefits list, simpler leaderboard, team tabs ===== */
/* toggles */
.tog { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding: 6px 0; min-height: 32px; }
.tog:hover { color: var(--ink); }
.chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.chev.up { transform: rotate(-135deg) translateY(-1px); }
.sec-h .tog { padding: 0; min-height: 0; }
/* compact status card */
.hero-c .hero { padding: 18px 20px 16px; }
.hc-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; position: relative; margin-top: 10px; }
.hero-c .tierword { font-size: clamp(48px, 14vw, 64px); margin: 0; line-height: .9; }
.hc-pts { display: grid; justify-items: end; gap: 4px; padding-bottom: 4px; }
.hc-pts b { font: 600 26px/1 var(--f-mono); }
.hero-c .why { margin-top: 10px; font-size: 13.5px; }
.hero-c .progress { margin-top: 16px; }
.hero-c .next { padding: 12px 20px; }
/* status points */
.pcats:not(.open) .pcat { padding: 11px 0; }
.pcats:not(.open) .pc-bar { margin: 8px 0 0; }
.pc-more { font-size: 12.5px; color: var(--tier); margin-top: 8px; }
/* benefits */
.btag { display: inline-block; font: 600 8.5px/1 var(--f-mono); letter-spacing: .12em; padding: 3px 5px; border: 1px solid; vertical-align: 2px; margin-left: 6px; white-space: nowrap; }
.btag.key { color: var(--tier); border-color: color-mix(in srgb, var(--tier) 55%, transparent); }
.btag.you { color: var(--ink-2); border-color: var(--line-2); }
.ben-foot .btag { margin: 0 4px 0 0; }
.ben-foot { margin-top: 16px; line-height: 1.9; }
.sub-l { display: block; margin: 14px 0 2px; }
.ben-group > .tog { margin-top: 2px; }
/* SAN Key card */
.kc-strip { margin: 2px 0 12px; }
.kstrip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kperk { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 6px; border: 1px solid color-mix(in srgb, var(--tier) 45%, var(--line-2)); background: var(--bg); font: 600 12px var(--f-disp); }
.kperk i { width: 20px; height: 20px; display: grid; place-items: center; overflow: hidden; color: var(--ink); }
.kperk i svg { width: 16px; height: 16px; }
.kperk i img { width: 100%; height: 100%; object-fit: cover; }
.kc-btns { display: flex; gap: 6px; }
.keycard .kc-comm { margin-top: 2px; }
.ksteps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; margin: 4px 0 16px !important; }
.kst { grid-template-columns: 1fr !important; padding: 12px 0 0 !important; border-top: 1px solid var(--line-2); }
.kst.done { border-top-color: var(--ok); } .kst.cur { border-top-color: var(--tier); }
.kst i { position: absolute; top: -5px; left: 0; margin: 0 !important; }
.kst::before { display: none !important; }
.kst .t { font-size: 12.5px; }
/* discord */
.dc-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; }
.card .dc-row + .tog { margin-top: 10px; }
.dc-row .uico, .dc-row .dc-art { width: 40px; height: 40px; border: 1px solid var(--line-2); background: var(--surface-2); display: grid; place-items: center; }
.dc-row .uico svg { width: 18px; height: 18px; }
.dc-row .t { font: 600 15px var(--f-disp); }
.dc-art img.role-art { width: 30px; height: 30px; object-fit: contain; }
.dc-ladder { margin-top: 6px; border-top: 1px solid var(--line); }
/* claimables */
.claim-empty { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: center; padding: 14px 16px; }
.claim-empty .uico { color: var(--dim); }
.claim-empty .t { font: 600 14px var(--f-disp); color: var(--ink-2); }
/* badges row */
.badge-row { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.badge-row::-webkit-scrollbar { display: none; }
.br-item { flex: 0 0 64px; display: grid; justify-items: center; gap: 6px; text-align: center; }
.br-n { font: 500 9px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.br-more { flex: 0 0 48px; height: 48px; border: 1px dashed var(--line-2); font: 600 12px var(--f-mono); color: var(--ink-2); align-self: start; }
/* holders summary */
.sb-sum { padding: 12px 0 4px; border-top: 1px solid var(--line); }
.ben-group + .sb-sum { margin-top: 10px; }
.sb-sum .chips { margin: 10px 0 4px; }
.sb-sum .chip { padding: 5px 8px; font-size: 10.5px; }
/* leaderboard */
.lb-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 10px 0 6px; flex-wrap: wrap; }
.lb-pick { display: grid; gap: 6px; min-width: 200px; }
.lb-pick .input { height: 44px; font-size: 14px; }
.lb-intro { margin-bottom: 18px; }
.lb-you { display: block; margin-bottom: 18px; }
.lby-main { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 10px 0 6px; }
.lby-main b { font: 600 34px/1 var(--f-mono); color: var(--tier); }
.lby-main .t { font: 600 14px var(--f-disp); }
.row.pts { grid-template-columns: 34px 34px minmax(0, 1fr) auto auto; }
.rpts { font: 600 13px var(--f-mono); text-align: right; min-width: 52px; }
.lb-head { display: none !important; }
/* team */
.team-tabs { overflow-x: auto; scrollbar-width: none; margin-bottom: 22px; }
.team-tabs button { white-space: nowrap; padding: 0 12px; }
.team-tabs button i { font-style: normal; color: var(--orange); margin-left: 4px; }
.tt-body .sec-h[style] { margin-top: 0 !important; }
.tt-body > div > .sec-h:first-child { margin-top: 0; }

@media (min-width: 1080px) {
  .hero-c .hero { padding: 26px 30px 22px; justify-content: space-between; }
  .hero-c .tierword { font-size: clamp(64px, 6vw, 88px); }
  .hc-pts b { font-size: 40px; }
  .hero-c .next { padding: 16px 30px; }
  .lb-head { display: grid !important; }
  .lbwrap { grid-template-columns: minmax(0, 1fr) 300px !important; }
  .lb-you { order: 2; position: sticky; top: 96px; margin: 0; }
  .lb-main { order: 1; }
  .lb-main .row.pts { grid-template-columns: 48px 40px minmax(0, 1fr) 110px 110px; }
  .lb-head.pts .label:nth-last-child(2), .lb-head .label:last-child { text-align: right; }
  .seg.lb { display: none; }
  .tt-body.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  .tt-body { max-width: 1100px; }
  .team-tabs { display: inline-grid; grid-auto-columns: minmax(150px, auto); }
  .badge-row { flex-wrap: wrap; overflow: visible; }
}
@media (max-width: 1079px) { .ben .t .btag { display: table; margin: 5px 0 3px; } }
@media (min-width: 1080px) { .card.alloc .al-img.dark { display: none; } }

/* ===== v3.1 · gear images, Origins grid, holder level tags ===== */
.gear .tog { margin: 8px 0 2px; }
.gear-row.img { grid-template-columns: 44px 1fr auto; align-items: center; }
.g-img { width: 44px; height: 44px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.g-img img { width: 100%; height: 100%; object-fit: cover; }
.g-img svg { width: 18px; color: var(--mute); }
.btag.lvl { color: var(--dim); border-color: var(--line-2); }
.perk.locked .btag.lvl { color: var(--mute); }
.origin-card { margin-top: 12px; }
.origin-card .origin { margin: 0; border: 0; background: none; }
.pips { display: inline-flex; gap: 4px; margin-top: 8px; }
.pips i { width: 8px; height: 8px; border: 1px solid var(--line-2); transform: rotate(45deg); }
.pips i.on { background: var(--tier); border-color: var(--tier); }
.og-tog { padding: 0 14px 10px; }
.og-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 4px 14px 16px; }
.og { display: grid; gap: 4px; justify-items: start; }
.og-img { width: 100%; aspect-ratio: 1; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.og-img img { width: 100%; height: 100%; object-fit: cover; }
.og-id { font: 600 11px var(--f-mono); }
.og-lv { font: 500 9.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.og-lv.sb { color: var(--tier); }
.og .pips { margin-top: 0; }

/* v3.2 audit: zoom small product shots (SANCAST sits small in its frame) */
.zm { display: block; width: 100%; height: 100%; overflow: hidden; }
.zm img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); }

/* v3.3 holder perks: trait perks group + Origin trait tags */
.holders .hp-sub { display: block; margin: 6px 0 2px; color: var(--dim); }
.holders .hp-sub + .perk { border-top: 0; }
.holders .perk .btn.sm { align-self: center; }
.og-trait { display: block; margin-top: 4px; font: 500 9px var(--f-mono); letter-spacing: .14em; color: var(--orange); }
.lvl-units { margin: 4px 0 6px; }
.grid4f { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.hl-blk { padding: 10px 0; border-bottom: 1px solid var(--line); }
.hl-blk:first-child { padding-top: 0; }
.hl-blk .small { margin-top: 4px; }

.og-trait.dim { color: var(--dim); }

/* v3.6 holder perks: ordered by state, compact rows, your numbers on top */
.hp-stats { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 14px; }
.hp-stat { flex: 1 1 140px; background: var(--surface); padding: 12px 14px; display: grid; gap: 2px; align-content: start; }
.hp-stat b { font: 600 22px/1.1 var(--f-mono); color: var(--ink); }
.hp-stat .label { font-size: 9px; }
.hp-stat .small { color: var(--dim); font-size: 12px; }
.hp-sec { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 2px; }
.hp-sec:first-of-type { margin-top: 4px; }
.hp-sec .label { color: var(--dim); }
.hp-sec .tog { margin: 0; }
.hp-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; }
.hp-sec + .hp-row { border-top: 0; }
.hp-row:hover .t { color: var(--ink); }
.hp-row .t { font: 500 14px/1.35 var(--f-text); color: var(--ink-2, var(--ink)); }
.hp-row .s { margin-top: 4px; font-size: 13px; color: var(--dim); line-height: 1.45; }
.hp-row.locked { opacity: .45; }
.hp-row .chev { justify-self: end; }
.btag.trait { color: var(--orange); border-color: rgba(255, 85, 0, .45); }
.sp-stats { margin-top: 18px; }
.sp-card { padding: 0 16px; }
.sp-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) 70px 70px 80px; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.sp-row:first-child { border-top: 0; }
.sp-head { padding: 10px 0 8px; }
.sp-head .label { font-size: 9px; color: var(--dim); }
.sp-row .nm { font: 500 14px var(--f-text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-mail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-n { font: 600 14px var(--f-mono); text-align: right; }
.sp-head .label:nth-child(n+3) { text-align: right; }
@media (max-width: 719px) {
  .sp-row { grid-template-columns: minmax(0, 1fr) 54px 54px 60px; }
  .sp-row > :nth-child(2) { display: none; }
}