/* ============================================================
   DEMAN PLAY · 电鳗陪玩 — design system
   亲切 · 好玩 · 不太深 — lighter, playful sibling of demanone.com
   Violet signature + playful accent set · light default + dark toggle
   ============================================================ */

:root{
  /* ---- violet brand (shared, slightly brighter & friendlier) ---- */
  --v-signature: oklch(0.60 0.21 295);
  --v-bright:    oklch(0.66 0.19 298);
  --v-neon:      oklch(0.80 0.13 300);
  --v-deep:      oklch(0.50 0.20 292);

  /* ---- playful accent set (shared L≈.72 / C≈.16, hue varies) ---- */
  --a-coral: oklch(0.72 0.16 25);
  --a-amber: oklch(0.80 0.14 78);
  --a-mint:  oklch(0.74 0.14 162);
  --a-cyan:  oklch(0.72 0.13 232);
  --a-pink:  oklch(0.72 0.17 348);

  /* status */
  --ok:   oklch(0.72 0.16 152);   /* online */
  --busy: oklch(0.78 0.15 70);    /* 接单中 */

  /* ---- LIGHT theme (default) — warm, soft, not too deep ---- */
  --bg:        oklch(0.984 0.008 312);
  --bg-2:      oklch(0.965 0.013 312);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.975 0.011 312);
  --line:      oklch(0.90 0.016 308);
  --line-soft: oklch(0.935 0.012 308);
  --text:      oklch(0.26 0.035 296);
  --text-dim:  oklch(0.46 0.03 298);
  --text-mute: oklch(0.62 0.025 300);
  --card-grad: linear-gradient(180deg, oklch(1 0 0), oklch(0.982 0.009 312));
  --glow: 0 0 0 1px oklch(0.62 0.21 295/.10), 0 10px 30px -12px oklch(0.62 0.21 295/.35);
  --shadow: 0 22px 50px -28px oklch(0.40 0.10 296 / .40);
  --shadow-sm: 0 6px 20px -12px oklch(0.40 0.10 296 / .35);
  --aura:
     radial-gradient(1100px 640px at 86% -14%, oklch(0.86 0.10 312 / .65), transparent 58%),
     radial-gradient(900px 560px at -8% 8%, oklch(0.90 0.07 232 / .55), transparent 55%),
     radial-gradient(760px 520px at 50% 118%, oklch(0.90 0.08 162 / .40), 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:1240px;
  --r:22px;
  --r-sm:14px;
}

html[data-theme="dark"]{
  --bg:        oklch(0.20 0.022 296);
  --bg-2:      oklch(0.235 0.024 296);
  --surface:   oklch(0.265 0.026 296);
  --surface-2: oklch(0.305 0.028 296);
  --line:      oklch(0.38 0.03 296);
  --line-soft: oklch(0.33 0.026 296);
  --text:      oklch(0.96 0.008 300);
  --text-dim:  oklch(0.80 0.02 300);
  --text-mute: oklch(0.64 0.022 300);
  --v-bright:  oklch(0.78 0.15 300);
  --card-grad: linear-gradient(180deg, oklch(0.285 0.027 296), oklch(0.25 0.024 296));
  --glow: 0 0 0 1px oklch(0.7 0.18 298/.18), 0 0 26px -6px oklch(0.62 0.21 295/.6);
  --shadow: 0 26px 60px -30px oklch(0 0 0 / .7);
  --shadow-sm: 0 8px 24px -14px oklch(0 0 0 / .6);
  --aura:
     radial-gradient(1100px 640px at 86% -14%, oklch(0.40 0.12 300 / .55), transparent 58%),
     radial-gradient(900px 560px at -8% 8%, oklch(0.38 0.10 232 / .42), transparent 55%),
     radial-gradient(760px 520px at 50% 120%, oklch(0.40 0.10 162 / .30), transparent 60%);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:86px; }
body{
  background:var(--aura), var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
  transition:background-color .4s ease, color .4s ease;
}
.cn{ font-family:var(--cn); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
section{ position:relative; }
::selection{ background:var(--v-signature); color:#fff; }

/* ---------- 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:.18em; line-height:1; }
.logo .play{ color:var(--v-signature); }
html[data-theme="dark"] .logo .play{ color:var(--v-bright); }
.logo .tld{ font-family:var(--mono); font-style:normal; font-weight:500; font-size:.42em; color:var(--text-mute); letter-spacing:.10em; 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:13px 22px; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s, color .2s, border-color .2s; white-space:nowrap; }
.btn .ic{ 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 -10px var(--v-signature); }
.btn-primary:hover{ transform:translateY(-2px) scale(1.015); box-shadow:0 16px 34px -10px var(--v-signature); }
.btn-ghost{ color:var(--text); border-color:var(--line); background:var(--surface); }
.btn-ghost:hover{ border-color:var(--v-signature); color:var(--v-signature); transform:translateY(-2px); }
.btn-coral{ color:#fff; background:linear-gradient(135deg,var(--a-coral),oklch(0.62 0.18 22)); box-shadow:0 10px 26px -10px var(--a-coral); }
.btn-coral:hover{ transform:translateY(-2px) scale(1.015); box-shadow:0 16px 34px -10px var(--a-coral); }
.btn-sm{ padding:9px 16px; font-size:12px; }
.btn-lg{ padding:16px 30px; font-size:15px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- eyebrow / headings ---------- */
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--v-signature);
  display:inline-flex; align-items:center; gap:11px; font-weight:500; }
.eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:var(--v-signature); }
html[data-theme="dark"] .eyebrow{ color:var(--v-bright); }
.h-sec{ font-family:var(--cn); font-weight:800; font-size:clamp(28px,3.6vw,44px); letter-spacing:-.02em; line-height:1.12; }
.sec-lede{ color:var(--text-dim); font-size:16.5px; max-width:640px; margin-top:14px; text-wrap:pretty; }
.sec-pad{ padding:96px 0; }
.sec-head{ margin-bottom:48px; }
.hl{ color:var(--v-signature); }
html[data-theme="dark"] .hl{ color:var(--v-bright); }

/* ============================================================ NAV */
.nav{ position:sticky; top:0; z-index:100; backdrop-filter:blur(16px) saturate(1.3);
  background:color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--line-soft); transition:background .4s; }
.nav .wrap{ display:flex; align-items:center; gap:22px; height:72px; }
.nav .brand{ font-size:23px; }
.nav .links{ display:flex; gap:2px; margin-left:8px; }
.nav .links a{ font-family:var(--cn); font-weight:600; font-size:14.5px; color:var(--text-dim); padding:9px 14px; border-radius:999px; transition:.18s; position:relative; white-space:nowrap; }
.nav .links a:hover{ color:var(--text); background:var(--surface-2); }
.nav .links a.active{ color:var(--v-signature); background:color-mix(in oklab,var(--v-signature) 12%,transparent); }
html[data-theme="dark"] .nav .links a.active{ color:var(--v-bright); }
.nav .right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* perspective switch (老板 / 陪玩) */
.persona{ display:inline-flex; padding:4px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface-2); gap:2px; }
.persona button{ font-family:var(--hud); font-weight:700; font-size:12.5px; padding:7px 14px; border-radius:999px; border:0; background:transparent; color:var(--text-mute); cursor:pointer; transition:.18s; white-space:nowrap; }
.persona button.on{ background:var(--v-signature); color:#fff; box-shadow:0 4px 12px -4px var(--v-signature); }
.persona button:not(.on):hover{ color:var(--text); }

.icon-btn{ width:42px; height:42px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--text-dim); cursor:pointer; display:grid; place-items:center; transition:.2s; flex:none; }
.icon-btn:hover{ color:var(--v-signature); border-color:var(--v-signature); }
.icon-btn svg{ width:18px; height:18px; }
.theme-btn .i-sun{ display:none; }
html[data-theme="dark"] .theme-btn .i-sun{ display:block; }
html[data-theme="dark"] .theme-btn .i-moon{ display:none; }
.lang-btn{ width:auto; padding:0 14px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.06em; gap:6px; }
.lang-btn svg{ width:15px; height:15px; }
.burger{ display:none; }

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:200; background:color-mix(in oklab,var(--bg) 96%, transparent); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; padding:26px; gap:6px; transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); }
.drawer.open{ transform:translateX(0); }
.drawer .dtop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.drawer a{ font-family:var(--cn); font-weight:600; font-size:22px; padding:13px 6px; border-bottom:1px solid var(--line-soft); color:var(--text); }
.drawer .dcta{ margin-top:22px; }

/* nav wallet balance + top-up (shown after login, boss context) */
.nav-wallet{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--text-dim); transition:.18s; white-space:nowrap; }
.nav-wallet:hover{ border-color:var(--v-signature); color:var(--v-signature); }
html[data-theme="dark"] .nav-wallet:hover{ border-color:var(--v-bright); color:var(--v-bright); }
.nav-wallet svg{ width:16px; height:16px; flex:none; }
.nav-wallet .wbal{ font-family:var(--mono); font-weight:500; font-size:13px; color:var(--text); letter-spacing:.01em; }
.nav-topup{ flex:none; }
@media(max-width:860px){ .nav-wallet{ display:none; } }

/* ============================================================ generic chips / tags */
.chip{ font-family:var(--hud); font-weight:600; font-size:12.5px; padding:6px 13px; border-radius:999px; border:1.5px solid var(--line); color:var(--text-dim); background:var(--surface); display:inline-flex; align-items:center; gap:6px; }
.chip.solid{ background:var(--v-signature); color:#fff; border-color:transparent; }

/* discord-role tag (the "tag wall") */
.rtag{ font-family:var(--cn); font-weight:600; font-size:12.5px; padding:5px 11px 5px 9px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; line-height:1;
  background:color-mix(in oklab, var(--rc,var(--v-signature)) 14%, var(--surface)); color:var(--rc,var(--v-signature)); border:1px solid color-mix(in oklab,var(--rc,var(--v-signature)) 30%, transparent); }
.rtag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--rc,var(--v-signature)); flex:none; }
html[data-theme="dark"] .rtag{ background:color-mix(in oklab, var(--rc,var(--v-bright)) 22%, transparent); color:color-mix(in oklab,var(--rc,var(--v-bright)) 80%, white); }

/* live / 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:999px; 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.busy{ color:var(--busy); border-color:color-mix(in oklab,var(--busy) 45%,transparent); }
.status.busy .dot{ background:var(--busy); box-shadow:0 0 8px var(--busy); }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* verified / pro badges */
.badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--hud); font-weight:700; font-size:11px; letter-spacing:.02em; padding:4px 9px; border-radius:7px; }
.badge svg{ width:12px; height:12px; }
.badge.pro{ background:linear-gradient(135deg,var(--a-amber),oklch(0.72 0.16 55)); color:#3a2600; }
.badge.streamer{ background:linear-gradient(135deg,var(--a-pink),var(--v-bright)); color:#fff; }

/* ============================================================ avatar (generated gradient) */
.av{ position:relative; border-radius:50%; 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 2px oklch(1 0 0 /.25); }
.av .ring{ position:absolute; inset:0; border-radius:50%; }
.av-dot{ position:absolute; right:-2px; bottom:-2px; width:30%; height:30%; min-width:12px; min-height:12px; border-radius:50%; border:2.5px solid var(--surface); background:var(--text-mute); }
.av-dot.online{ background:var(--ok); }
.av-dot.busy{ background:var(--busy); }

/* ============================================================ companion card (名片) */
.cgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(266px,1fr)); gap:20px; }
.pcard{ background:var(--card-grad); border:1.5px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s, border-color .22s; position:relative; }
.pcard:hover{ transform:translateY(-6px); border-color:var(--v-signature); box-shadow:var(--shadow); }
.pcard .cover{ position:relative; height:124px; overflow:hidden; }
.pcard .cover .bgfx{ position:absolute; inset:0; background:var(--cover-grad,linear-gradient(120deg,var(--v-bright),var(--a-cyan))); }
.pcard .cover .bgfx::after{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(oklch(1 0 0/.25) 1px,transparent 1.4px); background-size:13px 13px; mask:linear-gradient(180deg,#000,transparent); }
.pcard .cover .game-badge{ position:absolute; top:11px; left:11px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:7px;
  background:oklch(0.18 0.02 296/.55); color:#fff; backdrop-filter:blur(4px); }
.pcard .cover .status{ position:absolute; top:11px; right:11px; background:oklch(0.18 0.02 296/.5); color:#fff; border-color:transparent; backdrop-filter:blur(4px); }
.pcard .cover .status .dot{ background:#fff; }
.pcard .cover .status.online .dot{ background:#54f0a8; box-shadow:0 0 8px #54f0a8; }
.pcard .head{ display:flex; gap:13px; align-items:flex-end; padding:0 18px; margin-top:-32px; position:relative; }
.pcard .head .av{ width:66px; height:66px; font-size:24px; border:3px solid var(--surface); }
.pcard .head .who{ padding-bottom:4px; min-width:0; }
.pcard .head .nm{ font-family:var(--cn); font-weight:800; font-size:18px; letter-spacing:-.01em; display:flex; align-items:center; gap:7px; }
.pcard .head .hd{ font-family:var(--mono); font-size:11.5px; color:var(--text-mute); margin-top:1px; }
.pcard .body{ padding:13px 18px 18px; display:flex; flex-direction:column; gap:12px; flex:1; }
.pcard .games{ display:flex; flex-wrap:wrap; gap:6px; }
.pcard .gp{ font-family:var(--cn); font-weight:600; font-size:12px; padding:4px 10px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line-soft); color:var(--text-dim); display:inline-flex; gap:6px; align-items:center; white-space:nowrap; }
.pcard .gp b{ color:var(--v-signature); font-weight:700; }
.pcard .tagwall{ display:flex; flex-wrap:wrap; gap:6px; }
.pcard .meta{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft); }
.pcard .rate{ display:flex; align-items:center; gap:5px; font-family:var(--hud); font-weight:700; font-size:14px; color:var(--text); }
.pcard .rate svg{ width:15px; height:15px; color:var(--a-amber); }
.pcard .rate small{ font-family:var(--mono); font-weight:400; font-size:10.5px; color:var(--text-mute); }
.pcard .price{ margin-left:auto; text-align:right; white-space:nowrap; }
.pcard .price .v{ font-family:var(--display); font-style:italic; font-weight:800; font-size:22px; color:var(--v-signature); line-height:1; }
html[data-theme="dark"] .pcard .price .v{ color:var(--v-bright); }
.pcard .price .u{ font-family:var(--cn); font-size:11px; color:var(--text-mute); }
.pcard .cardcta{ display:flex; gap:8px; }
.pcard .cardcta .btn{ flex:1; }

/* ============================================================ FOOTER */
footer.ft{ border-top:1px solid var(--line-soft); margin-top:96px; padding:56px 0 40px; }
.ft .top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; }
.ft .brand{ font-size:28px; }
.ft .addr{ font-family:var(--cn); font-size:13.5px; color:var(--text-mute); margin-top:16px; line-height:1.7; max-width:280px; }
.ft .col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); margin-bottom:16px; }
.ft .col a{ display:block; font-family:var(--cn); font-size:14px; color:var(--text-dim); padding:6px 0; transition:.16s; }
.ft .col a:hover{ color:var(--v-signature); }
.ft .col a .ext{ font-family:var(--mono); font-size:10px; color:var(--text-mute); margin-left:6px; }
.ft .bot{ display:flex; justify-content:space-between; align-items:center; margin-top:46px; padding-top:24px; border-top:1px solid var(--line-soft); flex-wrap:wrap; gap:12px; }
.ft .bot span{ font-family:var(--mono); font-size:11.5px; color:var(--text-mute); letter-spacing:.04em; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto; } *{ animation:none !important; } }

/* ---------- responsive base ---------- */
@media(max-width:1180px){
  .nav .links{ display:none; }
  .burger{ display:grid; }
  .nav .right .nav-cta{ display:none; }
}
@media(max-width:760px){
  .sec-pad{ padding:64px 0; }
  .ft .top{ grid-template-columns:1fr 1fr; gap:28px; }
  .persona button{ padding:7px 10px; font-size:11.5px; }
}
@media(max-width:430px){ .ft .top{ grid-template-columns:1fr; } }