/* =========================================================
   Theme tokens — gold only
   Use aliases (--bg-main / --color-gold / ...) across WAP CSS
   ========================================================= */

/* 别名始终指向 --wap-* 金色变量 */
html {
  --wap-radius: 12px;
  --wap-radius-sm: 8px;
  --wap-header-h: 52px;
  --wap-tabbar-h: 58px;
  --wap-phone-max: 480px;
  --wap-font: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --wap-font-display: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --wap-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);

  --bg-main: var(--wap-bg);
  --bg-deep: var(--wap-bg-deep);
  --card-bg: var(--wap-surface);
  --card-bg-2: var(--wap-surface-2);
  --text-primary: var(--wap-text);
  --text-muted: var(--wap-muted);
  --color-gold: var(--wap-gold);
  --theme-gold: var(--wap-gold);
  --color-gold-bright: var(--wap-gold-bright);
  --color-gold-deep: var(--wap-gold-deep);
  --color-gold-rgb: var(--wap-gold-rgb);
  --color-gold-grad: var(--wap-gold-grad);
  --border-gold: var(--wap-line);
  --radius-card: var(--wap-radius);
  --shadow-card: var(--wap-shadow);
  --accent-soft: rgba(var(--wap-gold-rgb), 0.12);
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--wap-gold);
  outline-offset: 2px;
}

/* 金色变量写在 :root / html，不要绑到 body */
:root, html[data-theme="gold"] {
  --theme-name: gold;
  --wap-bg: #0b0d11;
  --wap-bg-deep: #07080b;
  --wap-surface: #12151b;
  --wap-surface-2: #181c24;
  --wap-line: rgba(201, 168, 76, 0.22);
  --wap-text: #f2eee6;
  --wap-muted: #8f8778;
  --wap-gold: #c9a84c;
  --wap-gold-bright: #e8d59a;
  --wap-gold-deep: #8f6f24;
  --wap-gold-rgb: 201, 168, 76;
  --wap-gold-grad: linear-gradient(135deg, #e8d59a 0%, #c9a84c 52%, #8f6f24 100%);
  --wap-cta-text: #12100a;
  --wap-topbar-bg: rgba(11, 13, 17, 0.86);
  --wap-tabbar-bg: rgba(11, 13, 17, 0.94);
}

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

html {
  -webkit-text-size-adjust: 100%;
  width: 100%;
  color-scheme: dark;
  /* 文档只在 html 上滚；clip 不制造「假滚动层」，避免电脑滚轮被吃掉 */
  overflow-x: clip;
  overflow-y: auto;
  /* 实色底：防 iOS 回弹/刘海透出系统白边（仅渐变时 background-color 常为透明） */
  background-color: var(--wap-bg, #0b0d11);
}

body.wap-gold {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  /* 禁止 body 成为滚动容器：overflow-x:hidden 会把 overflow-y 算成 auto，滚轮停在内容上就不动 */
  overflow: visible;
  overscroll-behavior-y: none;
  color: var(--text-primary);
  font-family: var(--wap-font);
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s ease, color 0.25s ease;
  /* 左右安全区交给 header / main / tabbar，避免 body 再垫一层导致有效宽度变窄、贴边像被裁 */
}

html[data-theme="gold"] body.wap-gold, body.wap-gold {
  background-color: var(--wap-bg, #0b0d11);
  background-image:
    radial-gradient(ellipse 70% 42% at 50% -12%, rgba(var(--wap-gold-rgb), 0.14), transparent 58%),
    radial-gradient(ellipse 48% 30% at 100% 40%, rgba(var(--wap-gold-rgb), 0.05), transparent 50%),
    linear-gradient(180deg, var(--wap-surface, #12151b) 0%, var(--wap-bg, #0b0d11) 48%, var(--wap-bg-deep, #07080b) 100%);
  font-family: var(--wap-font);
}

.mobile-wrapper {
  position: relative;
  width: 100%;
  max-width: var(--wap-phone-max);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow-x: clip;
  overflow-y: visible;
  background-color: var(--bg-main);
  box-shadow:
    0 0 0 1px rgba(201, 168, 76, 0.1),
    0 0 40px rgba(0, 0, 0, 0.55);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
@media (max-width: 480px) {
  .mobile-wrapper {
    box-shadow: none;
  }
}

.wap-fixed-in-phone {
  left: 50%;
  width: 100%;
  max-width: var(--wap-phone-max);
  transform: translateX(-50%);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
}

/* layer mobile — 跟黑金主题 */
.layui-m-layer .layui-m-layerchild {
  background: var(--card-bg, #151922) !important;
  color: var(--text-main, #f2eee6) !important;
  border: 1px solid var(--border-gold, rgba(201, 168, 76, 0.28));
  border-radius: 14px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden;
}

.layui-m-layer .layui-m-layercont {
  color: var(--text-main, #f2eee6) !important;
  line-height: 1.55;
  padding: 18px 16px !important;
}

.layui-m-layer .layui-m-layerchild h3 {
  color: var(--color-gold, #c9a84c) !important;
  background: transparent !important;
  font-weight: 700;
}

.layui-m-layer .layui-m-layerbtn {
  border-top: 1px solid rgba(var(--color-gold-rgb, 201, 168, 76), 0.2) !important;
  background: transparent !important;
}

.layui-m-layer .layui-m-layerbtn span {
  color: var(--text-muted, #a89b82) !important;
  background: transparent !important;
}

.layui-m-layer .layui-m-layerbtn span[yes] {
  color: var(--color-gold, #c9a84c) !important;
  font-weight: 700;
}

/* 提示层必须高于底栏(z=60)，否则登录失败提示会被挡住 */
.layui-m-layer {
  z-index: 10050 !important;
}

.layui-m-layer .layui-m-layer-msg {
  border: 0 !important;
  background: #1a140c !important;
  color: #fff8e6 !important;
  border-radius: 12px !important;
}

/* 不支持 overflow:clip 的旧核：只让 html 当滚动层，body/外壳不再套 overflow-x:hidden */
@supports not (overflow: clip) {
  html {
    overflow-x: hidden;
    overflow-y: auto;
  }
  body.wap-gold {
    overflow: visible;
  }
  .mobile-wrapper {
    overflow-x: hidden;
    overflow-y: visible;
  }
}