/* ══ Community: identity (profile page, showcase, account settings) ═══════
   Markup: Site_Source/community/showcase.mjs (shared with the server renderer) and
   community/features/identity.mjs (settings sections). Nebula tokens from community.css.
   A member's accent colour (data-accent-color="<hex>", one of the 14 palette colours)
   sets --id-accent / --id-accent-2; everything accent-tinted reads those. */

.c-id-profile, .c-id-look-preview, .c-id-swatch { --id-accent: var(--c-violet); --id-accent-2: #6d4aff; }
[data-accent-color] { --id-accent-2: color-mix(in oklab, var(--id-accent) 55%, #6d4aff); }
[data-accent-color="ff4d6d"] { --id-accent: #ff4d6d; }
[data-accent-color="ff7a45"] { --id-accent: #ff7a45; }
[data-accent-color="ffb020"] { --id-accent: #ffb020; }
[data-accent-color="f5d90a"] { --id-accent: #f5d90a; }
[data-accent-color="84cc16"] { --id-accent: #84cc16; }
[data-accent-color="22c55e"] { --id-accent: #22c55e; }
[data-accent-color="14b8a6"] { --id-accent: #14b8a6; }
[data-accent-color="06b6d4"] { --id-accent: #06b6d4; }
[data-accent-color="3b82f6"] { --id-accent: #3b82f6; }
[data-accent-color="6366f1"] { --id-accent: #6366f1; }
[data-accent-color="8b5cf6"] { --id-accent: #8b5cf6; }
[data-accent-color="d946ef"] { --id-accent: #d946ef; }
[data-accent-color="ec4899"] { --id-accent: #ec4899; }
[data-accent-color="94a3b8"] { --id-accent: #94a3b8; }

.c-id-profile { display: grid; gap: 16px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.c-id-hero.c-member-card {
  position: relative;
  gap: 16px;
  padding: 0 28px 24px;
  border-color: color-mix(in oklab, var(--id-accent) 34%, var(--c-line));
  box-shadow: var(--c-shadow), 0 30px 70px -40px color-mix(in oklab, var(--id-accent) 70%, transparent);
}
.c-id-banner {
  position: relative;
  overflow: hidden;
  block-size: clamp(150px, 19vw, 230px);
  margin-inline: -28px;
  background:
    radial-gradient(55% 140% at 12% 0%, color-mix(in oklab, var(--id-accent) 75%, transparent), transparent 66%),
    radial-gradient(45% 130% at 88% 8%, color-mix(in oklab, var(--id-accent-2) 70%, transparent), transparent 66%),
    radial-gradient(40% 120% at 55% 125%, rgb(46 230 242 / 0.28), transparent 70%),
    var(--c-bg-2);
}
/* Without a picture the banner drifts slowly (a nebula of the member's colour). */
.c-id-banner:not(:has(img))::before {
  content: '';
  position: absolute;
  inset: -40% -20%;
  background:
    radial-gradient(30% 40% at 30% 50%, color-mix(in oklab, var(--id-accent) 45%, transparent), transparent 70%),
    radial-gradient(25% 35% at 70% 40%, color-mix(in oklab, var(--id-accent-2) 40%, transparent), transparent 70%);
  animation: c-id-drift 18s ease-in-out infinite alternate;
}
.c-id-banner:not(:has(img))::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='14' cy='20' r='.9' opacity='.8'/%3E%3Ccircle cx='70' cy='8' r='.6' opacity='.6'/%3E%3Ccircle cx='132' cy='40' r='1.1' opacity='.7'/%3E%3Ccircle cx='40' cy='86' r='.7' opacity='.5'/%3E%3Ccircle cx='160' cy='98' r='.8' opacity='.6'/%3E%3Ccircle cx='100' cy='70' r='.5' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.7;
}
@keyframes c-id-drift { to { transform: translate3d(8%, 6%, 0) rotate(4deg); } }
.c-id-banner img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.c-id-banner-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--c-bg-2) 0%, transparent) 35%, color-mix(in srgb, var(--c-deck) 55%, transparent) 75%, color-mix(in srgb, var(--c-deck) 95%, transparent)); }

.c-id-head { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 14px 22px; margin-block-start: -70px; }
.c-id-avatar { position: relative; display: inline-grid; }
.c-id-avatar::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--id-accent) 55%, transparent), transparent 68%);
  filter: blur(6px);
  opacity: 0.85;
  animation: c-id-halo 4.5s ease-in-out infinite;
}
@keyframes c-id-halo { 50% { opacity: 0.45; transform: scale(0.96); } }
.c-id-hero .c-id-avatar .c-avatar {
  position: relative;
  inline-size: 132px;
  block-size: 132px;
  border-width: 4px;
  font-size: 3rem;
  box-shadow: 0 0 0 6px var(--c-bg-2), 0 18px 40px -12px color-mix(in oklab, var(--ring-a) 80%, transparent);
  animation: c-ring-turn 9s linear infinite;
}
.c-id-profile[data-accent-color] .c-id-hero .c-id-avatar .c-avatar { --ring-a: var(--id-accent); --ring-b: color-mix(in oklab, var(--id-accent) 40%, #fff); }
.c-id-names { display: grid; gap: 6px; min-inline-size: 0; padding-block-end: 4px; }
.c-id-names .c-cutout { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.9rem); text-shadow: 0 2px 24px color-mix(in oklab, var(--id-accent) 45%, transparent); }
.c-id-hero .c-handle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--c-text-3); font-weight: 600; }
.c-id-pronouns { display: inline-flex; align-items: center; block-size: 22px; padding-inline: 9px; border: 1px solid color-mix(in oklab, var(--id-accent) 40%, var(--c-line)); border-radius: 999px; background: color-mix(in oklab, var(--id-accent) 14%, transparent); color: var(--c-text); font-size: 0.76rem; font-weight: 650; }
.c-id-pronouns[hidden] { display: none; }
.c-id-hero .c-flair { block-size: 26px; padding-inline: 9px 10px; font-size: 0.8rem; gap: 5px; }
.c-id-hero .c-flair svg, .c-id-hero .c-flair img { inline-size: 15px; block-size: 15px; }
.c-id-hero .c-profile-actions { align-items: center; padding-block-end: 6px; }
.c-id-hero .c-profile-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.c-id-hero .c-profile-actions .btn svg { inline-size: 18px; block-size: 18px; }
body[data-page="community"] .c-id-profile[data-accent-color] .c-id-hero .btn--primary:not([aria-pressed="true"]) {
  background: linear-gradient(118deg, var(--id-accent), var(--id-accent-2));
  box-shadow: 0 10px 26px -12px color-mix(in oklab, var(--id-accent) 90%, transparent);
}
.c-id-menu { margin-inline-start: 0; }
.c-id-menu summary { inline-size: 42px; block-size: 42px; border: 1px solid var(--c-line-2); background: rgb(255 255 255 / 0.04); }
.c-id-menu > div { inset-block-end: auto; inset-block-start: calc(100% + 6px); }
.c-id-hero .c-member-bio { margin: 0; font-size: 1.02rem; }
.c-id-hero .c-stats { column-gap: 34px; }
.c-id-hero .c-stats [data-stat="level"] dd { background: linear-gradient(120deg, color-mix(in oklab, var(--id-accent) 60%, #fff), var(--id-accent)); -webkit-background-clip: text; background-clip: text; }
.c-id-hero .c-member-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.c-id-hero .c-member-meta svg { inline-size: 15px; block-size: 15px; }
.c-id-blocked { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; padding: 12px 14px; border: 1px solid rgb(255 122 102 / 0.35); border-radius: var(--c-r-sm); background: rgb(255 122 102 / 0.08); color: var(--c-text); font-size: 0.9rem; }
.c-id-blocked > svg { inline-size: 18px; block-size: 18px; color: var(--c-coral); }
.c-id-blocked > span { flex: 1 1 16rem; }

.c-id-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.c-id-links a { display: inline-flex; align-items: center; gap: 7px; min-block-size: 34px; padding-inline: 12px 14px; border: 1px solid var(--c-line); border-radius: 999px; background: rgb(255 255 255 / 0.04); color: var(--c-text); font-size: 0.86rem; font-weight: 600; text-decoration: none; transition: border-color var(--c-fast) var(--c-ease), background-color var(--c-fast) var(--c-ease), transform var(--c-fast) var(--c-ease); }
.c-id-links a:hover { border-color: color-mix(in oklab, var(--id-accent, var(--c-violet)) 60%, transparent); background: color-mix(in oklab, var(--id-accent, var(--c-violet)) 14%, transparent); transform: translateY(-1px); }
.c-id-links svg { inline-size: 15px; block-size: 15px; color: var(--id-accent, var(--c-violet)); }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.c-id-tabs a { display: inline-flex; align-items: center; gap: 7px; }
.c-id-tabs a svg { inline-size: 16px; block-size: 16px; }
.c-id-profile .c-id-tabs a[aria-current] { border-color: color-mix(in oklab, var(--id-accent) 55%, transparent); background: color-mix(in oklab, var(--id-accent) 20%, transparent); }

/* ── Showcase ─────────────────────────────────────────────────────────── */
.c-id-showcase { display: grid; gap: 14px; }
.c-id-showcase-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding-inline: 4px; }
.c-id-since { display: inline-flex; align-items: center; gap: 7px; color: var(--c-text-2); font-size: 0.84rem; font-weight: 600; }
.c-id-since svg { inline-size: 16px; block-size: 16px; color: var(--c-amber); }
.c-id-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 12px; }
.c-id-card, .c-id-records {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  background: var(--c-deck);
  box-shadow: var(--c-shadow);
  transition: transform var(--c-med) var(--c-ease), box-shadow var(--c-med) var(--c-ease), border-color var(--c-med) var(--c-ease);
}
.c-id-card { --card: var(--id-accent); }
.c-id-card::before { content: ''; position: absolute; inset: 0 0 auto; block-size: 2px; background: linear-gradient(90deg, transparent, var(--card), transparent); opacity: 0.9; }
.c-id-card::after { content: ''; position: absolute; inset: -40% -30% auto auto; z-index: -1; inline-size: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--card) 22%, transparent), transparent 70%); }
.c-id-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--card) 45%, transparent); box-shadow: var(--c-shadow-lift); }
.c-id-cps { --card: var(--c-amber); }
.c-id-wheel { --card: var(--c-cyan); }
.c-id-card-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--c-text-2); font: 700 0.75rem/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.c-id-card-title svg { inline-size: 16px; block-size: 16px; color: var(--card, var(--c-violet)); }
.c-id-big { margin: 0; color: #fff; font: 600 1.7rem/1 var(--c-display); letter-spacing: 0.02em; text-transform: uppercase; }
:is(:lang(zh), :lang(ja), :lang(hi), :lang(ar)) .c-id-big { font: 700 1.2rem/1.3 var(--font-body); text-transform: none; }
.c-id-sub { margin: 0; color: var(--c-text-3); font-size: 0.82rem; line-height: 1.45; }

.c-id-level-body { display: flex; align-items: center; gap: 14px; }
.c-id-level-badge {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  flex: none;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: conic-gradient(from var(--ring-turn, 0deg), var(--id-accent), color-mix(in oklab, var(--id-accent) 30%, #fff), var(--id-accent-2), var(--id-accent));
  animation: c-ring-turn 7s linear infinite;
}
.c-id-level-badge b { display: grid; place-items: center; inline-size: 56px; block-size: 56px; clip-path: inherit; background: radial-gradient(circle at 35% 25%, color-mix(in oklab, var(--id-accent) 45%, var(--c-bg-2)), var(--c-bg-2) 75%); color: #fff; font: 600 1.6rem/1 var(--c-display); font-variant-numeric: tabular-nums; }
.c-id-xp { position: relative; overflow: hidden; block-size: 10px; border-radius: 999px; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.5); }
.c-id-xp span { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--pct, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--id-accent-2), var(--id-accent), color-mix(in oklab, var(--id-accent) 40%, #fff)); box-shadow: 0 0 14px color-mix(in oklab, var(--id-accent) 80%, transparent); overflow: hidden; }
.c-id-xp span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.45) 50%, transparent 70%); transform: translateX(-120%); animation: c-flair-sweep 3.8s var(--c-ease) infinite; }
.c-id-xp[data-pct="0"] { --pct: 0%; } .c-id-xp[data-pct="5"] { --pct: 5%; } .c-id-xp[data-pct="10"] { --pct: 10%; } .c-id-xp[data-pct="15"] { --pct: 15%; }
.c-id-xp[data-pct="20"] { --pct: 20%; } .c-id-xp[data-pct="25"] { --pct: 25%; } .c-id-xp[data-pct="30"] { --pct: 30%; } .c-id-xp[data-pct="35"] { --pct: 35%; }
.c-id-xp[data-pct="40"] { --pct: 40%; } .c-id-xp[data-pct="45"] { --pct: 45%; } .c-id-xp[data-pct="50"] { --pct: 50%; } .c-id-xp[data-pct="55"] { --pct: 55%; }
.c-id-xp[data-pct="60"] { --pct: 60%; } .c-id-xp[data-pct="65"] { --pct: 65%; } .c-id-xp[data-pct="70"] { --pct: 70%; } .c-id-xp[data-pct="75"] { --pct: 75%; }
.c-id-xp[data-pct="80"] { --pct: 80%; } .c-id-xp[data-pct="85"] { --pct: 85%; } .c-id-xp[data-pct="90"] { --pct: 90%; } .c-id-xp[data-pct="95"] { --pct: 95%; }
.c-id-xp[data-pct="100"] { --pct: 100%; }
.c-id-xp-caption { margin-block-start: -4px; }

.c-id-cps-best { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.c-id-cps-best b { color: #fff; font: 600 2.6rem/0.9 var(--c-display); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgb(255 201 74 / 0.45); }
.c-id-cps-best span { color: var(--c-amber); font: 600 1.1rem/1 var(--c-display); }
.c-id-cps-best small { flex-basis: 100%; color: var(--c-text-2); font-size: 0.82rem; font-weight: 600; }
.c-id-cps-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.c-id-cps-list li > * { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-block-size: 32px; padding-inline: 10px; border-radius: 9px; background: rgb(255 255 255 / 0.035); color: var(--c-text); font-size: 0.84rem; text-decoration: none; }
.c-id-cps-list a:hover { background: rgb(255 201 74 / 0.1); }
.c-id-cps-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-id-cps-list small { color: var(--c-text-3); }
.c-id-cps-list b { color: var(--c-amber); font-variant-numeric: tabular-nums; }

.c-id-wheel-body { display: flex; align-items: center; gap: 14px; }
.c-id-wheel-art { position: relative; display: grid; place-items: center; inline-size: 64px; block-size: 64px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(46 230 242 / 0.35), #0f1f3d 72%); }
.c-id-wheel-art i { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(from 0deg, var(--c-cyan), transparent 25%, #2fd88f 50%, transparent 75%, var(--c-cyan)); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%); animation: c-spin 6s linear infinite; }
.c-id-wheel-art b { font-size: 2rem; line-height: 1; filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.5)); }
.c-id-wheel-art svg { inline-size: 30px; block-size: 30px; color: var(--c-cyan); }
.c-id-tier { display: inline-flex; margin-block-start: 6px; padding: 2px 9px; border: 1px solid rgb(46 230 242 / 0.4); border-radius: 999px; color: var(--c-cyan); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.c-id-wheel[data-tier="gold"] .c-id-tier, .c-id-wheel[data-tier="legendary"] .c-id-tier { border-color: rgb(255 201 74 / 0.5); color: var(--c-amber); }
.c-id-wheel[data-tier="silver"] .c-id-tier { border-color: rgb(220 226 240 / 0.45); color: #dfe4f2; }
.c-id-wheel[data-tier="bronze"] .c-id-tier { border-color: rgb(230 150 90 / 0.5); color: #f0a56b; }
.c-id-wheel[data-tier="diamond"] .c-id-tier { border-color: rgb(150 220 255 / 0.55); color: #b8ecff; }
.c-id-wheel[data-tier="iridescent"] .c-id-tier { border-color: transparent; background: linear-gradient(#141036, #141036) padding-box, linear-gradient(100deg, var(--c-cyan), var(--c-violet) 40%, var(--c-pink) 75%, var(--c-amber)) border-box; border: 1px solid transparent; color: #fff; }
.c-id-card .c-stats { padding-block: 10px; }
.c-id-card .c-stats dd { font-size: 1.25rem; }

.c-id-records { gap: 14px; }
.c-id-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.c-id-game > * { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 13px; background: rgb(255 255 255 / 0.03); color: var(--c-text); text-decoration: none; transition: border-color var(--c-fast) var(--c-ease), background-color var(--c-fast) var(--c-ease), transform var(--c-fast) var(--c-ease); }
.c-id-game a:hover { border-color: color-mix(in oklab, var(--stamp) 55%, transparent); background: color-mix(in oklab, var(--stamp) 10%, transparent); transform: translateY(-2px); }
.c-id-game-icon { display: grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 12px; background: linear-gradient(140deg, var(--stamp, var(--c-violet)), var(--stamp-2, #6d4aff)); color: var(--stamp-ink, #160b3a); box-shadow: 0 8px 18px -10px var(--stamp, var(--c-violet)), inset 0 1px 0 rgb(255 255 255 / 0.35); }
.c-id-game-icon svg { inline-size: 22px; block-size: 22px; stroke-width: 1.9; }
.c-id-game-text { display: grid; gap: 2px; min-inline-size: 0; }
.c-id-game-text b { overflow: hidden; color: #fff; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }
.c-id-game-text small { overflow: hidden; color: var(--c-text-3); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.c-id-game-value { display: grid; justify-items: end; }
.c-id-game-value b { color: #fff; font: 600 1.35rem/1 var(--c-display); font-variant-numeric: tabular-nums; }
.c-id-game-value small { color: var(--c-text-3); font-size: 0.75rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; }

/* ── About ────────────────────────────────────────────────────────────── */
.c-id-about { display: grid; gap: 14px; padding: 22px; }
.c-id-about .c-member-bio { margin: 0; }
.c-id-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0; }
.c-id-facts div { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: rgb(255 255 255 / 0.03); }
.c-id-facts dt { color: var(--c-text-3); font-size: 0.76rem; font-weight: 650; }
.c-id-facts dd { margin: 0; color: #fff; font-weight: 650; }

/* ── Settings ─────────────────────────────────────────────────────────── */
.c-id-form { gap: 20px; }
.c-id-form fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.c-id-form legend { margin-block-end: 8px; padding: 0; color: var(--c-text); font-size: 0.92rem; font-weight: 650; }
.c-id-look-tag { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 3; padding: 3px 10px; border: 1px solid rgb(255 255 255 / 0.18); border-radius: 999px; background: color-mix(in srgb, var(--c-bg-2) 55%, transparent); color: var(--c-text-2); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.c-id-look-preview { position: relative; overflow: hidden; border: 1px solid color-mix(in oklab, var(--id-accent) 40%, var(--c-line)); border-radius: var(--c-r); background: var(--c-deck-2); box-shadow: 0 20px 50px -34px color-mix(in oklab, var(--id-accent) 90%, transparent); transition: border-color var(--c-med) var(--c-ease), box-shadow var(--c-med) var(--c-ease); }
.c-id-look-preview .c-id-banner { block-size: 120px; margin: 0; }
.c-id-look-id { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 14px; margin-block-start: -38px; padding: 0 18px 16px; }
.c-id-look-id .c-avatar { inline-size: 76px; block-size: 76px; border-width: 3px; font-size: 1.8rem; box-shadow: 0 0 0 5px #1d1748; }
.c-id-look-preview[data-accent-color] .c-avatar { --ring-a: var(--id-accent); --ring-b: color-mix(in oklab, var(--id-accent) 40%, #fff); }
.c-id-look-names { display: grid; gap: 4px; min-inline-size: 0; padding-block-end: 4px; }
.c-id-look-names b { color: #fff; font: 600 1.5rem/1 var(--c-display); text-transform: uppercase; overflow-wrap: anywhere; }
.c-id-look-names small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--c-text-3); font-weight: 600; }
.c-id-banner-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.c-id-banner-tools .btn { display: inline-flex; align-items: center; gap: 8px; }
.c-id-banner-tools [hidden] { display: none; }
.c-id-upload { color: var(--c-text-2); font-size: 0.85rem; }

.c-id-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.c-id-swatch { position: relative; display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--id-accent) 55%, #fff), var(--id-accent) 60%); box-shadow: 0 6px 16px -8px var(--id-accent); cursor: pointer; transition: transform var(--c-fast) var(--c-spring); }
.c-id-swatch[data-accent-none] { background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.08) 0 4px, transparent 4px 8px), #1d1748; box-shadow: inset 0 0 0 1px var(--c-line-2); }
.c-id-swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.c-id-swatch:hover { transform: scale(1.1); }
.c-id-swatch:has(input:checked) { transform: scale(1.12); box-shadow: 0 0 0 3px var(--c-bg-2), 0 0 0 5px var(--id-accent), 0 8px 20px -6px var(--id-accent); }
.c-id-swatch[data-accent-none]:has(input:checked) { box-shadow: 0 0 0 3px var(--c-bg-2), 0 0 0 5px var(--c-violet-2); }
.c-id-swatch:has(input:checked)::after { content: ''; inline-size: 12px; block-size: 7px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.5)); }
.c-id-swatch:has(input:focus-visible) { outline: 2px solid var(--c-violet-2); outline-offset: 6px; }

.c-id-links-field { display: grid; gap: 8px; }
.c-id-links-field .c-hint { margin: -4px 0 2px; }
.c-id-link-input { display: flex; align-items: center; gap: 10px; min-block-size: 46px; padding-inline: 14px; border: 1px solid var(--border-control); border-radius: 12px; background: rgb(8 6 28 / 0.6); transition: border-color var(--c-fast) var(--c-ease); }
.c-id-link-input:focus-within { border-color: var(--c-violet-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-violet) 20%, transparent); }
.c-id-link-input svg { inline-size: 17px; block-size: 17px; flex: none; color: var(--c-text-3); }
.c-id-link-input input { flex: 1; min-inline-size: 0; block-size: 44px; border: 0; background: transparent; color: var(--c-text); font: inherit; outline: none; }
.c-id-link-input:has(input[aria-invalid="true"]) { border-color: var(--c-coral); }

.c-id-toggles { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--c-line); border-radius: var(--c-r); background: rgb(255 255 255 / 0.025); }
.c-id-toggle { display: flex; align-items: center; gap: 14px; min-block-size: 56px; padding: 8px 12px; border-radius: 12px; cursor: pointer; transition: background-color var(--c-fast) var(--c-ease); }
.c-id-toggle:hover { background: rgb(255 255 255 / 0.04); }
.c-id-toggle[data-disabled] { cursor: default; opacity: 0.6; }
.c-id-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.c-id-switch { position: relative; flex: none; inline-size: 44px; block-size: 26px; border-radius: 999px; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1px var(--c-line-2); transition: background-color var(--c-med) var(--c-ease); }
.c-id-switch::after { content: ''; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.4); transition: transform var(--c-med) var(--c-spring); }
.c-id-toggle input:checked + .c-id-switch { background: var(--c-grad); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--c-violet) 60%, transparent); }
.c-id-toggle input:checked + .c-id-switch::after { transform: translateX(18px); }
:dir(rtl) .c-id-toggle input:checked + .c-id-switch::after, [dir="rtl"] .c-id-toggle input:checked + .c-id-switch::after { transform: translateX(-18px); }
.c-id-toggle input:focus-visible + .c-id-switch { outline: 2px solid var(--c-violet-2); outline-offset: 3px; }
.c-id-toggle-text { display: grid; gap: 2px; min-inline-size: 0; }
.c-id-toggle-text b { color: var(--c-text); font-weight: 650; }
.c-id-toggle-text small { color: var(--c-text-3); font-size: 0.8rem; }
.c-id-mode { margin: 0 12px 8px; padding-inline-start: 58px; transition: opacity var(--c-fast) var(--c-ease); }
.c-id-mode[data-off] { opacity: 0.45; }

.c-id-badge-preview { position: relative; padding: 22px 18px 18px; border: 1px dashed var(--c-line-2); border-radius: var(--c-r); background: radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--c-violet) 14%, transparent), transparent 60%), rgb(255 255 255 / 0.02); }
.c-id-fake-post { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-deck); }
.c-id-fake-post .c-avatar { inline-size: 26px; block-size: 26px; font-size: 0.75rem; border-width: 1.5px; }
.c-id-fake-post .c-author-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.c-id-fake-post time { color: var(--c-text-3); font-size: 0.8rem; }
.c-id-fake-title { margin: 0; color: #fff; font-size: 1.05rem; font-weight: 700; }
[data-preview-badges] .c-flair { animation: c-id-pop 380ms var(--c-spring) both; }
@keyframes c-id-pop { from { opacity: 0; transform: scale(0.6); } }

.c-id-count { margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c-violet) 16%, transparent); color: var(--c-violet-2); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.c-id-record-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.c-id-record { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 13px; background: rgb(255 255 255 / 0.03); cursor: pointer; transition: border-color var(--c-fast) var(--c-ease), background-color var(--c-fast) var(--c-ease); }
.c-id-record input { order: 4; display: grid; place-items: center; inline-size: 22px; block-size: 22px; margin: 0; border: 1.5px solid var(--c-line-2); border-radius: 7px; background: rgb(255 255 255 / 0.04); -webkit-appearance: none; appearance: none; cursor: inherit; transition: background-color var(--c-fast) var(--c-ease), border-color var(--c-fast) var(--c-ease); }
.c-id-record input::after { content: ''; inline-size: 10px; block-size: 5px; border: solid var(--c-action-ink); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--c-fast) var(--c-spring); }
.c-id-record input:checked { border-color: transparent; background: var(--c-grad); }
.c-id-record input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.c-id-record input:focus-visible { outline: 2px solid var(--c-violet-2); outline-offset: 2px; }
.c-id-record .c-id-game-icon { inline-size: 38px; block-size: 38px; background: color-mix(in srgb, var(--c-violet) 14%, transparent); color: var(--c-violet-2); box-shadow: none; }
.c-id-record:has(input:checked) { border-color: color-mix(in srgb, var(--c-violet-2) 55%, transparent); background: color-mix(in srgb, var(--c-violet) 12%, transparent); }
.c-id-record:has(input:checked) .c-id-game-icon { background: var(--c-grad); color: var(--c-action-ink); }
.c-id-record:has(input:disabled) { cursor: not-allowed; opacity: 0.5; }

.c-id-choices { display: grid; gap: 8px; }
.c-id-choice { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 14px; background: rgb(255 255 255 / 0.03); cursor: pointer; transition: border-color var(--c-fast) var(--c-ease), background-color var(--c-fast) var(--c-ease); }
.c-id-choice:hover { border-color: var(--c-line-2); }
.c-id-choice:has(input:checked) { border-color: color-mix(in srgb, var(--c-violet-2) 60%, transparent); background: color-mix(in srgb, var(--c-violet) 12%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-violet-2) 25%, transparent); }
.c-id-choice input { inline-size: 18px; block-size: 18px; margin: 0; }
.c-id-choice-icon { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 11px; background: color-mix(in srgb, var(--c-violet) 14%, transparent); color: var(--c-violet-2); }
.c-id-choice-icon svg { inline-size: 18px; block-size: 18px; }
.c-id-choice > span:last-child { display: grid; gap: 2px; }
.c-id-choice b { color: var(--c-text); font-weight: 650; }
.c-id-choice small { color: var(--c-text-3); font-size: 0.82rem; }

.c-id-blocked-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.c-id-blocked-list:empty { display: none; }
.c-id-blocked-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 12px; border: 1px solid var(--c-line); border-radius: 13px; background: rgb(255 255 255 / 0.03); }
.c-id-blocked-row .c-author { display: inline-flex; align-items: center; gap: 10px; min-inline-size: 0; color: var(--c-text); text-decoration: none; }
.c-id-blocked-row .c-author-name { display: grid; min-inline-size: 0; }
.c-id-blocked-row small { color: var(--c-text-3); }
.c-id-empty-line { margin: 0; padding: 14px; border: 1px dashed var(--c-line-2); border-radius: 13px; color: var(--c-text-3); text-align: center; }
.c-id-empty-line[hidden] { display: none; }

.c-id-link-prompt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid rgb(255 201 74 / 0.35); border-radius: var(--c-r); background: radial-gradient(90% 140% at 0% 0%, rgb(255 201 74 / 0.14), transparent 65%), rgb(255 255 255 / 0.03); }
.c-id-link-prompt > svg { inline-size: 26px; block-size: 26px; color: var(--c-amber); }
.c-id-link-prompt b { color: #fff; }
.c-id-link-prompt p { margin: 4px 0 0; color: var(--c-text-2); font-size: 0.88rem; line-height: 1.5; }

.c-id-saved { color: var(--c-lime); font-size: 0.88rem; font-weight: 650; }
.c-id-saved:not(:empty)::before { content: '✓ '; }
.c-id-saved:not(:empty) { animation: c-id-pop 320ms var(--c-spring) both; }

/* ── Phones ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .c-id-hero.c-member-card { padding: 0 16px 18px; }
  .c-id-banner { margin-inline: -16px; block-size: 132px; }
  .c-id-head { grid-template-columns: minmax(0, 1fr); justify-items: start; margin-block-start: -56px; gap: 10px; }
  .c-id-hero .c-id-avatar .c-avatar { inline-size: 104px; block-size: 104px; font-size: 2.4rem; }
  .c-id-hero .c-profile-actions { padding-block-end: 0; }
  .c-id-hero .c-stats { column-gap: 22px; }
  .c-id-link-prompt { grid-template-columns: auto minmax(0, 1fr); }
  .c-id-link-prompt .btn { grid-column: 1 / -1; justify-self: start; }
  .c-id-mode { padding-inline-start: 0; }
  .c-id-games, .c-id-record-list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .c-id-banner::before, .c-id-avatar::before, .c-id-hero .c-id-avatar .c-avatar, .c-id-level-badge, .c-id-xp span::after,
  .c-id-wheel-art i, [data-preview-badges] .c-flair, .c-id-saved:not(:empty) { animation: none !important; }
  .c-id-card:hover, .c-id-game a:hover, .c-id-links a:hover { transform: none; }
}
@media (forced-colors: active) {
  .c-id-card, .c-id-records, .c-id-toggles, .c-id-choice, .c-id-record, .c-id-swatch { border: 1px solid CanvasText; }
  .c-id-swatch:has(input:checked), .c-id-choice:has(input:checked), .c-id-record:has(input:checked) { outline: 2px solid Highlight; }
  .c-id-xp span { background: Highlight; }
}