/* ============================================================
   房间大厅 · 设计系统「金克丝霓虹夜城」
   风格：虚空黑底 + 霓虹粉 + 电光青 + 微光紫，圆角面板 / 霓虹辉光
   ============================================================ */

:root {
  /* 品牌主色：霓虹粉（Jinx Pink） */
  --accent: #ff2d95;
  --accent-hover: #ff5fb0;
  --accent-active: #c8126d;
  --accent-soft: rgba(255, 45, 149, .14);
  --accent-softer: rgba(255, 45, 149, .06);
  --accent-contrast: #14040e;
  /* 语义第二主色：微光紫（沿用 --gold 变量名） */
  --gold: #a06bff;
  --gold-soft: rgba(160, 107, 255, .16);
  --gold-bright: #f3ecff;
  --gold-line: rgba(160, 107, 255, .5);

  /* 电光青（Arcane Cyan） */
  --hex: #00e5ff;
  --hex-deep: #11b8d8;
  --hex-night: #123a5e;

  /* 霓虹点缀色 */
  --neon-yellow: #ffea00;
  --neon-pink-2: #ff00a9;
  --neon-violet: #845df2;

  /* 语义色 */
  --success: #2ee6a8;
  --success-soft: rgba(46, 230, 168, .12);
  --warning: #ffc93d;
  --warning-soft: rgba(255, 201, 61, .13);
  --danger: #ff4d6d;
  --danger-soft: rgba(255, 77, 109, .14);
  --info: #00e5ff;
  --info-soft: rgba(0, 229, 255, .12);

  /* 中性色：虚空黑 / 暗夜紫 */
  --bg: #0b0714;
  --surface: #140d24;
  --surface-2: #1a1130;
  --surface-3: #241844;
  --elevated: #1c1234;
  --border: #2c1f4d;
  --border-strong: #452e75;
  --text: #f3ecff;
  --text-2: #b9aed6;
  --muted: #8d82ab;
  --faint: #61567e;
  --scrim: rgba(6, 2, 14, .72);

  /* 微质感：霓虹辉光 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .5);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, .58);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .7);
  --ring: 0 0 0 2px rgba(255, 45, 149, .4), 0 0 22px rgba(255, 45, 149, .22);

  /* 尺寸 */
  --sidebar-w: 232px;
  --topbar-h: 60px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  /* 兼容旧变量（霓虹层不再使用斜切） */
  --bevel: 10px;
  --bevel-sm: 7px;

  /* 字体：街头粗黑无衬线 */
  --font-display: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;

  /* 段位色板（暗屏提亮） */
  --tier-0: #8B8F96;  /* 黑铁 */
  --tier-1: #C08A52;  /* 青铜 */
  --tier-2: #C7CDD6;  /* 白银 */
  --tier-3: #E3B54B;  /* 黄金 */
  --tier-4: #3FCFC4;  /* 铂金 */
  --tier-5: #2FC47E;  /* 翡翠 */
  --tier-6: #5B9BEE;  /* 钻石 */
  --tier-7: #A56FE0;  /* 大师 */
  --tier-8: #E85B6E;  /* 宗师 */
  --tier-9: #F0D27A;  /* 王者 */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .5, 1);
}

[data-theme="dark"] {
  --accent: #ff2d95;
  --accent-hover: #ff7ec0;
  --accent-active: #c8126d;
  --accent-soft: rgba(255, 45, 149, .13);
  --accent-softer: rgba(255, 45, 149, .05);
  --gold: #a06bff;
  --gold-soft: rgba(160, 107, 255, .15);

  --bg: #080410;
  --surface: #100a1e;
  --surface-2: #160d2a;
  --surface-3: #201340;
  --elevated: #180e30;
  --border: #261945;
  --border-strong: #3e286c;
  --text: #f4efff;
  --text-2: #b3a7d0;
  --muted: #887da5;
  --faint: #5b5178;
  --scrim: rgba(4, 1, 10, .78);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .55);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, .62);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .78);
  --ring: 0 0 0 2px rgba(255, 45, 149, .38), 0 0 22px rgba(255, 45, 149, .2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 560px at 82% -14%, rgba(255, 45, 149, .15), transparent 62%),
    radial-gradient(1000px 680px at -14% 106%, rgba(132, 93, 242, .16), transparent 60%),
    radial-gradient(760px 420px at 50% 118%, rgba(0, 229, 255, .08), transparent 64%),
    linear-gradient(180deg, rgba(36, 16, 60, .22), transparent 42%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}

h1, h2, h3, h4, h5 {
  font-weight: 800; color: var(--gold-bright); line-height: 1.35;
  font-family: var(--font-display);
  letter-spacing: .03em;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; color: var(--text); }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(255, 45, 149, .32); color: #fff; }

/* 数字等宽（钱包/计数） */
.numb, .n { font-variant-numeric: tabular-nums; }

/* 细滚动条：霓虹紫粉 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255, 45, 149, .55), rgba(132, 93, 242, .55)); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(255, 45, 149, .85), rgba(132, 93, 242, .85)); border: 2px solid transparent; background-clip: content-box; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

[hidden] { display: none !important; }

.icon { width: 18px; height: 18px; stroke-width: 1.7; flex: none; }
.icon.sm { width: 15px; height: 15px; }
.icon.lg { width: 22px; height: 22px; }
.icon.xl { width: 28px; height: 28px; }

/* 通用动画 */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes breathe { 0%,100% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 5px transparent; } }
@keyframes spin { to { transform: rotate(360deg); } }

.spin { animation: spin .9s linear infinite; }

/* 页面径向进入（圆形扩散） */
.view-enter { animation: viewReveal .42s var(--ease); }
@keyframes viewReveal {
  from { opacity: 0; clip-path: circle(0 at var(--rx, 50%) var(--ry, 30%)); }
  to   { opacity: 1; clip-path: circle(140% at var(--rx, 50%) var(--ry, 30%)); }
}

/* 主题切换圆形扩散层 */
.theme-fx {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  animation: themeSpread .48s var(--ease) forwards;
}
@keyframes themeSpread {
  from { clip-path: circle(0 at var(--fx) var(--fy)); }
  to   { clip-path: circle(145% at var(--fx) var(--fy)); }
}