/* ============================================================
   DEMAN MATCH · 电鳗开黑 — design system
   The competitive / command-console sibling of Deman Play.
   Dark default · sharper geometry · HUD typography · neon queue accents.
   Shares the Deman type DNA (Saira / Chakra Petch / Space Grotesk /
   Noto Sans SC / JetBrains Mono) + the violet brand gene.
   ============================================================ */

:root{
  /* violet brand gene (shared with Deman) */
  --v-sig:    oklch(0.64 0.20 296);
  --v-bright: oklch(0.74 0.17 298);
  --v-neon:   oklch(0.82 0.13 300);
  --v-deep:   oklch(0.50 0.20 292);

  /* queue / match accents — the new signature of Match */
  --q-cyan:   oklch(0.78 0.14 215);   /* queueing / scanning */
  --q-lime:   oklch(0.84 0.18 135);   /* match found / go */
  --q-amber:  oklch(0.82 0.15 75);    /* waiting / slots open */
  --q-coral:  oklch(0.70 0.18 22);    /* urgent / 1 slot left */
  --q-pink:   oklch(0.74 0.17 348);

  /* rank metals (LoL-aware) */
  --rk-iron:    oklch(0.55 0.02 50);
  --rk-bronze:  oklch(0.60 0.09 55);
  --rk-silver:  oklch(0.78 0.02 250);
  --rk-gold:    oklch(0.82 0.13 85);
  --rk-plat:    oklch(0.78 0.10 190);
  --rk-emerald: oklch(0.74 0.15 158);
  --rk-diamond: oklch(0.80 0.12 230);
  --rk-master:  oklch(0.66 0.19 305);
  --rk-gm:      oklch(0.66 0.18 18);
  --rk-chal:    oklch(0.84 0.13 90);

  /* status */
  --ok:   oklch(0.80 0.17 145);
  --warn: oklch(0.82 0.15 75);

  /* default theme is DARK — terminal/arena */
  --bg:        oklch(0.165 0.018 290);
  --bg-2:      oklch(0.195 0.020 290);
  --surface:   oklch(0.225 0.022 290);
  --surface-2: oklch(0.265 0.024 290);
  --surface-3: oklch(0.305 0.026 290);
  --line:      oklch(0.36 0.028 292);
  --line-soft: oklch(0.30 0.024 292);
  --grid-line: oklch(0.30 0.022 292 / .5);
  --text:      oklch(0.97 0.006 300);
  --text-dim:  oklch(0.80 0.018 300);
  --text-mute: oklch(0.62 0.020 300);
  --card-grad: linear-gradient(180deg, oklch(0.245 0.023 290), oklch(0.205 0.020 290));
  --shadow:    0 28px 60px -32px oklch(0 0 0 / .75);
  --shadow-sm: 0 10px 26px -16px oklch(0 0 0 / .65);
  --glow-v:    0 0 0 1px oklch(0.7 0.18 298/.22), 0 0 30px -6px oklch(0.62 0.21 295/.55);
  --aura:
     radial-gradient(1200px 700px at 84% -16%, oklch(0.40 0.14 298 / .42), transparent 56%),
     radial-gradient(1000px 600px at -6% 4%, oklch(0.40 0.12 215 / .30), transparent 56%),
     radial-gradient(820px 560px at 50% 120%, oklch(0.42 0.13 135 / .18), transparent 60%);

  --mono:"JetBrains Mono",ui-monospace,monospace;
  --sans:"Space Grotesk","Noto Sans SC",system-ui,sans-serif;
  --cn:"Noto Sans SC","Space Grotesk",system-ui,sans-serif;
  --display:"Saira","Noto Sans SC",sans-serif;
  --hud:"Chakra Petch","Noto Sans SC",sans-serif;

  --maxw:1320px;
  --r:14px;
  --r-sm:9px;
  --r-xs:6px;
}

html[data-theme="light"]{
  --bg:        oklch(0.975 0.008 300);
  --bg-2:      oklch(0.955 0.012 300);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.965 0.010 300);
  --surface-3: oklch(0.945 0.013 300);
  --line:      oklch(0.89 0.016 300);
  --line-soft: oklch(0.925 0.012 300);
  --grid-line: oklch(0.90 0.012 300 / .7);
  --text:      oklch(0.24 0.035 296);
  --text-dim:  oklch(0.44 0.03 298);
  --text-mute: oklch(0.60 0.025 300);
  --card-grad: linear-gradient(180deg, oklch(1 0 0), oklch(0.982 0.008 300));
  --shadow:    0 26px 56px -32px oklch(0.40 0.10 296 / .42);
  --shadow-sm: 0 8px 22px -14px oklch(0.40 0.10 296 / .34);
  --aura:
     radial-gradient(1200px 700px at 84% -16%, oklch(0.86 0.10 298 / .55), transparent 56%),
     radial-gradient(1000px 600px at -6% 4%, oklch(0.90 0.07 215 / .45), transparent 56%),
     radial-gradient(820px 560px at 50% 120%, oklch(0.90 0.10 135 / .30), transparent 60%);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--aura), var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
}
.cn{ font-family:var(--cn); }
.mono{ font-family:var(--mono); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
::selection{ background:var(--v-sig); color:#fff; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:99px; border:3px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--line); background-clip:padding-box; }

/* ---------- wordmark ---------- */
.logo{ font-family:var(--display); font-style:italic; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; color:var(--text); display:inline-flex; align-items:baseline; gap:.2em; line-height:1; }
.logo .accent{ color:var(--v-bright); }
.logo .tld{ font-family:var(--mono); font-style:normal; font-weight:500; font-size:.4em; color:var(--text-mute); letter-spacing:.08em; text-transform:none; align-self:center; white-space:nowrap; }

/* ---------- buttons ---------- */
.btn{ font-family:var(--hud); font-weight:700; font-size:13.5px; letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 20px; border-radius:var(--r-sm); cursor:pointer; border:1.5px solid transparent;
  transition:transform .16s cubic-bezier(.34,1.5,.64,1), box-shadow .2s, background .2s, color .2s, border-color .2s; white-space:nowrap; }
.btn svg{ width:16px; height:16px; flex:none; }
.btn-primary{ color:#fff; background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); box-shadow:0 10px 26px -12px var(--v-sig); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px var(--v-sig); }
.btn-go{ color:oklch(0.20 0.04 150); background:linear-gradient(135deg,var(--q-lime),oklch(0.74 0.17 150)); box-shadow:0 10px 26px -12px var(--q-lime); }
.btn-go:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px var(--q-lime); }
.btn-ghost{ color:var(--text); border-color:var(--line); background:var(--surface); }
.btn-ghost:hover{ border-color:var(--v-bright); color:var(--v-bright); transform:translateY(-2px); }
.btn-coral{ color:#fff; background:linear-gradient(135deg,var(--q-coral),oklch(0.60 0.19 18)); box-shadow:0 10px 26px -12px var(--q-coral); }
.btn-coral:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px var(--q-coral); }
.btn-sm{ padding:8px 14px; font-size:12px; }
.btn-lg{ padding:15px 28px; font-size:15px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

/* ---------- eyebrow / headings ---------- */
.eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--v-bright);
  display:inline-flex; align-items:center; gap:10px; font-weight:500; }
.eyebrow::before{ content:""; width:20px; height:2px; border-radius:2px; background:var(--v-bright); }
.h1{ font-family:var(--cn); font-weight:900; font-size:clamp(34px,5vw,62px); letter-spacing:-.025em; line-height:1.04; }
.h2{ font-family:var(--cn); font-weight:800; font-size:clamp(26px,3.4vw,40px); letter-spacing:-.02em; line-height:1.1; }
.h3{ font-family:var(--cn); font-weight:800; font-size:21px; letter-spacing:-.01em; }
.lede{ color:var(--text-dim); font-size:16px; max-width:600px; text-wrap:pretty; }
.hl{ color:var(--v-bright); }

/* ---------- chips / pills ---------- */
.chip{ font-family:var(--hud); font-weight:600; font-size:12.5px; padding:6px 12px; border-radius:var(--r-xs); border:1.5px solid var(--line); color:var(--text-dim); background:var(--surface); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.chip.on{ background:color-mix(in oklab,var(--v-sig) 18%,transparent); color:var(--v-neon); border-color:color-mix(in oklab,var(--v-sig) 50%,transparent); }
.chip.solid{ background:var(--v-sig); color:#fff; border-color:transparent; }

/* rank tag — uses --rc set inline */
.rtag{ font-family:var(--hud); font-weight:700; font-size:12px; padding:4px 10px; border-radius:var(--r-xs); display:inline-flex; align-items:center; gap:6px; line-height:1; letter-spacing:.01em;
  background:color-mix(in oklab, var(--rc,var(--v-sig)) 18%, transparent); color:color-mix(in oklab,var(--rc,var(--v-sig)) 82%, white); border:1px solid color-mix(in oklab,var(--rc,var(--v-sig)) 38%, transparent); }
.rtag::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--rc,var(--v-sig)); flex:none; transform:rotate(45deg); }

/* status pill */
.status{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; white-space:nowrap;
  padding:4px 9px; border-radius:99px; border:1px solid var(--line); color:var(--text-mute); background:var(--surface); }
.status .dot{ width:7px; height:7px; border-radius:50%; background:var(--text-mute); }
.status.online{ color:var(--ok); border-color:color-mix(in oklab,var(--ok) 40%,transparent); }
.status.online .dot{ background:var(--ok); box-shadow:0 0 8px var(--ok); animation:pulse 1.6s infinite; }
.status.queue{ color:var(--q-cyan); border-color:color-mix(in oklab,var(--q-cyan) 45%,transparent); }
.status.queue .dot{ background:var(--q-cyan); box-shadow:0 0 8px var(--q-cyan); animation:pulse 1s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---------- avatar (generated gradient) ---------- */
.av{ position:relative; border-radius:var(--r-xs); display:grid; place-items:center; color:#fff; font-family:var(--display); font-style:italic; font-weight:800; flex:none; overflow:hidden;
  background:var(--av-grad, linear-gradient(135deg,var(--v-bright),var(--v-deep))); box-shadow:inset 0 0 0 1.5px oklch(1 0 0 /.18); }
.av.round{ border-radius:50%; }
.av-dot{ position:absolute; right:-3px; bottom:-3px; width:34%; height:34%; min-width:11px; min-height:11px; border-radius:50%; border:2.5px solid var(--surface); background:var(--text-mute); }
.av-dot.online{ background:var(--ok); }
.av-dot.queue{ background:var(--q-cyan); }

/* empty slot avatar */
.slot-empty{ border-radius:var(--r-xs); border:1.5px dashed var(--line); display:grid; place-items:center; color:var(--text-mute); background:color-mix(in oklab,var(--surface) 60%,transparent); flex:none; transition:.18s; }
.slot-empty.want{ border-color:var(--q-amber); color:var(--q-amber); background:color-mix(in oklab,var(--q-amber) 12%,transparent); }
.slot-empty.want.urgent{ border-color:var(--q-coral); color:var(--q-coral); background:color-mix(in oklab,var(--q-coral) 14%,transparent); animation:slotpulse 1.4s infinite; }
@keyframes slotpulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in oklab,var(--q-coral) 40%,transparent); } 50%{ box-shadow:0 0 0 5px transparent; } }

/* ---------- generic layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 26px; }
.card{ background:var(--card-grad); border:1.5px solid var(--line); border-radius:var(--r); }
.divider{ height:1px; background:var(--line-soft); border:0; }
.muted{ color:var(--text-mute); }
.dim{ color:var(--text-dim); }

/* grid backdrop motif */
.gridfx{ position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:54px 54px; mask:radial-gradient(70% 70% at 50% 30%,#000,transparent 78%); opacity:.5; }

/* reveal */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } *{ animation-duration:.001ms !important; } }

/* ---------- legal docs ---------- */
.lg-doc{ min-width:0; max-width:820px; }
.lg-doc .lg-eff{ font-family:var(--mono); font-size:12.5px; color:var(--v-bright); margin:0 0 22px; }
.lg-doc .lg-h{ font-family:var(--cn); font-weight:800; font-size:19px; letter-spacing:-.01em; margin:30px 0 10px; padding-top:22px; border-top:1px solid var(--line-soft); color:var(--text); }
.lg-doc .lg-h:first-of-type{ border-top:0; padding-top:0; }
.lg-doc p{ font-family:var(--cn); font-size:15px; color:var(--text-dim); line-height:1.85; margin-bottom:14px; text-wrap:pretty; }
.lg-doc .lg-ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:0 0 16px; padding:0; }
.lg-doc .lg-ul li{ font-family:var(--cn); font-size:14.5px; color:var(--text-dim); line-height:1.7; padding-left:24px; position:relative; }
.lg-doc .lg-ul li::before{ content:""; position:absolute; left:2px; top:9px; width:8px; height:8px; border-radius:2px; background:var(--v-bright); transform:rotate(45deg); }
.lg-doc a{ color:var(--v-bright); }