/* ═══════════════════════════════════════════════════════════════════════════
   VANTA BLACK — platform stylesheet
   Deep black foundation · controlled glow · light cutting through darkness
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* surfaces */
  --void: #050507;
  --black: #0B0B0E;
  --surface: #101014;
  --surface-2: #16161C;
  --raised: #1C1C24;
  --line: #22222C;
  --line-soft: #1A1A22;

  /* text */
  --text: #EDEAE4;
  --text-2: #A6A6B4;
  --text-3: #6E6E7C;

  /* accents */
  --lavender: #C8B4E4;
  --gold: #EFDCA3;
  --ice: #9FE8F5;
  --danger: #F07A7A;
  --good: #8FE0A8;
  --warn: #E9B96B;

  /* geometry */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --sidebar: 232px;
  --gap: 20px;

  --shadow: 0 12px 40px rgba(0, 0, 0, .55);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .4);
  --glow: 0 0 0 1px rgba(200, 180, 228, .18), 0 8px 32px rgba(200, 180, 228, .08);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: 140ms var(--ease);
  --slow: 320ms var(--ease);

  --text-scale: 1;

  /* ── v1 token aliases ───────────────────────────────────────────────────
     styles/avatar.css and styles/nexus.css were lifted from the v1 stylesheet
     and still reference its names. Those names were never carried across, so
     ~90 declarations across the Avatar Studio and the NEXUS HUD were resolving
     to nothing: panels drew with no background, headings fell back to the system
     font, and selected states lost their fill.

     They are defined as aliases OF the tokens above rather than as fresh
     literals, so there is still one palette — and because a `var()` alias is
     resolved where it is used, the high-contrast overrides below flow through
     these too. */
  --bg1: var(--surface);
  --bg2: var(--surface-2);
  --bg3: var(--raised);
  --line-strong: #2E2E3A;
  --text-dim: var(--text-2);
  --text-faint: var(--text-3);
  --r-md: var(--r);
  --lav: var(--lavender);
  --lav-deep: #6A55C4;
  --ok: var(--good);
  --grad: linear-gradient(135deg, var(--lavender), #F1EBE2, var(--gold));
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  color-scheme: dark;
}

/* ── light theme ──────────────────────────────────────────────────────────
   Settings → Interface → Appearance. Written as an override of the token block
   above rather than as a second stylesheet: every panel, button, chip and
   overlay in the app already resolves its colour through these names, so this
   is the whole theme.

   It is not the dark palette inverted. A straight inversion turns the
   lavender/gold accents to mud and leaves text at contrasts that fail WCAG on
   white, so the surfaces are warm off-whites (pure #FFF glares next to this
   much type) and the accents are DARKENED versions of the same hues — the brand
   stays recognisable and body text lands at ~12:1 on the base surface.

   `color-scheme: light` is what re-themes scrollbars, form controls and the
   caret, which no amount of custom-property work will reach. */
:root[data-theme="light"] {
  /* surfaces — warm neutrals, lightest at the base */
  --void: #EFEDE8;
  --black: #F6F4EF;
  --surface: #FFFFFF;
  --surface-2: #F7F5F1;
  --raised: #EDEAE3;
  --line: #D8D4CB;
  --line-soft: #E6E2DA;

  /* text — near-black rather than black, to match the warm surfaces */
  --text: #1A1820;
  --text-2: #55525F;
  --text-3: #7C7887;

  /* accents — same hues, taken down until they carry on white */
  --lavender: #6B4FA8;
  --gold: #8A6D17;
  --ice: #10707F;
  --danger: #B4322F;
  --good: #1F7A45;
  --warn: #8A5A10;

  /* Shadows have to be far softer: the dark theme's 55% black is a smear here. */
  --shadow: 0 10px 32px rgba(26, 24, 32, .14);
  --shadow-sm: 0 3px 12px rgba(26, 24, 32, .10);
  --glow: 0 0 0 1px rgba(107, 79, 168, .22), 0 8px 28px rgba(107, 79, 168, .10);

  --line-strong: #C4BFB4;
  --lav-deep: #4B3585;
  /* The brand gradient is a light wash here; at full strength it is unreadable
     behind the dark text that sits on it. */
  --grad: linear-gradient(135deg, #D9CCF0, #FBF7F0, #F0E2B4);

  color-scheme: light;
}

/* A few places paint their own translucent black over the page — a scrim that
   is correct on a dark app and a bruise on a light one. */
:root[data-theme="light"] .modal-scrim,
:root[data-theme="light"] .scrim { background: rgba(28, 26, 34, .38); }

/* High contrast, applied to the light palette instead of the dark one. */
:root[data-theme="light"][data-high-contrast="true"] {
  --text: #000000;
  --text-2: #2A2833;
  --text-3: #4A4756;
  --line: #8C8879;
  --surface: #FFFFFF;
}

:root[data-high-contrast="true"] {
  --text: #FFFFFF;
  --text-2: #D6D6E0;
  --text-3: #A0A0B0;
  --line: #4A4A5C;
  --surface: #08080B;
}
:root[data-reduce-motion="true"] * {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--void);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: calc(15px * var(--text-scale));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body.in-game { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 .7em; }
a { color: inherit; text-decoration: none; }
code, kbd, pre { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .86em; }
code { background: var(--surface-2); padding: .1em .4em; border-radius: 4px; color: var(--lavender); }
kbd {
  background: var(--raised); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: .12em .48em; font-size: .8em; color: var(--text);
  display: inline-block; margin: 0 2px;
}
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(200, 180, 228, .28); }
.muted { color: var(--text-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── scrollbars ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: #333340; }

/* ═══ boot & auth ════════════════════════════════════════════════════════ */

.boot {
  height: 100vh; display: grid; place-content: center; justify-items: center; gap: 20px;
  color: var(--text-2); letter-spacing: .3em; font-size: .78rem;
}
.boot-mark {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--lavender), #F1EBE2, var(--gold));
  clip-path: polygon(50% 6%, 92% 50%, 50% 94%, 8% 50%);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: .5; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }
.boot-error { letter-spacing: 0; max-width: 520px; text-align: center; }
.boot-error pre { background: var(--surface); padding: 12px; border-radius: var(--r); overflow-x: auto; max-width: 100%; }
.boot-hint { color: var(--text-3); }

.auth { display: grid; grid-template-columns: 1fr min(480px, 42vw); min-height: 100vh; }
.auth-art { position: relative; overflow: hidden; background: var(--void); }
.auth-grid {
  position: absolute; inset: -20%;
  background-image: linear-gradient(rgba(200,180,228,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(200,180,228,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(700px) rotateX(56deg);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 72%);
}
.auth-glow {
  position: absolute; left: 50%; top: 38%; width: 60vw; height: 60vw; translate: -50% -50%;
  background: radial-gradient(circle, rgba(200,180,228,.16), transparent 62%);
  filter: blur(30px);
}
.auth-panel { background: var(--black); border-left: 1px solid var(--line); padding: 48px 44px; overflow-y: auto; }
.auth-brand { margin-bottom: 40px; }
.auth-panel h1 { font-size: 1.7rem; margin-bottom: 8px; }
.auth-sub { color: var(--text-2); margin-bottom: 28px; }
.auth-tabs { display: flex; gap: 4px; background: var(--surface); padding: 4px; border-radius: var(--r); margin-bottom: 22px; }
.auth-tabs button {
  flex: 1; background: none; border: 0; color: var(--text-2); padding: 9px; border-radius: var(--r-sm);
  font: inherit; font-weight: 600; cursor: pointer; transition: var(--fast);
}
.auth-tabs button[aria-selected="true"] { background: var(--raised); color: var(--text); }
.auth-form { display: flex; flex-direction: column; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-3); margin: 22px 0; font-size: .82rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-guest { width: 100%; }
.auth-dev {
  margin-top: 30px; padding: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); display: flex; gap: 12px; font-size: .82rem; color: var(--text-2);
}
.auth-dev svg { width: 20px; height: 20px; flex: none; color: var(--warn); }

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-panel { border-left: 0; padding: 32px 22px; }
}

/* ═══ shell ══════════════════════════════════════════════════════════════ */

.env-banner {
  background: linear-gradient(90deg, rgba(233,185,107,.14), rgba(233,185,107,.05));
  border-bottom: 1px solid rgba(233,185,107,.28);
  color: var(--warn); font-size: .74rem; letter-spacing: .04em;
  padding: 6px 16px; text-align: center;
}
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--black); border-right: 1px solid var(--line); padding: 20px 12px;
}
.side-logo { display: block; padding: 4px 10px 22px; }
.vb-lockup { display: inline-flex; align-items: center; gap: 9px; }
.vb-word { font-size: .82rem; font-weight: 500; letter-spacing: .19em; color: var(--text-2); }
.vb-word b { font-weight: 700; color: var(--text); }
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.side-nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--r-sm);
  color: var(--text-2); font-size: .89rem; font-weight: 500; transition: var(--fast); position: relative;
}
.side-nav a svg { width: 18px; height: 18px; flex: none; }
.side-nav a:hover { background: var(--surface); color: var(--text); }
.side-nav a.active { background: var(--surface-2); color: var(--text); }
.side-nav a.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; translate: 0 -50%;
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: linear-gradient(var(--lavender), var(--gold));
}
.nav-badge {
  margin-left: auto; background: var(--danger); color: #170B0B; font-size: .64rem; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 5px;
}
/* `display` on a utility class outranks the UA `[hidden]` rule — restore it. */
[hidden] { display: none !important; }
.side-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.vc-chip, .me-chip {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: var(--r-sm);
  background: var(--surface); transition: var(--fast); font-size: .84rem;
}
.vc-chip:hover, .me-chip:hover { background: var(--surface-2); }
.me-avatar { display: grid; place-items: center; }
.me-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-name small { color: var(--text-3); font-weight: 400; }
.me-role {
  margin-left: auto; font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gold); border: 1px solid rgba(239,220,163,.32); padding: 1px 5px; border-radius: 4px;
}
.vc-amount { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.vc-amount svg { width: 16px; height: 16px; flex: none; }
.vc-amount b { font-weight: 600; }

.page { padding: 30px 34px 80px; max-width: 1560px; width: 100%; outline: none; }
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 22px;
  flex-wrap: wrap; margin-bottom: 26px;
}
.page-sub { color: var(--text-2); margin: 5px 0 0; font-size: .9rem; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-loading, .page-error { padding: 60px 0; text-align: center; color: var(--text-2); }
.page-error h2 { margin-bottom: 8px; color: var(--text); }
.back-link { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: .85rem; margin-bottom: 14px; }
.back-link svg { width: 15px; height: 15px; }
.back-link:hover { color: var(--text); }
.sub-head { margin: 18px 0 8px; color: var(--text-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto; z-index: 40;
    flex-direction: row; padding: 6px; border-right: 0; border-top: 1px solid var(--line);
  }
  .side-logo, .side-foot { display: none; }
  .side-nav { flex-direction: row; overflow-x: auto; gap: 0; }
  .side-nav a { flex-direction: column; gap: 3px; font-size: .62rem; padding: 7px 10px; min-width: 60px; }
  .side-nav a.active::before { left: 50%; top: auto; bottom: -6px; translate: -50% 0; width: 18px; height: 3px; border-radius: 3px 3px 0 0; }
  .page { padding: 20px 16px 90px; }
}

/* ═══ buttons & fields ═══════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--raised); color: var(--text); border: 1px solid var(--line);
  padding: 9px 15px; border-radius: var(--r-sm); font: inherit; font-size: .87rem; font-weight: 600;
  cursor: pointer; transition: var(--fast); white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover:not(:disabled) { background: #24242E; border-color: #33333F; transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, #E3D6F2, #F1EBE2 55%, #EFDCA3);
  color: #0B0B0E; border-color: transparent; font-weight: 700;
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #EDE3F8, #FFFFFF 55%, #F5E7BC); }
.btn-danger { background: rgba(240,122,122,.12); border-color: rgba(240,122,122,.34); color: #FFBCBC; }
.btn-danger:hover:not(:disabled) { background: rgba(240,122,122,.2); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { color: var(--text); }
.btn-small { padding: 6px 11px; font-size: .8rem; }
.btn-lg { padding: 12px 22px; font-size: .95rem; }
.icon-btn {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent; color: var(--text-2); cursor: pointer;
  transition: var(--fast); padding: 0;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.field {
  width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); padding: 9px 12px; font: inherit; font-size: .89rem; transition: var(--fast);
}
.field:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 3px rgba(200,180,228,.13); }
.field::placeholder { color: var(--text-3); }
textarea.field { resize: vertical; min-height: 76px; line-height: 1.5; }
select.field { cursor: pointer; }
input[type=color].field { padding: 3px; height: 38px; cursor: pointer; }
.field-label { display: block; font-size: .78rem; font-weight: 600; color: var(--text-2); margin: 14px 0 5px; }
.field-label:first-child { margin-top: 0; }
.field-hint { font-size: .76rem; color: var(--text-3); margin: 5px 0 0; }
.field-error { font-size: .78rem; color: var(--danger); margin: 5px 0 0; min-height: 1px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inline-form { display: flex; gap: 7px; margin-top: 10px; }
.check-row { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; cursor: pointer; font-size: .87rem; }
.check-row input { margin-top: 3px; accent-color: var(--lavender); }
.code-input { text-align: center; letter-spacing: .35em; font-size: 1.3rem; font-weight: 700; }

/* ═══ panels, pills, notices ═════════════════════════════════════════════ */

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px; margin-bottom: var(--gap);
}
.panel h2 { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; }
.panel-note { font-size: .74rem; font-weight: 500; color: var(--text-3); letter-spacing: .03em; }
.panel-foot { font-size: .78rem; color: var(--text-3); margin: 14px 0 0; display: flex; gap: 7px; align-items: flex-start; }
.panel-foot svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.panel-accent { border-color: rgba(200,180,228,.3); box-shadow: var(--glow); }
.panel-dev { border-color: rgba(233,185,107,.3); background: linear-gradient(var(--surface), rgba(233,185,107,.03)); }
.panel-dev h2 svg { width: 18px; height: 18px; color: var(--warn); }
.panel-head-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head-row h2 { margin: 0; }

.two-col { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1080px) { .two-col { grid-template-columns: 1fr; } }

.pill {
  display: inline-flex; align-items: center; font-size: .7rem; font-weight: 600; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 20px; background: var(--raised); color: var(--text-2);
  border: 1px solid var(--line); text-transform: capitalize;
}
.pill-good { background: rgba(143,224,168,.11); border-color: rgba(143,224,168,.3); color: var(--good); }
.pill-warn { background: rgba(233,185,107,.11); border-color: rgba(233,185,107,.3); color: var(--warn); }
.pill-bad { background: rgba(240,122,122,.11); border-color: rgba(240,122,122,.3); color: var(--danger); }
.pill-info { background: rgba(200,180,228,.11); border-color: rgba(200,180,228,.3); color: var(--lavender); }

.notice {
  display: flex; gap: 13px; align-items: flex-start; padding: 13px 16px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line); margin-bottom: var(--gap); font-size: .86rem;
}
.notice svg { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--lavender); }
.notice-warn { background: rgba(233,185,107,.07); border-color: rgba(233,185,107,.28); }
.notice-warn svg { color: var(--warn); }
.notice-good { background: rgba(143,224,168,.07); border-color: rgba(143,224,168,.28); }
.notice-good svg { color: var(--good); }
/* The operator control plane's stopped/failing state. Louder than `warn`,
   because "paid AI is disabled" is the one banner in the Review Center that
   must not be mistaken for an advisory. */
.notice-danger { background: rgba(240,122,122,.08); border-color: rgba(240,122,122,.3); }
.notice-danger svg { color: var(--danger); }
.notice code { font-size: .8em; }
.notice .btn { margin-top: 8px; }

.empty-state { text-align: center; padding: 44px 20px; color: var(--text-3); }
.empty-state svg { width: 34px; height: 34px; margin-bottom: 12px; opacity: .5; }
.empty-state p { max-width: 460px; margin: 0 auto 14px; }
.card-skeleton {
  height: 250px; border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%; animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

.honest-list, .err-list, .a11y-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; font-size: .87rem; }
.honest-list li { padding-left: 15px; position: relative; color: var(--text-2); }
.honest-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--lavender); }
.honest-list.negative li::before { background: var(--danger); }
.honest-list b { color: var(--text); }
.err-list li { padding-left: 15px; position: relative; color: var(--text-2); }
.err-list li::before { content: '→'; position: absolute; left: 0; color: var(--warn); }
.a11y-list { flex-direction: row; flex-wrap: wrap; gap: 7px 16px; }
.a11y-list li { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-2); }
.a11y-list svg { width: 15px; height: 15px; color: var(--good); }
.a11y-list li:has(svg[viewBox]:not(:first-child)) { color: var(--text-3); }

.fact-list, .stat-list { margin: 0; display: flex; flex-direction: column; gap: 11px; }
.fact-list > div, .stat-list > div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; font-size: .87rem; }
.fact-list.compact > div, .stat-list > div { grid-template-columns: 110px 1fr; }
.fact-list dt, .stat-list dt { color: var(--text-3); font-size: .8rem; }
.fact-list dd, .stat-list dd { margin: 0; color: var(--text); }
.stat-list dd { text-align: right; font-variant-numeric: tabular-nums; }

blockquote {
  margin: 8px 0; padding: 9px 13px; border-left: 2px solid var(--lavender);
  background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .86rem; color: var(--text-2);
}
blockquote cite { display: block; margin-top: 5px; font-size: .74rem; color: var(--text-3); font-style: normal; }

/* ═══ hub ════════════════════════════════════════════════════════════════ */

.hub-head { align-items: center; }
.hub-search { display: flex; align-items: center; gap: 8px; position: relative; }
.hub-search > svg { position: absolute; left: 11px; width: 17px; height: 17px; color: var(--text-3); pointer-events: none; }
.hub-search .field { padding-left: 35px; min-width: 300px; }
.hub-search.compact .field { min-width: 220px; }
.hub-search .btn b {
  background: rgba(11,11,14,.24); border-radius: 10px; padding: 0 6px; font-size: .74rem; margin-left: 2px;
}

.filter-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; margin-bottom: var(--gap); }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 20px; }
.filter-group h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); margin-bottom: 9px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--raised); border: 1px solid var(--line); color: var(--text-2);
  padding: 5px 11px; border-radius: 20px; font: inherit; font-size: .78rem; font-weight: 500;
  cursor: pointer; transition: var(--fast); text-transform: capitalize;
}
.chip:hover { border-color: #383846; color: var(--text); }
.chip.on { background: rgba(200,180,228,.15); border-color: var(--lavender); color: var(--lavender); }
.filter-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.filter-count { font-size: .82rem; color: var(--text-3); }

.results-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: var(--text-2); font-size: .86rem; }
.sort-select { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--text-3); }
.sort-select select {
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  padding: 5px 9px; border-radius: var(--r-sm); font: inherit; font-size: .82rem; cursor: pointer;
}

.hero {
  position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); margin-bottom: 28px; min-height: 260px; display: flex; align-items: flex-end;
}
.hero-art {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 78% 24%, color-mix(in srgb, var(--c2) 40%, transparent), transparent 58%),
    linear-gradient(115deg, var(--c1), var(--void) 72%);
}
.hero-art::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.hero-body { position: relative; padding: 34px; max-width: 620px; }
.hero-eyebrow { font-size: .68rem; letter-spacing: .18em; color: var(--gold); font-weight: 600; }
.hero-body h2 { font-size: 2.2rem; margin: 8px 0 10px; letter-spacing: -.02em; }
.hero-body p { color: var(--text-2); margin-bottom: 18px; }
.hero-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.rail { margin-bottom: 32px; }
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.rail-head h2 { font-size: 1.05rem; }
.rail-head p { color: var(--text-3); font-size: .8rem; margin: 3px 0 0; }
.rail-more { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); font-size: .8rem; font-weight: 600; }
.rail-more svg { width: 14px; height: 14px; }
.rail-more:hover { color: var(--lavender); }
.rail-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 258px; gap: 14px;
  overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity;
}
.rail-track > * { scroll-snap-align: start; }
.rail-track.size-compact { grid-auto-columns: 210px; }
.rail-track.size-large { grid-auto-columns: 310px; }

.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.game-grid.size-compact { grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); }
.game-grid.size-large { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.game-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: var(--fast); position: relative;
}
.game-card:hover { border-color: color-mix(in srgb, var(--c2) 45%, var(--line)); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.card-link { display: flex; flex-direction: column; flex: 1; }
.card-art {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(140deg, var(--c1), var(--void) 78%);
  display: grid; place-items: center;
}
.card-art-glow {
  position: absolute; inset: -30%;
  background: radial-gradient(circle at 68% 28%, color-mix(in srgb, var(--c2) 48%, transparent), transparent 56%);
  filter: blur(14px);
}
.card-art-mark {
  position: relative; font-size: 3.1rem; font-weight: 700; letter-spacing: -.04em;
  color: color-mix(in srgb, var(--c2) 82%, #FFF); opacity: .9;
  text-shadow: 0 0 34px color-mix(in srgb, var(--c2) 55%, transparent);
}
.card-origin {
  position: absolute; top: 9px; right: 9px; font-size: .58rem; letter-spacing: .12em; font-weight: 700;
  background: rgba(11,11,14,.72); border: 1px solid rgba(255,255,255,.14);
  padding: 2px 7px; border-radius: 4px; color: var(--lavender); backdrop-filter: blur(4px);
}
.card-meta { padding: 13px 14px 10px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.card-meta h3 { font-size: .98rem; }
.card-desc {
  color: var(--text-2); font-size: .8rem; margin: 0; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.card-facts { display: flex; gap: 12px; flex-wrap: wrap; font-size: .74rem; color: var(--text-3); margin-top: auto; padding-top: 5px; }
.card-facts span { display: inline-flex; align-items: center; gap: 4px; }
.card-facts svg { width: 13px; height: 13px; }
.fact-vc .vc-amount svg { width: 13px; height: 13px; }
.card-live { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--good); }
.card-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 7px var(--good); }
.card-friends { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--lavender); }
.card-friends svg { width: 13px; height: 13px; }
.card-actions { display: flex; gap: 7px; padding: 0 14px 13px; align-items: center; }
.card-actions .btn { flex: 1; }
.fav-btn { color: var(--text-3); }
.fav-btn svg { width: 19px; height: 19px; }
.fav-btn:hover { color: var(--danger); }
.fav-btn.is-fav { color: var(--danger); --heart-fill: currentColor; }

/* ═══ game detail ════════════════════════════════════════════════════════ */

.game-hero {
  display: grid; grid-template-columns: 280px 1fr; gap: 26px; margin-bottom: var(--gap);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; overflow: hidden;
}
.game-hero-art {
  aspect-ratio: 1; border-radius: var(--r); display: grid; place-items: center;
  background: linear-gradient(140deg, var(--c1), var(--void) 78%);
  border: 1px solid color-mix(in srgb, var(--c2) 26%, transparent);
}
.game-hero-art span {
  font-size: 5.5rem; font-weight: 700; color: color-mix(in srgb, var(--c2) 85%, #FFF);
  text-shadow: 0 0 46px color-mix(in srgb, var(--c2) 55%, transparent);
}
.game-hero-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.game-hero h1 { font-size: 2.3rem; margin-bottom: 10px; }
.game-hero-desc { color: var(--text-2); max-width: 66ch; }
.game-hero-by { font-size: .82rem; color: var(--text-3); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 7px var(--good); }
.game-hero-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.game-columns { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1000px) {
  .game-hero { grid-template-columns: 1fr; }
  .game-hero-art { max-width: 190px; }
  .game-columns { grid-template-columns: 1fr; }
}

.control-table, .record-table, .ledger { width: 100%; border-collapse: collapse; font-size: .85rem; }
.control-table th, .record-table th, .ledger th { text-align: left; color: var(--text-3); font-weight: 500; font-size: .78rem; padding: 7px 10px 7px 0; }
.control-table td, .record-table td, .ledger td { padding: 7px 10px 7px 0; border-top: 1px solid var(--line-soft); }
.ledger thead th { border-bottom: 1px solid var(--line); }
.ledger .pos { color: var(--good); }
.ledger .neg { color: var(--danger); }
.record-table a { color: var(--lavender); }
.record-table a:hover { text-decoration: underline; }

.ach-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ach {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); opacity: .62;
}
.ach.is-unlocked { opacity: 1; border-color: rgba(239,220,163,.28); background: rgba(239,220,163,.05); }
.ach-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; color: var(--text-3); }
.ach.is-unlocked .ach-icon { color: var(--gold); }
.ach-icon svg { width: 19px; height: 19px; }
.ach div { flex: 1; display: flex; flex-direction: column; }
.ach b { font-size: .89rem; }
.ach span { font-size: .78rem; color: var(--text-2); }
.ach-vc { flex: none; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 9px; }
.ach-chip {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 55%, var(--surface-2)), var(--surface-2));
  border: 1px solid var(--line);
}
.ach-chip svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.ach-chip div { flex: 1; min-width: 0; }
.ach-chip b { display: block; font-size: .84rem; }
.ach-chip span { font-size: .72rem; color: var(--text-3); }

.leaderboard { list-style: none; padding: 0; margin: 0; counter-reset: lb; }
.leaderboard li { display: flex; align-items: center; gap: 11px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: .86rem; }
.leaderboard li:first-child { border-top: 0; }
.lb-rank { width: 22px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lb-name { flex: 1; }
.lb-name.is-me { color: var(--gold); font-weight: 600; }
.lb-value { font-variant-numeric: tabular-nums; color: var(--text-2); }

/* ═══ social ═════════════════════════════════════════════════════════════ */

.person-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.person-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--line-soft); flex-wrap: wrap;
}
.person-list li:first-child { border-top: 0; }
.person-list.compact li { padding: 7px 0; font-size: .85rem; }
.person-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.person-main > div { display: flex; flex-direction: column; min-width: 0; }
.person-status { font-size: .76rem; color: var(--text-3); }
.tag { color: var(--text-3); font-weight: 400; font-size: .84em; }
.presence-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); flex: none; }
.presence-dot.online { background: var(--good); box-shadow: 0 0 7px rgba(143,224,168,.6); }
.presence-dot.in-game { background: var(--lavender); box-shadow: 0 0 7px rgba(200,180,228,.6); }
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.handle-box { display: flex; align-items: center; gap: 8px; padding: 11px 13px; background: var(--surface-2); border-radius: var(--r); margin-bottom: 8px; }
.handle-box b { font-size: 1.05rem; }
.handle-box .btn { margin-left: auto; }
.privacy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: .86rem; border-top: 1px solid var(--line-soft); }
.privacy-row:first-of-type { border-top: 0; }
.privacy-row select { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); padding: 5px 9px; border-radius: var(--r-sm); font: inherit; font-size: .82rem; }

.party-games { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.party-games li { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: var(--r); background: var(--surface-2); }
.pg-mark {
  width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--c1), var(--void)); color: var(--c2); font-weight: 700;
}
.party-games div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.party-games b { font-size: .87rem; }
.party-games span { font-size: .74rem; color: var(--text-3); }

.server-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.server-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.server-list li:first-child { border-top: 0; }
.server-list.big li { padding: 13px 0; }
.server-list li > div:first-child { display: flex; flex-direction: column; }
.server-list li span { font-size: .78rem; color: var(--text-3); }
.server-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.server-mark { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--c1), var(--void)); font-weight: 700; }
.server-line > div { display: flex; flex-direction: column; min-width: 0; }
.server-friends { color: var(--lavender) !important; display: inline-flex; align-items: center; gap: 4px; }
.server-friends svg { width: 12px; height: 12px; }
.server-mine { background: linear-gradient(130deg, color-mix(in srgb, var(--c1) 30%, var(--surface)), var(--surface)); }
.server-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.join-code { font-family: ui-monospace, monospace; letter-spacing: .22em; font-size: 1.05rem; font-weight: 700; color: var(--gold); }
.conn-status { font-size: .74rem; color: var(--text-3); margin-left: auto; }
.server-start { display: flex; align-items: center; gap: 13px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* current game + host-only "Change game" (see src/platform/pages/server-game.js) */
.server-game-row {
  display: flex; align-items: center; justify-content: space-between; gap: 13px; flex-wrap: wrap;
  padding: 11px 13px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .02);
}
.server-game-now { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.server-game-label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.server-game-origin, .server-origin { font-size: .74rem; }

.game-choice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; }
.game-choice {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 22%, var(--surface)), var(--surface));
  color: inherit; font: inherit;
}
.game-choice:hover:not([disabled]) { border-color: var(--lavender); }
.game-choice.is-selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.game-choice[disabled], .game-choice.is-blocked { opacity: .45; cursor: not-allowed; }
.game-choice-mark { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--c1), var(--void)); font-weight: 700; }
.game-choice-main { display: flex; flex-direction: column; min-width: 0; }
.game-choice-sub { font-size: .76rem; color: var(--text-3); }
.game-choice-why { font-size: .74rem; color: var(--amber, var(--gold)); }
.game-choice.is-current b { color: var(--gold); }

/* ═══ wallet ═════════════════════════════════════════════════════════════ */

.wallet-hero {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 26px; align-items: center;
  background: linear-gradient(125deg, rgba(239,220,163,.08), var(--surface) 55%);
  border: 1px solid rgba(239,220,163,.2); border-radius: var(--r-lg); padding: 26px; margin-bottom: var(--gap);
}
.wallet-label { font-size: .72rem; letter-spacing: .16em; color: var(--text-3); }
.wallet-amount { font-size: 2.6rem; font-weight: 700; margin: 5px 0; }
.wallet-amount .vc-amount svg { width: 32px; height: 32px; }
.wallet-sub { font-size: .8rem; color: var(--text-3); }
.wallet-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 16px; margin: 0; }
.wallet-stats div { display: flex; flex-direction: column; }
.wallet-stats dt { font-size: .72rem; color: var(--text-3); }
.wallet-stats dd { margin: 0; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .wallet-hero { grid-template-columns: 1fr; } }

.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: var(--gap); overflow-x: auto; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-2);
  padding: 10px 15px; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: var(--fast); white-space: nowrap;
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--lavender); }

.cosmetic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cosmetic { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 7px; }
/* Hosts the shared item art (src/platform/item-art.js). The tile keeps the
   item's colour as the wash; the art sits on top as the single render instance. */
.cosmetic-swatch {
  height: 52px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: linear-gradient(120deg, var(--c), var(--void) 88%);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
}
/* The wash already carries the colour, so the art is a neutral overlay here
   rather than a second tinted tile stacked on a tinted tile. */
.cosmetic-swatch .item-art {
  width: 100%; height: 100%; background: none; border: none; border-radius: inherit;
  color: color-mix(in srgb, var(--c) 72%, #F1EBE2);
}
.cosmetic-swatch .item-art svg { width: 30px; height: 30px; }
.cosmetic h3 { font-size: .89rem; }
.cosmetic p { font-size: .76rem; color: var(--text-3); margin: 0; flex: 1; }
.cosmetic-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.owned { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--good); }
.owned svg { width: 15px; height: 15px; }

.bundle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.bundle { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; text-align: center; display: flex; flex-direction: column; gap: 9px; }
.bundle-amount .vc-amount { font-size: 1.25rem; }
.bundle-amount .vc-amount svg { width: 21px; height: 21px; }
.bundle-note { font-size: .72rem; color: var(--gold); }
.bundle-price { font-size: 1.05rem; font-weight: 600; color: var(--text-2); }

.stat-tile { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 15px; display: flex; flex-direction: column; gap: 3px; }
.stat-tile span { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 3px; }
.stat-tile span i { font-size: .82rem; font-style: normal; color: var(--text-3); font-weight: 400; }
.stat-tile span .vc-amount { font-size: 1.45rem; }
.stat-tile small { font-size: .72rem; color: var(--text-3); }
.profile-summary, .creator-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: var(--gap); }

.save-list, .mini-ledger, .project-list, .review-list { list-style: none; padding: 0; margin: 0; }
.save-list li, .mini-ledger li, .project-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 11px;
  padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: .86rem;
}
.save-list li:first-child, .mini-ledger li:first-child, .project-list li:first-child { border-top: 0; }
.mini-ledger li { flex-wrap: wrap; }
.mini-ledger span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-ledger small { color: var(--text-3); font-size: .74rem; }
.mini-ledger b.pos { color: var(--good); }
.mini-ledger b.neg { color: var(--danger); }
.mini-ledger blockquote { flex-basis: 100%; margin: 4px 0 0; }
.save-list li > div { display: flex; flex-direction: column; }
.project-row a { flex: 1; display: block; min-width: 0; }
.project-row a > div { display: flex; flex-direction: column; }
.project-row:hover b { color: var(--lavender); }

/* ═══ creator ════════════════════════════════════════════════════════════ */

.credit-packages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.credit-pkg {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 13px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer; font: inherit; color: var(--text);
  transition: var(--fast); text-align: left;
}
.credit-pkg:hover { border-color: var(--lavender); background: var(--raised); }
.credit-pkg b { font-size: .95rem; }
.pkg-note { font-size: .7rem; color: var(--gold); }
.template-grid { display: grid; gap: 8px; }
.template { display: block; cursor: pointer; }
.template input { position: absolute; opacity: 0; }
.template span {
  display: flex; flex-direction: column; gap: 3px; padding: 13px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface-2); transition: var(--fast);
}
.template input:checked + span { border-color: var(--lavender); background: rgba(200,180,228,.07); }
.template small { color: var(--text-3); font-size: .78rem; }
.estimate-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 13px; margin: 16px 0; font-size: .84rem; }
.estimate-box b { font-size: 1.05rem; display: block; margin-bottom: 7px; }
.estimate-box ul { list-style: none; padding: 0; margin: 0 0 7px; display: flex; flex-direction: column; gap: 3px; }
.estimate-box li { display: flex; justify-content: space-between; color: var(--text-3); font-size: .78rem; }
.estimate-box small { color: var(--text-3); }
.pub-form section { margin-bottom: var(--gap); }
.control-editor, .control-row { display: flex; flex-direction: column; gap: 7px; }
.control-row { flex-direction: row; align-items: center; }
.control-row .field { flex: 1; }
.ach-editor { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 10px; }
.verify-row { display: grid; grid-template-columns: 2fr 90px 110px; gap: 7px; }
.checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 2px; }
.form-save-bar {
  position: sticky; bottom: 0; background: linear-gradient(transparent, var(--void) 35%);
  padding: 16px 0 8px; font-size: .78rem; color: var(--text-3); text-align: right;
}
.feedback-block { margin-bottom: 14px; }
.doc { border-top: 1px solid var(--line-soft); padding: 10px 0; }
.doc summary { cursor: pointer; font-weight: 600; font-size: .89rem; }
.doc[open] summary { margin-bottom: 9px; color: var(--lavender); }
.doc p { font-size: .85rem; color: var(--text-2); }
.doc pre { background: var(--surface-2); padding: 11px; border-radius: var(--r-sm); overflow-x: auto; }
.pipeline { margin: 0; padding-left: 20px; font-size: .86rem; color: var(--text-2); display: flex; flex-direction: column; gap: 5px; }

/* ═══ admin ══════════════════════════════════════════════════════════════ */

.review-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.review-list li:first-child { border-top: 0; }
.review-main { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 0; }
.review-main > div { display: flex; flex-direction: column; min-width: 0; }
.review-mark { width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--c1), var(--void)); font-weight: 700; font-size: 1.15rem; }
.review-sub { font-size: .76rem; color: var(--text-3); }
.review-risk { font-size: .74rem; color: var(--warn); display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; }
.review-risk svg { width: 13px; height: 13px; }
.risk-high .review-mark { box-shadow: 0 0 0 2px rgba(240,122,122,.4); }
.risk-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 20px; font-size: .8rem; font-weight: 600; text-transform: capitalize; background: var(--surface-2); border: 1px solid var(--line); }
.risk-badge svg { width: 16px; height: 16px; }
.risk-badge.risk-high { background: rgba(240,122,122,.11); border-color: rgba(240,122,122,.32); color: var(--danger); }
.risk-badge.risk-medium { background: rgba(233,185,107,.11); border-color: rgba(233,185,107,.32); color: var(--warn); }
.risk-badge.risk-low { color: var(--good); }
.decision-stack { display: flex; flex-direction: column; gap: 8px; }
.report-reason { margin: 6px 0 0; font-size: .82rem; }
.dev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 14px 0; }
.dev-log pre { background: var(--void); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px; font-size: .74rem; max-height: 210px; overflow: auto; color: var(--text-2); }
.dev-log pre.err { color: var(--danger); }

/* ═══ settings ═══════════════════════════════════════════════════════════ */

.settings-list { display: flex; flex-direction: column; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.setting-row:first-child { border-top: 0; }
.setting-row > div { display: flex; flex-direction: column; }
.setting-row b { font-size: .89rem; font-weight: 600; }
.setting-row small { font-size: .76rem; color: var(--text-3); margin-top: 2px; max-width: 60ch; }
.opt-switch {
  width: 42px; height: 24px; border-radius: 13px; background: var(--raised); border: 1px solid var(--line);
  position: relative; cursor: pointer; transition: var(--fast); flex: none; padding: 0;
}
.opt-switch span, .opt-switch::after {
  content: ''; position: absolute; left: 3px; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; border-radius: 50%; background: var(--text-3); transition: var(--fast);
}
.opt-switch.on { background: rgba(200,180,228,.28); border-color: var(--lavender); }
.opt-switch.on span, .opt-switch.on::after { left: 21px; background: var(--lavender); }
.range-wrap { display: flex; align-items: center; gap: 11px; position: relative; }
.range-wrap input[type=range] { width: 150px; accent-color: var(--lavender); }
.range-wrap output { font-size: .8rem; color: var(--text-3); min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
/* Default marker: a tick under the slider at the schema default, so a player
   can see where "normal" is without resetting to find out. */
.range-wrap .range-default {
  position: absolute; left: calc(6px + 138px * var(--at)); bottom: 2px;
  width: 2px; height: 6px; border-radius: 1px; background: var(--text-3); opacity: .55; pointer-events: none;
}
.btn.btn-tiny { padding: 3px 8px; font-size: .72rem; border-radius: var(--r-sm); }
.setting-row select { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); padding: 6px 10px; border-radius: var(--r-sm); font: inherit; font-size: .84rem; }
.binding-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 8px; margin: 14px 0; }
.binding { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 8px 11px; background: var(--surface-2); border-radius: var(--r-sm); font-size: .85rem; }
.key-btn { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }
.key-btn.listening { color: var(--lavender); font-size: .78rem; }
.binding-note { grid-column: 1 / -1; font-size: .78rem; color: var(--text-3); padding-top: 6px; }

/* ═══ toasts, modals, promos ═════════════════════════════════════════════ */

#toast-root { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 11px; background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r); padding: 11px 15px; box-shadow: var(--shadow); font-size: .87rem;
  max-width: 400px; opacity: 0; transform: translateY(12px); transition: var(--slow); pointer-events: auto;
}
.toast.show { opacity: 1; transform: none; }
.toast-icon { display: grid; place-items: center; }
.toast-icon svg { width: 18px; height: 18px; color: var(--lavender); }
.toast-text { flex: 1; }
.toast-warn { border-color: rgba(233,185,107,.4); }
.toast-error { border-color: rgba(240,122,122,.4); }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 300; background: rgba(3,3,5,.72); backdrop-filter: blur(7px);
  display: grid; place-items: center; padding: 22px; opacity: 0; transition: var(--fast);
}
.modal-backdrop.show { opacity: 1; }
.modal {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  width: min(520px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow); transform: scale(.97); transition: var(--fast);
}
.modal-wide { width: min(760px, 100%); }
.modal-backdrop.show .modal { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px 12px; }
.modal-body { padding: 0 20px 18px; overflow-y: auto; }
.modal-text { color: var(--text-2); font-size: .89rem; white-space: pre-line; }
/* Consequence lists in a confirmation. A destructive-looking admin action is
   far easier to judge as a short list of effects than as a paragraph. */
.modal-list { margin: 10px 0 12px 18px; color: var(--text-2); font-size: .84rem; display: flex; flex-direction: column; gap: 5px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }

.promo {
  display: flex; align-items: center; gap: 16px; padding: 15px 18px; margin-bottom: var(--gap);
  border-radius: var(--r-lg); border: 1px solid rgba(200,180,228,.22);
  background: linear-gradient(120deg, rgba(200,180,228,.07), var(--surface) 62%);
  transition: var(--slow);
}
.promo.dismissed { opacity: 0; transform: translateY(-6px); }
.promo-body { flex: 1; min-width: 0; }
.promo-body h4 { font-size: .92rem; margin-bottom: 3px; }
.promo-body p { font-size: .82rem; color: var(--text-2); margin: 0; }
.promo-price { display: flex; align-items: center; gap: 9px; margin-top: 7px; font-size: .82rem; }
.promo-price span { color: var(--text-3); font-size: .74rem; }
.promo-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.promo-dismiss { width: 28px; height: 28px; }
.promo-dismiss svg { width: 15px; height: 15px; }

/* ═══ game layer ═════════════════════════════════════════════════════════ */

.game-layer { position: fixed; inset: 0; z-index: 100; background: var(--void); }
.game-shell { position: absolute; inset: 0; pointer-events: none; }
.game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.sandbox-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--black); }

.game-hud {
  position: absolute; top: 0; left: 0; right: 0; height: 46px; z-index: 3;
  display: flex; align-items: center; gap: 12px; padding: 0 12px; pointer-events: auto;
  background: linear-gradient(rgba(5,5,7,.82), transparent);
}
.hud-btn {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  color: var(--text-2); cursor: pointer; padding: 0; transition: var(--fast); flex: none;
}
.hud-btn svg { width: 17px; height: 17px; }
.hud-btn:hover { background: rgba(255,255,255,.11); color: var(--text); }
.hud-title { font-size: .8rem; font-weight: 600; letter-spacing: .1em; color: var(--text-2); }
.hud-status { font-size: .78rem; color: var(--text-3); }
.hud-spacer { flex: 1; }
.hud-custom { font-size: .78rem; color: var(--text-2); }
.hud-score { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-fps { font-size: .72rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

.game-overlay {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 22px;
  background: rgba(4,4,6,.86); backdrop-filter: blur(9px); pointer-events: auto; overflow-y: auto;
}
.ov-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px; width: min(660px, 100%); box-shadow: var(--shadow); max-height: 90vh; overflow-y: auto;
}
.ov-narrow { width: min(400px, 100%); text-align: center; }
.ov-menu {
  background:
    radial-gradient(ellipse at 82% 12%, color-mix(in srgb, var(--c2) 17%, transparent), transparent 58%),
    linear-gradient(150deg, color-mix(in srgb, var(--c1) 45%, var(--surface)), var(--surface) 62%);
}
.ov-eyebrow { font-size: .68rem; letter-spacing: .2em; color: var(--gold); font-weight: 600; }
.ov-title { font-size: 2.4rem; margin: 7px 0 12px; letter-spacing: -.02em; }
.ov-desc { color: var(--text-2); font-size: .92rem; max-width: 62ch; }
.ov-sub { color: var(--text-2); }
.ov-facts { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.ov-facts > div { display: grid; grid-template-columns: 82px 1fr; gap: 13px; font-size: .85rem; }
.ov-facts dt { color: var(--text-3); font-size: .78rem; }
.ov-facts dd { margin: 0; color: var(--text-2); }
.ov-best { font-size: .82rem; color: var(--gold); margin-bottom: 12px; }
.ov-vc, .ov-warn { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--text-2); margin-bottom: 12px; }
.ov-vc svg, .ov-warn svg { width: 18px; height: 18px; flex: none; }
.ov-warn { color: var(--warn); }
.ov-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 22px; }
.ov-actions.ov-stack { flex-direction: column; }
.ov-narrow .ov-actions { justify-content: center; }
.ov-controls { width: 100%; border-collapse: collapse; font-size: .87rem; margin: 14px 0; }
.ov-controls th { text-align: left; color: var(--text-2); font-weight: 500; padding: 7px 12px 7px 0; }
.ov-controls td { padding: 7px 0; }
.ov-note { font-size: .78rem; color: var(--text-3); }
.ov-error { background: var(--void); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px; font-size: .74rem; color: var(--danger); overflow-x: auto; }
.ov-result.is-win .ov-eyebrow { color: var(--good); }
.ov-result.is-lose .ov-eyebrow { color: var(--danger); }
.res-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 14px; margin: 20px 0; }
.res-stats > div { display: flex; flex-direction: column; }
.res-stats dt { font-size: .72rem; color: var(--text-3); }
.res-stats dd { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.res-rewards { display: flex; flex-direction: column; gap: 10px; }
.res-pending { color: var(--text-3); font-size: .85rem; }
.res-vc {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--r);
  background: rgba(239,220,163,.09); border: 1px solid rgba(239,220,163,.3);
}
.res-vc svg { width: 24px; height: 24px; }
.res-vc b { font-size: 1.15rem; color: var(--gold); }
.res-vc span { font-size: .8rem; color: var(--text-2); }
.res-unlocked h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); margin-bottom: 7px; }
.res-ach { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-2); border-radius: var(--r); margin-bottom: 6px; }
.res-ach svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.res-ach span { font-size: .78rem; color: var(--text-3); }
.res-note { font-size: .82rem; color: var(--text-3); }
.res-error { color: var(--warn); }
.opt-group { margin-bottom: 20px; }
.opt-group h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); margin-bottom: 9px; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; background: none; border: 0; border-top: 1px solid var(--line-soft); color: var(--text); font: inherit; padding: 10px 0; cursor: pointer; text-align: left; }
.opt-label { display: flex; flex-direction: column; }
.opt-label small { font-size: .74rem; color: var(--text-3); }
.opt-slider { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: .87rem; }
.opt-slider span { flex: 1; }
.opt-slider input { width: 160px; accent-color: var(--lavender); }
.opt-slider output { min-width: 42px; text-align: right; color: var(--text-3); font-size: .8rem; }

/* ═══ in-game chat ═══════════════════════════════════════════════════════ */

.chatbox { position: absolute; top: 54px; left: 12px; z-index: 4; width: 296px; pointer-events: auto; font-size: .84rem; }
.chat-toggle {
  display: flex; align-items: center; gap: 7px; background: rgba(11,11,14,.78); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-sm); color: var(--text-2);
  padding: 6px 11px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: var(--fast);
}
.chat-toggle svg { width: 16px; height: 16px; }
.chat-toggle:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.chat-unread { background: var(--danger); color: #170B0B; font-size: .64rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; }
.chat-panel {
  margin-top: 6px; background: rgba(11,11,14,.9); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column; max-height: 300px;
}
.chatbox.is-typing .chat-panel { border-color: var(--lavender); box-shadow: 0 0 0 2px rgba(200,180,228,.2); }
.chat-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,.07); }
.chat-tabs button { flex: 1; background: none; border: 0; color: var(--text-3); padding: 7px; font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; }
.chat-tabs button[aria-selected="true"] { color: var(--text); background: rgba(255,255,255,.05); }
.chat-log { flex: 1; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; min-height: 110px; }
.chat-msg { display: flex; gap: 6px; align-items: baseline; line-height: 1.4; font-size: .8rem; }
.chat-msg.is-system { color: var(--text-3); font-style: italic; font-size: .74rem; }
.chat-who { color: var(--lavender); font-weight: 600; flex: none; }
.chat-msg.is-mine .chat-who { color: var(--gold); }
.chat-text { color: var(--text-2); word-break: break-word; flex: 1; }
.chat-flag { font-size: .62rem; color: var(--warn); flex: none; }
.chat-mute { background: none; border: 0; color: var(--text-3); cursor: pointer; opacity: 0; padding: 0 3px; font-size: .9rem; }
.chat-msg:hover .chat-mute { opacity: 1; }
.chat-form { display: flex; gap: 5px; padding: 7px; border-top: 1px solid rgba(255,255,255,.07); }
.chat-input { flex: 1; background: rgba(255,255,255,.05); border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text); padding: 6px 9px; font: inherit; font-size: .8rem; }
.chat-input:focus { outline: none; border-color: var(--lavender); background: rgba(255,255,255,.09); }
.chat-send { display: grid; place-items: center; width: 30px; background: rgba(255,255,255,.06); border: 0; border-radius: var(--r-sm); color: var(--text-2); cursor: pointer; }
.chat-send svg { width: 15px; height: 15px; }
.chat-note { padding: 0 10px 7px; font-size: .72rem; color: var(--warn); }
.chat-note:empty { display: none; }

@media (max-width: 620px) {
  .chatbox { width: calc(100vw - 24px); max-width: 296px; }
  .ov-card { padding: 22px 18px; }
  .ov-title { font-size: 1.7rem; }
}

/* ═══ NEXUS entry & Avatar Studio ════════════════════════════════════════ */

.side-nexus {
  background: linear-gradient(120deg, rgba(200,180,228,.16), rgba(239,220,163,.08));
  border: 1px solid rgba(200,180,228,.3);
  margin-bottom: 8px;
  color: var(--text) !important;
  font-weight: 600;
}
.side-nexus:hover { background: linear-gradient(120deg, rgba(200,180,228,.24), rgba(239,220,163,.14)); }
.side-nexus svg { color: var(--lavender); }

.avatar-studio { min-height: 60vh; }
.nexus-mount { position: absolute; inset: 0; }
.nexus-mount canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 900px) {
  .side-nexus { margin-bottom: 0; border-radius: var(--r-sm); }
}

/* ── light theme: surfaces that paint their own colour ────────────────────
   A handful of places do not resolve their background through the token block
   — they blend a per-game accent (`--c1`/`--c2`, set inline on the element)
   into `--void`, or overlay white at low alpha. Both assume a dark base, so on
   the light palette the featured hero came out as a dark slab with the new
   near-black text on top of it: unreadable.

   These rules re-mix the same accents as a LIGHT wash. The game's colour still
   identifies the card; it just sits under the text instead of fighting it. */
:root[data-theme="light"] .hero-art {
  background:
    radial-gradient(ellipse at 78% 24%, color-mix(in srgb, var(--c2) 22%, transparent), transparent 60%),
    linear-gradient(115deg, color-mix(in srgb, var(--c1) 26%, var(--black)), var(--black) 74%);
}
/* The decorative grid was white-on-dark; invert it so it still reads. */
:root[data-theme="light"] .hero-art::after {
  background-image: linear-gradient(rgba(26, 24, 32, .05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(26, 24, 32, .05) 1px, transparent 1px);
}
:root[data-theme="light"] .game-hero-art,
:root[data-theme="light"] .card-art {
  background:
    radial-gradient(ellipse at 70% 30%, color-mix(in srgb, var(--c2) 30%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--c1) 32%, var(--black)), var(--black) 78%);
}
/* The big letter mark on an art tile is mixed towards WHITE in the dark theme,
   which vanishes on a light wash. Mix it towards the text colour instead. */
:root[data-theme="light"] .card-art-mark {
  color: color-mix(in srgb, var(--c2) 55%, var(--text));
  text-shadow: none;
  opacity: .85;
}
:root[data-theme="light"] .game-hero-art span { color: color-mix(in srgb, var(--c1) 55%, var(--text)); }