/* ============================================================
   DEMAN PLAY · play-neon.css — 暗色霓虹主题覆盖层 (方案B 风格延续)
   用法:在每个内页的 play.css / play-pages.css 之后再加一行
     <link rel="stylesheet" href="play-neon.css">
   想回滚:删掉这一行 <link> 即可,不动其它代码。
   ============================================================ */

/* ---------- tokens:无论 light/dark 都强制成霓虹暗色 ---------- */
:root,
html[data-theme="light"],
html[data-theme="dark"]{
  --v-signature: oklch(0.66 0.20 295);
  --v-bright:    oklch(0.75 0.17 298);
  --v-neon:      oklch(0.82 0.13 300);
  --v-deep:      oklch(0.52 0.20 292);

  --a-cyan:  oklch(0.78 0.13 210);
  --a-pink:  oklch(0.73 0.19 348);
  --a-mint:  oklch(0.80 0.15 168);
  --a-amber: oklch(0.82 0.15 80);
  --a-coral: oklch(0.70 0.19 25);

  --bg:        #0c0a14;
  --bg-2:      #120e1e;
  --surface:   rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.08);
  --line:      rgba(255,255,255,.12);
  --line-soft: rgba(255,255,255,.07);
  --text:      #f4f0ff;
  --text-dim:  #bbb1d6;
  --text-mute: #877e9c;
  --card-grad: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  --glow: 0 0 0 1px rgba(157,107,255,.20), 0 0 26px -6px rgba(157,107,255,.6);
  --shadow:    0 24px 60px -28px rgba(0,0,0,.72);
  --shadow-sm: 0 10px 26px -16px rgba(0,0,0,.6);
  --ok: oklch(0.78 0.16 162);
}

/* ---------- 页面底:深色 + 霓虹氛围光 ---------- */
html, body{ background:#0c0a14 !important; color:var(--text); }
body{
  background-image:
    radial-gradient(58% 48% at 82% -4%, color-mix(in srgb,var(--v-signature) 34%,transparent), transparent 60%),
    radial-gradient(52% 44% at 3% 5%, color-mix(in srgb,var(--a-cyan) 22%,transparent), transparent 60%) !important;
  background-attachment:fixed !important;
}
.grid-tex{ opacity:.5; }

/* ---------- 顶栏:玻璃 + 霓虹字标 ---------- */
.nav{ background:color-mix(in srgb,#0c0a14 70%,transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.logo, .brand{ color:var(--text); }
.logo .play{ color:var(--v-bright) !important; text-shadow:0 0 18px rgba(157,107,255,.7); }
.logo .tld{ color:var(--text-mute); }
.nav .links a{ color:var(--text-dim); }
.nav .links a:hover{ color:#fff; background:var(--surface-2); }
.nav .links a.active{ color:var(--v-bright); background:color-mix(in srgb,var(--v-signature) 18%,transparent); }
/* nav dropdown groups (价目 / 陪玩中心) */
.navdrop{ position:relative; }
.navdrop-trigger{ display:inline-flex; align-items:center; gap:5px; font-family:var(--cn); font-weight:600; font-size:14px; color:var(--text-dim); background:transparent; border:0; cursor:pointer; padding:9px 13px; border-radius:999px; transition:.16s; white-space:nowrap; }
.navdrop-trigger svg{ width:14px; height:14px; transition:.2s; opacity:.7; }
.navdrop:hover .navdrop-trigger, .navdrop.open .navdrop-trigger{ color:#fff; background:var(--surface-2); }
.navdrop.active .navdrop-trigger{ color:var(--v-bright); background:color-mix(in srgb,var(--v-signature) 18%,transparent); }
.navdrop:hover .navdrop-trigger svg, .navdrop.open .navdrop-trigger svg{ transform:rotate(180deg); }
.navdrop-menu{ position:absolute; top:calc(100% + 8px); left:0; min-width:170px; display:flex; flex-direction:column; gap:2px; padding:7px; border-radius:14px;
  background:var(--bg-2); border:1.5px solid var(--line); box-shadow:0 24px 60px -26px rgba(0,0,0,.7);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:.16s; z-index:120; }
.navdrop:hover .navdrop-menu, .navdrop.open .navdrop-menu{ opacity:1; transform:none; pointer-events:auto; }
.navdrop-menu a{ font-family:var(--cn); font-weight:600; font-size:13.5px; color:var(--text-dim); padding:9px 13px; border-radius:9px; white-space:nowrap; transition:.14s; }
.navdrop-menu a:hover{ color:#fff; background:var(--surface-2); }
.navdrop-menu a.active{ color:var(--v-bright); background:color-mix(in srgb,var(--v-signature) 16%,transparent); }
.draw-grp{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); padding:14px 0 4px; }
.icon-btn{ background:var(--surface); border-color:var(--line); color:var(--text-dim); }
.icon-btn:hover{ color:var(--v-bright); border-color:var(--v-bright); }
.nav-wallet{ background:var(--surface); border-color:var(--line); color:var(--text-dim); }

/* ---------- 按钮:霓虹辉光 ---------- */
.btn-primary{ background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); color:#fff;
  box-shadow:0 0 0 1px rgba(157,107,255,.5), 0 0 26px -4px rgba(157,107,255,.6), 0 14px 30px -14px rgba(157,107,255,.8); }
.btn-primary:hover{ box-shadow:0 0 0 1px rgba(157,107,255,.85), 0 0 38px -2px rgba(157,107,255,.85); }
.btn-ghost{ background:var(--surface); border-color:var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--v-bright); color:#fff; box-shadow:0 0 26px -10px rgba(157,107,255,.8); }

/* ---------- 卡片 / 面板:玻璃 + 霓虹描边 ---------- */
.pcard, .stat, .step, .mode, .disc-panel, .roles-box, .filters, .viptier, .order,
.vip-hero, .vip-now, .card, .panel, .sync-note, .discord-cta, .hall, .hallcard,
.profile-card, .pcol, .obody, .osum{
  background:var(--card-grad); border-color:var(--line);
}
.pcard:hover, .step:hover, .mode:hover, .gtile:hover, .viptier:hover{
  border-color:var(--v-bright); box-shadow:var(--shadow), 0 0 30px -16px rgba(157,107,255,.7);
}
.pcard{ box-shadow:none; }

/* ---------- 表单控件 ---------- */
input, textarea, select{ background:rgba(255,255,255,.04) !important; border-color:var(--line) !important; color:var(--text) !important; }
input::placeholder, textarea::placeholder{ color:var(--text-mute) !important; }
input:focus, textarea:focus, select:focus{ border-color:var(--v-bright) !important; box-shadow:0 0 0 4px rgba(157,107,255,.18) !important; }
.search input{ background:rgba(255,255,255,.04) !important; }

/* ---------- 强调元素 ---------- */
.eyebrow{ color:var(--v-bright); }
.eyebrow::before{ background:var(--v-bright); box-shadow:0 0 10px rgba(157,107,255,.7); }
.hl, .h-sec .hl{ color:var(--v-bright); }
.pcard .price .v, .stat .num{ color:var(--v-bright); }
.stat .num.alt{ color:var(--a-coral); } .stat .num.alt2{ color:var(--a-mint); } .stat .num.alt3{ color:var(--a-cyan); }
.chip.solid{ background:var(--v-signature); }
.fopt.on{ background:var(--v-signature); border-color:var(--v-signature); box-shadow:0 0 18px -8px rgba(157,107,255,.8); }

/* ---------- 杂项 ---------- */
.ft{ border-top:1px solid var(--line); }
.modal-bg{ background:rgba(8,6,14,.6); }
hr, .divider{ border-color:var(--line); }
::selection{ background:var(--v-signature); color:#fff; }

/* avatars/covers already use gradients — leave as-is */

/* ---------- 交付页:内容永不被 scroll-reveal 藏住(play.js 的 IO 在直链打开时可能不触发) ---------- */
.reveal{ opacity:1 !important; transform:none !important; }

/* ============================================================
   THEMES + 全站导航统一(配合 play-neon.js)
   默认 = 暗夜霓虹紫. 四套配色都在暗底上,只换强调色(霓虹一致).
   ============================================================ */
html[data-theme="pink"]{ --v-signature:#ff5ca8; --v-bright:#ff86c0; --v-deep:#d63d86; --a-cyan:#ff86c0; --a-pink:#ff5ca8;
  --bg:#1a0c16; --bg-2:#241224; --surface:rgba(255,255,255,.055); --surface-2:rgba(255,255,255,.09); }
html[data-theme="aurora"]{ --v-signature:#1fc7e6; --v-bright:#4fe3f2; --v-deep:#1a9fc0; --a-cyan:#34e3b0;
  --bg:#07171b; --bg-2:#0c2026; --surface:rgba(255,255,255,.05); --surface-2:rgba(255,255,255,.085); }
html[data-theme="magenta"]{ --v-signature:#ff5cab; --v-bright:#c887ff; --v-deep:#c2369a; --a-cyan:#c264ff;
  --bg:#180a1a; --bg-2:#211030; --surface:rgba(255,255,255,.055); --surface-2:rgba(255,255,255,.09); }
/* per-theme page base + glow so each neon theme actually reads its color (not black) */
html[data-theme="pink"], html[data-theme="pink"] body{ background:#1a0c16 !important; }
html[data-theme="aurora"], html[data-theme="aurora"] body{ background:#07171b !important; }
html[data-theme="magenta"], html[data-theme="magenta"] body{ background:#180a1a !important; }
html[data-theme="pink"] body{ background-image:
    radial-gradient(60% 50% at 82% -4%, color-mix(in srgb,#ff5ca8 42%,transparent), transparent 62%),
    radial-gradient(54% 46% at 2% 4%, color-mix(in srgb,#ff86c0 26%,transparent), transparent 60%) !important; }
html[data-theme="aurora"] body{ background-image:
    radial-gradient(60% 50% at 82% -4%, color-mix(in srgb,#22d3ee 38%,transparent), transparent 62%),
    radial-gradient(54% 46% at 2% 4%, color-mix(in srgb,#34e3b0 24%,transparent), transparent 60%) !important; }
html[data-theme="magenta"] body{ background-image:
    radial-gradient(60% 50% at 82% -4%, color-mix(in srgb,#ff5cab 40%,transparent), transparent 62%),
    radial-gradient(54% 46% at 2% 4%, color-mix(in srgb,#c264ff 26%,transparent), transparent 60%) !important; }

/* 白天 / DAY — 浅色模式(白底 + 紫强调) */
html[data-theme="day"]{
  --v-signature: oklch(0.58 0.21 295); --v-bright: oklch(0.54 0.21 294); --v-neon: oklch(0.58 0.21 295); --v-deep: oklch(0.48 0.2 292);
  --a-cyan: oklch(0.58 0.13 220); --a-pink: oklch(0.62 0.2 348); --a-mint: oklch(0.58 0.13 165); --a-amber: oklch(0.68 0.14 75); --a-coral: oklch(0.62 0.19 25);
  --bg:#f5f3fb; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f1ecfa;
  --line: rgba(40,28,70,.14); --line-soft: rgba(40,28,70,.08);
  --text:#1c1730; --text-dim:#56506a; --text-mute:#8d8699;
  --card-grad: linear-gradient(180deg,#ffffff,#faf8ff);
  --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 8px 22px -16px oklch(0.4 0.1 296/.4);
  --ok: oklch(0.55 0.15 162);
}
html[data-theme="day"], html[data-theme="day"] body{ background:#f5f3fb !important; color:var(--text); }
html[data-theme="day"] body{ background-image:
    radial-gradient(58% 48% at 82% -4%, color-mix(in srgb,#7c4dff 13%,transparent), transparent 60%),
    radial-gradient(52% 44% at 3% 5%, color-mix(in srgb,#22d3ee 10%,transparent), transparent 60%) !important; }
html[data-theme="day"] .nav{ background:color-mix(in srgb,#fff 74%,transparent); border-bottom:1px solid var(--line); }
html[data-theme="day"] .logo .play{ text-shadow:none; }
html[data-theme="day"] .navdrop-menu, html[data-theme="day"] #di-acct-pop, html[data-theme="day"] #grabber-pop{ background:#fff; }

/* nav: 桌面保留 tab,只有手机(≤860)才收成抽屉 */
@media(min-width:861px){ .nav .links{ display:flex !important; } .burger{ display:none !important; } .nav .right .nav-cta{ display:inline-flex !important; } }
@media(max-width:860px){ .nav .links{ display:none; } .burger{ display:grid; } .theme-switch{ display:none; } }
.theme-switch{ position:relative; }
.ts-trigger{ display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer;color:var(--text-dim);transition:.16s; }
.ts-trigger:hover{ color:var(--text);border-color:color-mix(in srgb,var(--v-signature) 55%,var(--line)); }
.ts-dot{ width:16px;height:16px;border-radius:50%;flex:none;background:linear-gradient(135deg,#9d6bff,#22d3ee);box-shadow:0 0 10px -3px var(--v-signature); }
html[data-theme="day"] .ts-dot{ background:linear-gradient(135deg,#ffffff,#d7ccf5);border:1px solid rgba(0,0,0,.15); }
html[data-theme="pink"] .ts-dot{ background:linear-gradient(135deg,#ff5ca8,#ffd1e8); }
html[data-theme="aurora"] .ts-dot{ background:linear-gradient(135deg,#22d3ee,#34e3b0); }
html[data-theme="magenta"] .ts-dot{ background:linear-gradient(135deg,#ff5cab,#c264ff); }
html[data-theme="jade"] .ts-dot{ background:linear-gradient(135deg,#2fe6a8,#0fa36b); }
html[data-theme="sunset"] .ts-dot{ background:linear-gradient(135deg,#ffb36b,#ff7a3c); }
html[data-theme="goldlux"] .ts-dot{ background:linear-gradient(135deg,#ffe08a,#d99a14); }
.ts-menu{ position:absolute;top:calc(100% + 10px);right:0;min-width:180px;display:flex;flex-direction:column;gap:2px;padding:7px;border-radius:14px;background:var(--bg-2);border:1.5px solid var(--line);box-shadow:0 24px 60px -26px rgba(0,0,0,.7);opacity:0;transform:translateY(-6px);pointer-events:none;transition:.16s;z-index:130; }
.theme-switch.open .ts-menu{ opacity:1;transform:none;pointer-events:auto; }
.ts-menu button{ display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;border:0;background:transparent;color:var(--text-dim);font-family:var(--cn);font-weight:600;font-size:13px;cursor:pointer;text-align:left;white-space:nowrap;width:100%; }
.ts-menu button:hover{ background:var(--surface-2);color:var(--text); }
.ts-menu button.on{ color:var(--text);background:color-mix(in srgb,var(--v-signature) 14%,transparent); }
.ts-menu .sw{ width:16px;height:16px;border-radius:50%;flex:none;border:1px solid rgba(127,127,127,.25); }
.ts-menu .vipdot{ margin-left:auto;width:7px;height:7px;border-radius:50%;flex:none;background:linear-gradient(135deg,#ffd56a,#ffb02e); }
.ts-menu button.unlocked .vipdot{ display:none; }

/* —— 新增 VIP 皮肤 —— */
html[data-theme="jade"]{ --v-signature:#1fc78f; --v-bright:#2fe6a8; --v-deep:#0fa36b; --a-cyan:#34e3b0;
  --bg:#07190f; --bg-2:#0c241a; --surface:rgba(255,255,255,.05); --surface-2:rgba(255,255,255,.085); }
html[data-theme="jade"], html[data-theme="jade"] body{ background:#07190f !important; }
html[data-theme="jade"] body{ background-image:
    radial-gradient(60% 50% at 82% -4%, color-mix(in srgb,#2fe6a8 36%,transparent), transparent 62%),
    radial-gradient(54% 46% at 2% 4%, color-mix(in srgb,#34e3b0 22%,transparent), transparent 60%) !important; }
html[data-theme="sunset"]{ --v-signature:#ff8a3c; --v-bright:#ffb36b; --v-deep:#e06a1a; --a-cyan:#ffc53d;
  --bg:#1c0f06; --bg-2:#261609; --surface:rgba(255,255,255,.055); --surface-2:rgba(255,255,255,.09); }
html[data-theme="sunset"], html[data-theme="sunset"] body{ background:#1c0f06 !important; }
html[data-theme="sunset"] body{ background-image:
    radial-gradient(60% 50% at 82% -4%, color-mix(in srgb,#ff8a3c 38%,transparent), transparent 62%),
    radial-gradient(54% 46% at 2% 4%, color-mix(in srgb,#ffc53d 24%,transparent), transparent 60%) !important; }
html[data-theme="goldlux"]{ --v-signature:#e8b23d; --v-bright:#ffe08a; --v-deep:#c28e14; --a-cyan:#ffe08a;
  --bg:#15100a; --bg-2:#201810; --surface:rgba(255,255,255,.055); --surface-2:rgba(255,255,255,.09); }
html[data-theme="goldlux"], html[data-theme="goldlux"] body{ background:#15100a !important; }
html[data-theme="goldlux"] body{ background-image:
    radial-gradient(60% 50% at 82% -4%, color-mix(in srgb,#ffc53d 34%,transparent), transparent 62%),
    radial-gradient(54% 46% at 2% 4%, color-mix(in srgb,#ffe08a 20%,transparent), transparent 60%) !important; }