/* ===== 迪士达888 · 红金招财主题 =====
 * 深红底 + 金线 + 元宝造型。插画位（招财猫 / 聚宝盆 / 元宝）目前用 emoji 占着，
 * 有 PNG 素材的话换掉 .art / .deco / .cat 里的字符即可。
 */

:root {
  /* 红底 */
  --red-0:  #3d070b;
  --red-1:  #5c0d13;
  --red-2:  #7a141b;
  --red-3:  #9c1f26;
  --lacquer: linear-gradient(170deg, #b6232c 0%, #8d151c 55%, #6b0f15 100%);

  /* 深色卡（余额卡那种黑金） */
  --ink:    #17100f;
  --ink-2:  #0f0a0a;
  --ink-3:  #241715;

  /* 金 */
  --gd-hi:  #fff4d2;
  --gd:     #eac濃;             /* 占位，下面统一用 --gold */
  --gold:   #e8b64c;
  --gold-2: #f8e3ab;
  --gold-3: #b8801f;
  --gold-dim: #7a5312;
  --line:      #4a2119;
  --line-gold: #9a6e2a88;

  /* 金属金：高光 → 本体 → 暗部 → 回光 */
  --gold-metal: linear-gradient(177deg, #fff6dd 0%, #f6dfa4 18%, #e8b64c 46%, #a9731c 70%, #eecb77 88%, #fbeec2 100%);
  --gold-soft:  linear-gradient(180deg, #f8e3ab, #e8b64c 55%, #a9731c);
  --ingot:      linear-gradient(175deg, #fff8e2 0%, #f7deA0 14%, #edc straw 40%, #e0ae44 46%, #b07f22 74%, #f0cd80 92%, #fdf2d4 100%);

  --text:      #ffeeda;
  --text-dim:  #d8b79a;
  --text-faint:#a8836b;

  --banker: #e0384a;
  --banker-dim: #5a1a22;
  --player: #2f7fe0;
  --player-dim: #16345c;
  --tie: #1f9d6b;
  --tie-dim: #10422e;

  --win:  #5fd6a0;
  --lose: #ff8d8d;

  --or: var(--gold);
  --or-lt: var(--gold-2);
  --or-glow: #e8b64c66;

  --r-sm: 9px;
  --r: 14px;
  --r-lg: 18px;

  --sh-1: 0 1px 3px #2a04070d, 0 1px 2px #1a0304aa;
  --sh-2: 0 5px 18px -5px #22040699, 0 2px 5px #1a030477;
  --sh-3: 0 12px 34px -10px #1c0305cc, 0 3px 10px #16020399;

  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background-color: var(--red-1);
  background-image:
    /* 顶部光晕 */
    radial-gradient(620px 300px at 50% -4%, #b82b3455 0%, transparent 70%),
    /* 铜钱暗纹 */
    radial-gradient(circle at 18% 22%, #ffffff09 0 2px, transparent 3px),
    radial-gradient(circle at 74% 46%, #ffffff08 0 2px, transparent 3px),
    radial-gradient(circle at 42% 78%, #ffffff07 0 2px, transparent 3px),
    /* 织纹 */
    repeating-linear-gradient(45deg, #ffffff05 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--red-2) 0%, var(--red-1) 42%, var(--red-0) 100%);
  background-size: auto, 190px 190px, 230px 230px, 170px 170px, auto, auto;
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
  overscroll-behavior-y: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.gold-t {
  background: var(--gold-metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@keyframes sheen { to { transform: translateX(260%) skewX(-18deg); } }
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: ""; position: absolute; top: -40%; left: -60%;
  width: 34%; height: 180%;
  background: linear-gradient(90deg, transparent, #ffffff4d, transparent);
  transform: skewX(-18deg);
  animation: sheen 4.5s ease-in-out infinite 1.2s;
  pointer-events: none;
}

/* ================= 顶部匾额 ================= */
.masthead {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 14px 10px; min-height: 104px;
}
/* 顶栏不再单独挂招财猫 —— masthead.png 横幅里自带一只，挂了会撞 */
/* 顶栏的祥云和招财猫都画在 masthead.png 里了，不再额外挂 emoji
 * —— 之前那两个 ☁️ 被 sepia+saturate 染成亮黄色，糊在猫肚子和右边祥云上。 */
.masthead .title { text-align: center; line-height: 1; }
/* t1 是主名（大），t2 是副标（小）—— 跟设计稿一样：迪士达888 在上，娱乐牛牛在下 */
.masthead .t1 {
  font-size: 34px; font-weight: 900; letter-spacing: 2px;
  background: var(--gold-metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 6px #1a0304) drop-shadow(0 0 14px #e8b64c44);
}
.masthead .t2 {
  margin-top: 3px; font-size: 16px; font-weight: 800; letter-spacing: 7px;
  background: var(--gold-metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 4px #1a0304cc);
}
.masthead .avatar { position: absolute; right: 12px; top: 14px; }

/* 兼容：内页仍然用 .topbar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #4a0a0ef2 0%, #4a0a0ee0 62%, #4a0a0e00 100%);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.topbar::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold) 22%, var(--line-gold) 78%, transparent);
}
.topbar .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15.5px; }
.topbar .brand .logo {
  min-width: 40px; height: 28px; padding: 0 8px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 900; letter-spacing: -.3px;
  background: var(--gold-metal); color: #3d1f02;
  box-shadow: 0 2px 9px #e8b64c44, inset 0 1px 0 #fff8e2;
}
.topbar .spacer { flex: 1; }

.wallet {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 10px; border-radius: 999px;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line-gold);
  box-shadow: var(--sh-1), inset 0 1px 0 #ffffff0f;
}
.wallet .coin { font-size: 13px; }
.wallet b { color: var(--gold-2); font-weight: 700; font-size: 15px; }
.wallet small { color: var(--text-faint); font-size: 11px; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(160deg, #2e1a17, #170d0c);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  color: var(--gold-2);
  border: 1.5px solid var(--gold-3); overflow: hidden;
  box-shadow: var(--sh-1), 0 0 0 3px #00000033;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ================= 布局 ================= */
.page { padding: 0 13px calc(100px + var(--safe-b)); max-width: 620px; margin: 0 auto; }
.sec { margin-top: 20px; }
.sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.sec-head h2 {
  margin: 0; font-size: 16px; font-weight: 900; letter-spacing: 1px;
  display: flex; align-items: center; gap: 9px;
  color: var(--gold-2);
  text-shadow: 0 2px 4px #1a0304;
}
.sec-head h2::before {
  content: ""; width: 4px; height: 16px; border-radius: 2px;
  background: var(--gold-soft); box-shadow: 0 0 9px var(--or-glow);
}
.sec-head .more { margin-left: auto; font-size: 12px; color: var(--text-faint); }

/* 通用金框 */
.card {
  background: linear-gradient(165deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line-gold);
  border-radius: var(--r);
  box-shadow: var(--sh-2), inset 0 1px 0 #ffffff0d;
}

/* ================= 轮播 Banner ================= */
.hero { position: relative; margin-top: 4px; }
.hero .slides {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  height: 168px;
  border: 2px solid var(--gold-3);
  box-shadow: var(--sh-3), inset 0 0 0 1px #ffe9b244;
}
.hero .sl {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .55s ease;
  padding: 20px 20px; display: flex; flex-direction: column; justify-content: center;
}
.hero .sl.on { opacity: 1; }
/* 底纹：铜钱 + 福字感的暗纹 */
.hero .sl::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, #ffffff0f 0 8px, transparent 9px),
    radial-gradient(circle at 62% 66%, #ffffff0d 0 10px, transparent 11px),
    radial-gradient(circle at 86% 22%, #ffffff0c 0 7px, transparent 8px);
  background-size: 120px 120px, 150px 150px, 100px 100px;
}
.hero .sl.s1 { background: radial-gradient(420px 200px at 80% 30%, #d4433f66, transparent 70%), var(--lacquer); }
.hero .sl.s2 { background: radial-gradient(420px 200px at 24% 26%, #e8b64c4d, transparent 70%), linear-gradient(170deg, #9e1c22, #6b0f15 60%, #4a0a0e); }
.hero .sl.s3 { background: radial-gradient(420px 200px at 78% 24%, #c8912e55, transparent 70%), linear-gradient(170deg, #8d151c, #5c0d13 60%, #3d070b); }
.hero .sl .tagline { font-size: 11.5px; color: #f0cfa8; letter-spacing: 4px; margin-bottom: 8px; }
.hero .sl h1 {
  margin: 0 0 8px; font-size: 30px; font-weight: 900; letter-spacing: 3px;
  background: var(--gold-metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 5px #1a0304);
}
.hero .sl p { margin: 0; font-size: 12.5px; color: #f2d9bd; }
.hero .sl .deco {
  position: absolute; right: -4px; bottom: -10px; font-size: 96px;
  opacity: .9; filter: drop-shadow(0 6px 14px #1a030488); transform: rotate(-6deg);
}
.hero .dots { display: flex; justify-content: center; gap: 6px; margin-top: 9px; }
.hero .dots i {
  width: 6px; height: 6px; border-radius: 99px; background: #ffffff33;
  transition: width .3s, background .3s;
}
.hero .dots i.on { width: 22px; background: var(--gold-soft); box-shadow: 0 0 8px var(--or-glow); }

/* ================= 元宝造型 ================= */
.ingot-shape {
  position: relative;
  border-radius: 46% 46% 20% 20% / 58% 58% 42% 42%;
  background: var(--gold-metal);
  color: #4a2a02;
  box-shadow: 0 4px 12px -3px #1a030499, inset 0 2px 0 #fff8e2, inset 0 -3px 6px #8a5c1244;
}
/* 元宝顶部那个凹口 */
.ingot-shape::before {
  content: ""; position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
  width: 52%; height: 38%;
  border-radius: 0 0 60% 60% / 0 0 100% 100%;
  background: linear-gradient(180deg, #c99a35, #e3bd63);
  box-shadow: inset 0 -2px 3px #ffffff55;
}

/* ================= 余额卡 ================= */
.balcard {
  position: relative; overflow: hidden;
  margin-top: 14px; padding: 16px 15px 15px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, #241715 0%, #150d0c 55%, #0e0808 100%);
  border: 1.5px solid var(--gold-3);
  box-shadow: var(--sh-3), inset 0 1px 0 #ffe9b233;
}
.balcard .bal { position: relative; z-index: 2; }
.balcard .bal .k {
  font-size: 12px; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.balcard .bal .k button { font-size: 12px; opacity: .7; }
.balcard .bal .v {
  font-size: 32px; font-weight: 900; letter-spacing: -.5px; line-height: 1.1;
  background: var(--gold-metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 2px 6px #1a0304);
}
.balcard .bal .v small {
  font-size: 15px; font-weight: 800; color: var(--gold-3);
  margin-right: 5px; -webkit-text-fill-color: var(--gold-3);
}
/* 聚宝盆插画位 */
.balcard::after {
  content: "💰"; position: absolute; right: -6px; top: -4px;
  font-size: 92px; opacity: .85; pointer-events: none;
  filter: drop-shadow(0 6px 14px #1a0304aa);
}

.balacts {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px;
  margin-top: 16px;
}
.balact {
  position: relative;
  height: 46px; padding: 0 2px;
  display: grid; place-items: center;
  font-size: 13.5px; font-weight: 900; letter-spacing: 1px;
  border-radius: 46% 46% 20% 20% / 58% 58% 42% 42%;
  background: var(--gold-metal); color: #4a2a02;
  box-shadow: 0 4px 12px -3px #1a030499, inset 0 2px 0 #fff8e2, inset 0 -3px 6px #8a5c1244;
  transition: transform .12s;
}
.balact::before {
  content: ""; position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
  width: 50%; height: 34%;
  border-radius: 0 0 60% 60% / 0 0 100% 100%;
  background: linear-gradient(180deg, #cc9e37, #e7c169);
  box-shadow: inset 0 -2px 3px #ffffff66;
}
.balact i { display: none; }              /* 元宝上不放图标，只留字 */
.balact span, .balact { position: relative; }
.balact:active { transform: scale(.94) translateY(1px); }

/* ================= 继续上次游戏 ================= */
.resume {
  position: relative; overflow: hidden;
  margin-top: 14px; padding: 15px 15px 14px; border-radius: var(--r-lg);
  background: var(--lacquer);
  border: 2px solid var(--gold-3);
  box-shadow: var(--sh-3), inset 0 0 0 1px #ffe9b233, inset 0 2px 8px #ffffff12;
  display: flex; align-items: center; gap: 13px;
}
.resume .ttl {
  position: absolute; top: 11px; left: 16px;
  font-size: 12.5px; font-weight: 800; color: var(--gold-2);
  display: flex; align-items: center; gap: 7px;
}
.resume .ttl::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--gold); }
.resume .mark {
  width: 50px; flex: none; text-align: center; font-size: 32px;
  margin-top: 20px; filter: drop-shadow(0 3px 8px #1a030499);
}
.resume .info { flex: 1; min-width: 0; margin-top: 20px; }
.resume .info b {
  display: block; font-size: 19px; font-weight: 900; letter-spacing: .5px;
  color: #fff6e4; text-shadow: 0 2px 4px #4a0a0e;
}
.resume .info small { font-size: 11.5px; color: #f0c9a8; }
.resume .go {
  position: relative; width: 52px; height: 52px; border-radius: 50%; flex: none;
  margin-top: 16px; display: grid; place-items: center;
  font-size: 18px; color: #4a2a02;
  background: var(--gold-metal);
  box-shadow: 0 5px 16px -3px #1a030499, inset 0 2px 0 #fff8e2, inset 0 -3px 7px #8a5c1244;
}
/* 铜钱方孔 */
.resume .go::after {
  content: ""; position: absolute; width: 13px; height: 13px; border-radius: 2px;
  background: #6b0f15; box-shadow: inset 0 1px 3px #00000088;
}
.resume .go:active { transform: scale(.94); }

/* ================= 分类：元宝胶囊 ================= */
.cats { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; padding: 2px 0 4px; }
.cats::-webkit-scrollbar { height: 0; }
.cats button {
  position: relative; flex: none;
  min-width: 78px; height: 42px; padding: 0 14px;
  display: grid; place-items: center;
  font-size: 13.5px; font-weight: 800;
  border-radius: 46% 46% 20% 20% / 58% 58% 42% 42%;
  background: linear-gradient(175deg, #3a211c, #241514);
  border: 1px solid var(--gold-dim);
  color: var(--text-dim);
  transition: transform .12s;
}
.cats button::before {
  content: ""; position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
  width: 48%; height: 32%;
  border-radius: 0 0 60% 60% / 0 0 100% 100%;
  background: #2a1817;
}
.cats button:active { transform: scale(.94); }
.cats button.on {
  background: var(--gold-metal); color: #4a2a02;
  border-color: #a9731c;
  box-shadow: 0 4px 12px -3px #e8b64c55, inset 0 2px 0 #fff8e2, inset 0 -3px 6px #8a5c1244;
}
.cats button.on::before { background: linear-gradient(180deg, #cc9e37, #e7c169); }

/* ================= 游戏卡 ================= */
.gcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gcard {
  position: relative; overflow: hidden; display: block;
  min-height: 126px; padding: 14px 13px 13px;
  border-radius: var(--r);
  background:
    radial-gradient(160px 120px at 82% 70%, #ffffff0d, transparent 70%),
    linear-gradient(158deg, #2c1a17 0%, #16100f 100%);
  border: 1.5px solid var(--gold-3);
  box-shadow: var(--sh-2), inset 0 0 0 1px #ffe9b21f;
  transition: transform .13s;
}
.gcard:active { transform: scale(.975); }
.gcard h3 {
  margin: 0 0 4px; font-size: 16.5px; font-weight: 900; letter-spacing: .5px;
  color: #fff3dc; text-shadow: 0 2px 4px #1a0304;
}
.gcard p { margin: 0; font-size: 11px; color: var(--text-faint); max-width: 62%; line-height: 1.45; }
.gcard .art {
  position: absolute; right: -6px; bottom: -8px;
  font-size: 68px; line-height: 1;
  filter: drop-shadow(0 5px 12px #1a030499);
  transform: rotate(-5deg); pointer-events: none;
}
.gcard .brandmark {
  position: absolute; left: 13px; bottom: 10px;
  font-size: 10px; font-weight: 900; letter-spacing: 1px; color: #ffffff1a;
}
.gcard .arrow {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: #00000099; border: 1px solid var(--gold-dim); color: var(--gold-2);
  box-shadow: 0 2px 8px #1a030488;
}
/* HOT 标做成小元宝 */
.gcard .tag {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  min-width: 46px; height: 24px; padding: 0 9px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 900; letter-spacing: .5px;
  border-radius: 46% 46% 20% 20% / 58% 58% 42% 42%;
  background: var(--gold-metal); color: #4a2a02;
  box-shadow: 0 3px 8px #1a030488, inset 0 1px 0 #fff8e2;
}
.gcard .tag.new { background: linear-gradient(177deg, #d9ffe8, #8fe0b0 22%, #3fb97e 50%, #1d7a4f 78%, #7fdcae 100%); color: #06301d; }

.gcard.wide { grid-column: 1 / -1; min-height: 108px; }
.gcard.feat {
  border-color: var(--gold);
  background:
    radial-gradient(300px 150px at 86% 62%, #e8b64c33, transparent 70%),
    linear-gradient(158deg, #3a1d1a 0%, #180f0f 100%);
}
.gcard.joker {
  background: linear-gradient(120deg, #4a3208 0%, #7a5512 42%, #2a1c06 100%);
  border-color: var(--gold-3);
}
.gcard.joker h3, .gcard.feat h3 {
  background: var(--gold-metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ================= 列表 ================= */
.list { overflow: hidden; }
.row {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-bottom: 1px solid #ffffff10;
}
.row:last-child { border-bottom: 0; }
.row .rk { width: 24px; text-align: center; font-weight: 800; font-size: 14px; color: var(--text-faint); }
.row .rk.t1 { color: #ffd45e; } .row .rk.t2 { color: #e8dcc4; } .row .rk.t3 { color: #d6924e; }
.row .nm { flex: 1; min-width: 0; }
.row .nm b { display: block; font-size: 14px; font-weight: 600; }
.row .nm small { color: var(--text-faint); font-size: 11.5px; }
.row .val { font-weight: 800; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.row .val.win { color: var(--win); } .row .val.lose { color: var(--lose); }

.empty { padding: 34px 0; text-align: center; color: var(--text-faint); font-size: 13px; }

/* ================= 今日排行榜 =================
 * 金匾标题 + 回纹金框 + 红漆底。跟「最新战绩」那种通用 .list 是两套东西，
 * 行的类名特意叫 .rb-row，别并回 .row，不然会把播报那边一起带歪。 */
.rb { position: relative; }

/* ---- 顶部金匾 ---- */
.rb-top {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: -14px;              /* 匾额压在金框上沿 */
  padding: 0 4px; min-height: 52px;
}
.rb-cat {
  position: absolute; left: 0; bottom: 2px;
  width: 46px; height: 46px; font-size: 32px; line-height: 1;
  display: grid; place-items: center;
  filter: drop-shadow(0 3px 8px #1a0304aa);
}
.rb-plaque {
  position: relative;
  padding: 8px 30px;
  background: var(--gold-metal);
  border-radius: 7px;
  box-shadow: 0 5px 16px -4px #1a0304cc, inset 0 2px 0 #fff8e2,
              inset 0 -3px 8px #8a5c1244, 0 0 0 2px #7e5410;
}
.rb-plaque b {
  font-size: 17px; font-weight: 900; letter-spacing: 3px;
  color: #5a1114; text-shadow: 0 1px 0 #ffeab5;
}
/* 匾额两端的祥云托 */
.rb-plaque::before, .rb-plaque::after {
  content: ""; position: absolute; top: 50%; width: 15px; height: 15px;
  margin-top: -7px; border-radius: 50% 50% 50% 0;
  background: var(--gold-metal);
  box-shadow: inset 0 1px 0 #fff8e2;
}
.rb-plaque::before { left: -8px; transform: rotate(45deg); }
.rb-plaque::after { right: -8px; transform: rotate(-135deg); }

.rb-tab {
  position: absolute; right: 0; bottom: 6px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; line-height: 1.15; text-align: center;
  color: #5a1114; background: var(--gold-metal);
  box-shadow: 0 4px 12px -3px #1a0304cc, inset 0 2px 0 #fff8e2, 0 0 0 2px #7e5410;
}

/* ---- 回纹金框 ---- */
.rb-frame {
  position: relative;
  padding: 22px 14px 14px;
  border: 2px solid var(--gold-3);
  border-radius: 6px;
  /* 红漆底：两层径向渐变做出大理石那种深浅不匀 */
  background:
    radial-gradient(120% 75% at 18% 0%, #6d1519 0%, transparent 62%),
    radial-gradient(95% 65% at 85% 100%, #5c1015 0%, transparent 58%),
    linear-gradient(162deg, #4d0e13, #350810);
  box-shadow: var(--sh-3), inset 0 0 0 1px #00000055;
}
/* 内圈细金线 */
.rb-frame::after {
  content: ""; position: absolute; inset: 5px;
  border: 1px solid #c9973a66; border-radius: 3px; pointer-events: none;
}
/* 四角回纹：两个套在一起的 L */
.rb .cnr { position: absolute; width: 22px; height: 22px; z-index: 2; pointer-events: none; }
/* 注意用长写 border-top-width / border-left-width。
 * 写成简写 `border-width: 3px` 会把四条边一起重置，L 就变成闭合的小方块了。 */
.rb .cnr::before, .rb .cnr::after {
  content: ""; position: absolute; border: 0 solid var(--gold-2);
}
.rb .cnr::before { inset: -1px; border-top-width: 3px; border-left-width: 3px; }
.rb .cnr::after { inset: 6px; border-top-width: 1.5px; border-left-width: 1.5px; }
.rb .cnr.tl { left: 0; top: 0; }
.rb .cnr.tr { right: 0; top: 0; transform: scaleX(-1); }
.rb .cnr.bl { left: 0; bottom: 0; transform: scaleY(-1); }
.rb .cnr.br { right: 0; bottom: 0; transform: scale(-1); }

/* ---- 挂在框边上的红包 / 铜钱 ---- */
.rb-deco {
  position: absolute; z-index: 2; font-size: 26px; line-height: 1;
  width: 34px; height: 40px; display: grid; place-items: center;
  filter: drop-shadow(0 3px 8px #12030388);
  pointer-events: none;
}
.rb-deco.p1 { right: -9px; top: 26%; transform: rotate(9deg); }
.rb-deco.p2 { right: -7px; top: 62%; transform: rotate(-7deg); }
.rb-deco.c1 { left: -11px; top: 45%; width: 32px; height: 32px; }

/* ---- 榜单行 ---- */
.rb-list { position: relative; z-index: 1; }
.rb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 8px;
  border-bottom: 1px solid transparent;
  /* 分隔线两头淡出，不要硬邦邦一条横杠 */
  border-image: linear-gradient(90deg, transparent, #c9973a4d 18%, #c9973a4d 82%, transparent) 1;
}
.rb-row:last-child { border-bottom: 0; border-image: none; }

.rb-row .rk { flex: none; width: 46px; display: grid; place-items: center; }
.rb-row .rk.num {
  font-size: 21px; font-weight: 900; color: var(--gold-2);
  text-shadow: 0 2px 4px #1a0304;
}

/* 前三名奖牌：三层
 *   .medal      外圈金属环（conic-gradient 转一圈，做出反光在环上游走的效果）
 *   .medal::before  内凹的盘面
 *   .medal span     数字 + 外面那圈细线
 * 三种牌只换 --rim / --face / --digit 三个变量，结构不重复写。 */
.rb-row .rk.medal {
  position: relative;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--rim);
  box-shadow: 0 4px 11px -2px #120303aa, inset 0 0 0 1px #0000002e;
}
.rb-row .rk.medal::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--face);
  box-shadow: inset 0 2px 5px #00000047, inset 0 -2px 4px #ffffff5c;
}
.rb-row .rk.medal span {
  position: relative; z-index: 1;
  width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 900; color: var(--digit);
  box-shadow: inset 0 0 0 1.5px currentColor;   /* 数字外面那圈细线 */
  text-shadow: 0 1px 0 #ffffff5c;
}

.rb-row .rk.m1 {
  --rim: conic-gradient(from 200deg, #a9731c, #ffeaa0 24%, #e0a922 48%, #fff3c4 72%, #b8821f);
  --face: radial-gradient(76% 76% at 34% 26%, #fff6d0, #f2cd6a 46%, #d9a521);
  --digit: #7a4f06;
}
.rb-row .rk.m2 {
  --rim: conic-gradient(from 200deg, #8f8f86, #ffffff 24%, #c9c9c0 48%, #f8f8f4 72%, #9a9a91);
  --face: radial-gradient(76% 76% at 34% 26%, #ffffff, #e2e2db 46%, #b0b0a6);
  --digit: #55554e;
}
.rb-row .rk.m3 {
  --rim: conic-gradient(from 200deg, #7d4a1c, #f0bf8b 24%, #a4632a 48%, #f5cfa0 72%, #8a5122);
  --face: radial-gradient(76% 76% at 34% 26%, #f8d7b0, #d99a5e 46%, #a4632a);
  --digit: #5a3010;
}
/* 有 medal-N.png 就整颗换掉：CSS 那层外环、盘面、数字全撤。
 * 金牌带冠和飘带比另外两枚瘦长，所以槽位给高一点，靠 object-fit: contain 各自适配。 */
.rb-row .rk.medal.has-art {
  width: 46px; height: 54px;
  background: none; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 3px 7px #12030399);
}
.rb-row .rk.medal.has-art::before { display: none; }

.rb-row .nm { flex: 1; min-width: 0; }
.rb-row .nm b {
  display: block; font-size: 15.5px; font-weight: 700; color: #ffeccd;
  text-shadow: 0 1px 3px #2a0508; letter-spacing: .3px;
}
.rb-row .nm b em { font-style: normal; color: var(--gold-2); font-size: 13px; }
.rb-row .nm small { font-size: 11px; color: #d8a87c; }
.rb-row .val {
  font-size: 18px; font-weight: 900; color: var(--gold-2);
  font-variant-numeric: tabular-nums; text-shadow: 0 2px 4px #1a0304;
}

/* ---- 钉在底部的「我」 ---- */
.rb-me { position: relative; z-index: 1; }
.rb-me:empty { display: none; }
.rb-me .rb-row {
  margin: 6px -6px -4px; padding: 11px 14px;
  border: 0; border-image: none; border-radius: 5px;
  background: linear-gradient(90deg, #7a1a1f, #5d1217);
  box-shadow: inset 0 0 0 1px #c9973a55;
}
.rb-me .rb-row .val { padding-right: 46px; }   /* 给元宝让位 */
.rb-ingot {
  position: absolute; right: 4px; bottom: 0; z-index: 2;
  width: 52px; height: 38px; font-size: 26px;
  display: grid; place-items: center;
  filter: drop-shadow(0 3px 8px #12030399);
  pointer-events: none;
}

/* 插画挂上来之后给这几个槽位定尺寸，不然会按原图大小铺开 */
.rb-cat.has-art { width: 44px; height: 50px; }
.rb-deco.has-art { width: 30px; height: 38px; }
.rb-deco.c1.has-art { width: 30px; height: 30px; }
.rb-ingot.has-art { width: 50px; height: 36px; }

/* ================= 最新战绩 =================
 * 描金框 + 深色底 + 底部团寿牌。跟排行榜是姊妹样式但配色相反：
 * 排行榜红漆底配金框，这里深褐底配金框。 */
/* 团寿牌挂在框外 -17px，而它和导航栏中间那颗招财猫圆牌都居中，
 * 滚到底时会叠在一起。这一段是首页最后一块，多留一截底部空间避开。 */
.fb { margin-bottom: 36px; }
.fb .sec-head { margin-bottom: 11px; }
.fb-tab {
  margin-left: auto;
  padding: 5px 13px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
  color: var(--gold-2);
  border: 1px solid var(--gold-3);
  background: linear-gradient(180deg, #3a2318, #221512);
  box-shadow: inset 0 1px 0 #ffe9b233, 0 2px 8px -2px #1a030488;
}

.fb-frame {
  position: relative;
  padding: 10px 12px 14px;
  border: 2px solid var(--gold-3);
  border-radius: 8px;
  background:
    radial-gradient(70% 42% at 50% 0%, #6a4a2440 0%, transparent 72%),
    linear-gradient(168deg, #2d1c15, #16100d);
  box-shadow: var(--sh-3), inset 0 0 0 1px #00000055;
}
.fb-frame::after {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid #c9973a4d; border-radius: 5px; pointer-events: none;
}

/* 四角描金：粗 L + 肘部一颗金珠 */
.fb .fcnr { position: absolute; width: 26px; height: 26px; z-index: 2; pointer-events: none; }
.fb .fcnr::before {
  content: ""; position: absolute; inset: -1px;
  border: 0 solid var(--gold-2);
  border-top-width: 4px; border-left-width: 4px;
  border-radius: 6px 0 0 0;
}
.fb .fcnr::after {
  content: ""; position: absolute; left: 1px; top: 1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-metal);
  box-shadow: 0 1px 3px #12030399;
}
.fb .fcnr.tl { left: 0; top: 0; }
.fb .fcnr.tr { right: 0; top: 0; transform: scaleX(-1); }
.fb .fcnr.bl { left: 0; bottom: 0; transform: scaleY(-1); }
.fb .fcnr.br { right: 0; bottom: 0; transform: scale(-1); }

/* 挂在框边的铜钱 / 红包 */
.fb-deco {
  position: absolute; z-index: 2; font-size: 24px; line-height: 1;
  width: 30px; height: 30px; display: grid; place-items: center;
  filter: drop-shadow(0 3px 8px #12030399);
  pointer-events: none;
}
.fb-deco.c1 { left: -12px; bottom: 16%; }
.fb-deco.c2 { right: -12px; bottom: 9%; }
.fb-deco.p1 { right: -8px; bottom: -6px; width: 26px; height: 32px; transform: rotate(8deg); }

/* 底部团寿牌：三层金环 + 两侧祥云 */
.fb-seal {
  position: absolute; left: 50%; bottom: -17px; z-index: 3;
  width: 46px; height: 46px; margin-left: -23px;
  border-radius: 50%;
  background: var(--gold-metal);
  box-shadow: 0 4px 12px -2px #120303aa, inset 0 2px 0 #fff8e2,
              inset 0 0 0 3px #b8821f66, inset 0 0 0 5px #ffeab566;
}
.fb-seal i {
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 3px; transform: rotate(45deg);
  box-shadow: inset 0 0 0 2px #8a5c12aa;
}
/* 祥云耳朵 */
.fb-seal::before, .fb-seal::after {
  content: ""; position: absolute; top: 52%; width: 26px; height: 15px;
  margin-top: -8px;
  background: var(--gold-metal);
  box-shadow: inset 0 1px 0 #fff8e2, 0 3px 8px -2px #12030399;
}
.fb-seal::before { left: -22px; border-radius: 12px 0 0 12px / 50% 0 0 50%; }
.fb-seal::after { right: -22px; border-radius: 0 12px 12px 0 / 0 50% 50% 0; }
/* 有 seal.png 就整个换掉：CSS 那三层环和两只祥云耳朵全撤 */
.fb-seal.has-art {
  width: 96px; height: 46px; margin-left: -48px; bottom: -20px;
  background: none; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 4px 10px #120303aa);
}
.fb-seal.has-art::before, .fb-seal.has-art::after { display: none; }

/* ---- 战绩行 ---- */
.fb-list { position: relative; z-index: 1; }
.fb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 6px; min-height: 58px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, #c9973a40 15%, #c9973a40 85%, transparent) 1;
}
.fb-row:last-child { border-bottom: 0; border-image: none; }
.fb-row .ic { flex: none; width: 30px; font-size: 21px; text-align: center; line-height: 1; }
.fb-row .nm { flex: 1; min-width: 0; }
.fb-row .nm b {
  display: block; font-size: 15px; font-weight: 700; color: #ffeccd;
  text-shadow: 0 1px 3px #12030399;
}
.fb-row .nm small { font-size: 11.5px; color: var(--text-faint); }
/* 中间那个钱袋：没图就是一个 💰，有图会换成插画 */
.fb-row .bag {
  flex: none; width: 56px; height: 46px;
  display: grid; place-items: center; font-size: 28px; line-height: 1;
  filter: drop-shadow(0 3px 8px #12030399);
}
.fb-row .bag.has-art { width: 62px; height: 50px; }
.fb-row .val {
  flex: none; min-width: 84px; text-align: right;
  font-size: 17px; font-weight: 900; color: var(--gold-2);
  font-variant-numeric: tabular-nums; text-shadow: 0 2px 4px #1a0304;
}

/* ================= 优惠卡 ================= */
.promo {
  position: relative; overflow: hidden;
  padding: 15px; border-radius: var(--r); margin-bottom: 11px;
  background: linear-gradient(158deg, #2c1a17, #16100f);
  border: 1px solid var(--line-gold);
  box-shadow: var(--sh-2);
}
.promo.gold { border-color: var(--gold-3); background: linear-gradient(158deg, #3a2318, #1a100e); }
.promo .ph { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.promo .ph .ic { font-size: 20px; }
.promo .ph b { font-size: 14.5px; font-weight: 800; color: #fff3dc; }
.promo .ph .amt {
  margin-left: auto; font-size: 19px; font-weight: 900;
  color: var(--gold-2); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px #e8b64c55;
}
.promo .pd { font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.promo .pd b { color: var(--gold-2); }
.promo .chips2 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.promo .chips2 span {
  font-size: 10.5px; padding: 3px 9px; border-radius: 999px;
  background: #ffffff0a; border: 1px solid var(--line-gold); color: var(--text-dim);
}
.promo .chips2 span b { color: var(--gold-2); }

/* ================= 底部导航：金框 + 中间招财猫 ================= */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: flex-end;
  padding: 8px 0 calc(8px + var(--safe-b));
  background: linear-gradient(180deg, #2a1412 0%, #170b0a 100%);
  border-top: 2px solid var(--gold-3);
  box-shadow: 0 -6px 22px #1a030488;
}
.tabbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 1px;
  background: linear-gradient(90deg, transparent, #ffe9b255 20%, #ffe9b255 80%, transparent);
}
.tabbar button {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 5px 0; color: var(--text-faint); font-size: 10.5px;
  transition: color .16s;
}
.tabbar button i {
  font-size: 21px; font-style: normal; line-height: 1;
  filter: grayscale(.5) brightness(.85);
  transition: transform .16s, filter .16s;
}
.tabbar button.on { color: var(--gold-2); }
/* 注意：filter 里不能写 `none drop-shadow(...)`，那是整条声明作废，
 * 选中的图标就永远亮不起来。只留函数。 */
.tabbar button.on i { transform: translateY(-1px); filter: drop-shadow(0 2px 8px var(--or-glow)); }
.tabbar button.on::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 2px; border-radius: 0 0 3px 3px;
  background: var(--gold-soft); box-shadow: 0 0 9px var(--or-glow);
}
/* 中间招财猫圆牌 */
.tabbar .playbtn { flex: none; width: 82px; align-self: stretch; }
.tabbar .playbtn .ring {
  position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center; gap: 0; flex-direction: column;
  background: var(--gold-metal); color: #4a2a02;
  border: 4px solid #2a1412;
  box-shadow: 0 6px 20px -3px #1a0304cc, 0 0 0 2px var(--gold-3),
              inset 0 2px 0 #fff8e2, inset 0 -4px 8px #8a5c1244;
  font-size: 10.5px; font-weight: 900; letter-spacing: .5px;
  transition: transform .14s;
}
.tabbar .playbtn:active .ring { transform: translateX(-50%) scale(.93); }
.tabbar .playbtn .ring em { font-style: normal; font-size: 22px; line-height: 1; }
.tabbar .playbtn .lbl { margin-top: 46px; font-size: 10.5px; color: var(--gold-2); font-weight: 700; }
.tabbar .playbtn::before { display: none !important; }

/* ================= 按钮 ================= */
.btn {
  display: block; width: 100%; padding: 13px; border-radius: var(--r);
  font-weight: 900; text-align: center; letter-spacing: 1px;
  background: var(--gold-metal); color: #4a2a02;
  box-shadow: 0 5px 16px -4px #1a030499, inset 0 2px 0 #fff8e2, inset 0 -3px 6px #8a5c1244;
  transition: transform .12s, filter .12s;
}
.btn:active { transform: scale(.98); filter: brightness(.95); }
.btn.ghost {
  background: linear-gradient(175deg, #3a211c, #241514);
  color: var(--text); border: 1px solid var(--gold-dim);
  box-shadow: var(--sh-1), inset 0 1px 0 #ffffff10;
}
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ================= toast ================= */
#toast {
  position: fixed; left: 50%; top: 22%; z-index: 999;
  transform: translate(-50%, -6px);
  padding: 11px 19px; border-radius: 999px;
  background: #180b0aee; border: 1px solid var(--gold-3);
  box-shadow: var(--sh-3);
  font-size: 13.5px; color: var(--text); opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
  max-width: 80vw; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================= 扑克牌 ================= */
.pcard {
  width: 52px; height: 74px; border-radius: 6px;
  background: linear-gradient(165deg, #fffdf6, #efe9dc);
  color: #16181c; position: relative; flex: none;
  box-shadow: 0 4px 12px #1a0304aa, inset 0 0 0 1px #00000022, inset 0 1px 0 #fff;
  display: flex; flex-direction: column; padding: 4px 5px; font-weight: 800;
}
.pcard.red { color: #c9202f; }
.pcard .r { font-size: 16px; line-height: 1; letter-spacing: -.5px; }
.pcard .s { font-size: 13px; line-height: 1; }
.pcard .big { position: absolute; right: 4px; bottom: 2px; font-size: 28px; opacity: .9; line-height: 1; }
.pcard.back {
  background: repeating-linear-gradient(45deg, #a3252c 0 5px, #7c171d 5px 10px);
  box-shadow: 0 4px 12px #1a0304aa, inset 0 0 0 2px #f5e6c8, inset 0 0 0 3px #7c171d;
}
.pcard.sm { width: 40px; height: 57px; }
.pcard.sm .r { font-size: 13px; } .pcard.sm .big { font-size: 21px; }
.pcard.deal { animation: dealIn .34s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes dealIn {
  from { opacity: 0; transform: translate(34px, -46px) rotate(18deg) scale(.7); }
  to   { opacity: 1; transform: none; }
}

/* ================= 钱包浮层 ================= */
.wsheet {
  position: fixed; inset: 0; z-index: 95;
  background-color: var(--red-1);
  background-image:
    radial-gradient(620px 300px at 50% -4%, #b82b3455 0%, transparent 70%),
    linear-gradient(180deg, var(--red-2) 0%, var(--red-0) 100%);
  display: flex; flex-direction: column;
}
.wsheet[hidden] { display: none !important; }
.wsheet .wtop {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line-gold);
  background: #2a1412e8; backdrop-filter: blur(14px);
}
.wsheet .wtop .bk { font-size: 20px; padding: 0 6px; color: var(--gold-2); }
.wsheet .wtop b { flex: 1; font-size: 16px; font-weight: 900; color: var(--gold-2); letter-spacing: 1px; }
.wsheet .wtop .lk { font-size: 12.5px; color: var(--gold-2); }
.wsheet .wbody {
  flex: 1; overflow-y: auto;
  padding: 16px 14px calc(30px + var(--safe-b));
  max-width: 620px; width: 100%; margin: 0 auto;
}
.wsheet .wbody::-webkit-scrollbar { width: 0; }

.wcard {
  padding: 15px; border-radius: var(--r); margin-bottom: 13px;
  background: linear-gradient(158deg, #2c1a17, #16100f);
  border: 1px solid var(--line-gold);
  box-shadow: var(--sh-2);
}
.wcard.gold { border-color: var(--gold-3); background: linear-gradient(158deg, #3a2318, #1a100e); }
.wcard > h4 {
  margin: 0 0 12px; font-size: 13px; font-weight: 800; color: var(--gold-2);
  display: flex; align-items: center; gap: 8px;
}
.wcard > h4 .r { margin-left: auto; font-weight: 500; color: var(--text-faint); font-size: 11.5px; }

.wbal { text-align: center; padding: 6px 0 14px; }
.wbal .k { font-size: 11.5px; color: var(--text-faint); }
.wbal .v {
  font-size: 34px; font-weight: 900;
  background: var(--gold-metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.wbal .v small { font-size: 15px; color: var(--gold-3); -webkit-text-fill-color: var(--gold-3); margin-right: 4px; }

.amts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.amts button {
  position: relative; height: 48px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  border-radius: 46% 46% 20% 20% / 58% 58% 42% 42%;
  background: linear-gradient(175deg, #3a211c, #241514);
  border: 1px solid var(--gold-dim); color: var(--text-dim);
  transition: transform .12s;
}
.amts button::before {
  content: ""; position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
  width: 46%; height: 30%; border-radius: 0 0 60% 60% / 0 0 100% 100%;
  background: #2a1817;
}
.amts button:active { transform: scale(.95); }
.amts button.on {
  background: var(--gold-metal); color: #4a2a02; border-color: #a9731c;
  box-shadow: 0 4px 12px -3px #e8b64c55, inset 0 2px 0 #fff8e2;
}
.amts button.on::before { background: linear-gradient(180deg, #cc9e37, #e7c169); }

.winput {
  width: 100%; padding: 13px 14px; border-radius: 11px;
  background: #140c0b; border: 1px solid var(--line-gold); color: var(--text);
  font: inherit; font-size: 15px; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.winput::-webkit-outer-spin-button, .winput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.winput:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px #e8b64c1f; }
.winput::placeholder { color: var(--text-faint); }
select.winput { -webkit-appearance: none; appearance: none; }
.wlabel { font-size: 11.5px; color: var(--text-faint); margin: 0 0 6px; }
.wrow { margin-bottom: 12px; }

.opts { display: grid; gap: 9px; }
.opt {
  display: flex; align-items: center; gap: 12px;
  padding: 13px; border-radius: 11px;
  background: #1c1211; border: 1.5px solid var(--line);
  transition: border-color .15s, background .15s;
}
.opt.on { border-color: var(--gold); background: #2e1c14; }
.opt .ic { font-size: 20px; width: 26px; text-align: center; }
.opt .tx { flex: 1; min-width: 0; }
.opt .tx b { display: block; font-size: 14px; font-weight: 700; }
.opt .tx small { font-size: 11px; color: var(--text-faint); }
.opt .ck {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  border: 2px solid #55342a; display: grid; place-items: center;
  font-size: 11px; color: transparent;
}
.opt.on .ck { border-color: var(--gold); background: var(--gold); color: #4a2a02; }
.opt .del { font-size: 12px; color: var(--text-faint); padding: 4px 6px; }

.wnote {
  padding: 11px 13px; border-radius: 10px; font-size: 12px; line-height: 1.7;
  background: #e8b64c10; border: 1px solid var(--gold-dim); color: #e8c79a;
}
.wnote b { color: var(--gold-2); }
.wnote.bad { background: #ff8d8d0f; border-color: #8a2e2e; color: #f0b0b0; }
.wnote.bad b { color: #ffb0b0; }

.wbar { height: 7px; border-radius: 5px; background: #140c0b; overflow: hidden; margin-top: 8px; }
.wbar i { display: block; height: 100%; border-radius: 5px; background: var(--gold-soft); }

.olist { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-gold); }
.oitem {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; background: #1c1211;
  border-bottom: 1px solid #ffffff0d;
}
.oitem:last-child { border-bottom: 0; }
.oitem .ic {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 15px;
  background: #ffffff0a; border: 1px solid var(--line-gold);
}
.oitem .tx { flex: 1; min-width: 0; }
.oitem .tx b { display: block; font-size: 13.5px; font-weight: 700; }
.oitem .tx small { font-size: 11px; color: var(--text-faint); }
.oitem .rt { text-align: right; }
.oitem .rt .amt { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.oitem .rt .amt.plus { color: var(--win); }
.oitem .rt .amt.minus { color: var(--lose); }
.ostat {
  display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700;
  padding: 1.5px 7px; border-radius: 5px; border: 1px solid;
}
.ostat.pending { color: var(--gold-2); border-color: var(--gold-dim); }
.ostat.done { color: var(--win); border-color: #1f6d4b; }
.ostat.rejected { color: var(--lose); border-color: #8a2e2e; }

.invbox { text-align: center; padding: 20px 15px; }
.invbox .qr {
  display: inline-grid; place-items: center; margin: 0 auto 14px;
  padding: 9px; border-radius: 14px; background: #fff;
  box-shadow: 0 6px 20px -6px #1a0304, 0 0 0 2px var(--gold-3); line-height: 0;
}
.invbox .qr canvas { display: block; border-radius: 4px; }
.invbox .code {
  font-size: 27px; font-weight: 900; letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
  background: var(--gold-metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.invbox .lk {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: #140c0b; border: 1px solid var(--line-gold);
  font-size: 11.5px; color: var(--text-dim); word-break: break-all;
}

/* ================= 推广 / 账号 / 股东（沿用，换色） ================= */
.rates {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line-gold); border: 1px solid var(--line-gold);
  border-radius: var(--r); overflow: hidden; margin-top: 12px;
}
.rates .rt { background: linear-gradient(170deg, #2c1a17, #16100f); padding: 13px 8px; text-align: center; }
.rates .rt .k { font-size: 11px; color: var(--text-faint); margin-bottom: 7px; }
.rates .rt .v { font-size: 21px; font-weight: 900; color: var(--gold-2); font-variant-numeric: tabular-nums; line-height: 1; }
.rates .rt .v small { font-size: 10.5px; font-weight: 600; color: var(--text-faint); margin-left: 3px; }

.invitebtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 12px; padding: 15px; border-radius: var(--r);
  background: var(--gold-metal); color: #4a2a02;
  font-size: 15.5px; font-weight: 900; letter-spacing: 1px;
  box-shadow: 0 5px 18px -4px #1a030499, inset 0 2px 0 #fff8e2, inset 0 -3px 6px #8a5c1244;
}
.invitebtn:active { transform: scale(.98); }
.invitebtn .qr { font-size: 18px; }

.datenav { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-dim); }
.datenav button {
  width: 26px; height: 26px; border-radius: 8px;
  background: #ffffff0d; border: 1px solid var(--line-gold); color: var(--gold-2);
  display: grid; place-items: center; font-size: 12px;
}
.datenav button[disabled] { opacity: .3; pointer-events: none; }
.datenav .d { font-variant-numeric: tabular-nums; min-width: 92px; text-align: center; }

.commcard {
  margin-top: 13px; padding: 15px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, #2c1a17, #150d0c);
  border: 1px solid var(--gold-3);
  box-shadow: var(--sh-2);
}
.commcard .ch { display: flex; align-items: center; margin-bottom: 14px; }
.commcard .ch .t { font-size: 12.5px; color: var(--text-faint); }
.commcard .ch .datenav { margin-left: auto; }
.commcard .big { text-align: center; margin-bottom: 16px; }
.commcard .big .u { font-size: 11px; color: var(--gold-3); letter-spacing: 1px; }
.commcard .big .n {
  font-size: 40px; font-weight: 900; letter-spacing: -1px; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  background: var(--gold-metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.commcard .brk { display: grid; gap: 1px; background: var(--line-gold); border-radius: 10px; overflow: hidden; }
.commcard .brk .b { display: flex; align-items: center; padding: 11px 13px; background: #1a100f; font-size: 12.5px; color: var(--text-dim); }
.commcard .brk .b .r { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 800; color: var(--text); }
.commcard .brk .b .r small { font-size: 10.5px; color: var(--text-faint); margin-right: 4px; font-weight: 500; }
.commcard .brk .b .pct { font-size: 10.5px; margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: #ffffff0d; color: var(--gold-2); border: 1px solid var(--line-gold); }
.commcard .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 14px; background: var(--line-gold); border-radius: 10px; overflow: hidden; }
.commcard .two .c { background: #1a100f; padding: 12px; text-align: center; }
.commcard .two .c .k { font-size: 11px; color: var(--text-faint); margin-bottom: 5px; }
.commcard .two .c .v { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--gold-2); }

.acct { text-align: center; padding: 18px 0 4px; }
.acct .big {
  width: 86px; height: 86px; border-radius: 50%; margin: 0 auto 12px;
  background: linear-gradient(160deg, #3a211c, #1b100f);
  border: 2px solid var(--gold-3); overflow: hidden;
  display: grid; place-items: center; font-size: 30px; font-weight: 800; color: var(--gold-2);
  box-shadow: 0 6px 22px -6px #1a0304, 0 0 0 5px #00000033;
}
.acct .big img { width: 100%; height: 100%; object-fit: cover; }
.acct .nm { font-size: 19px; font-weight: 900; letter-spacing: .5px; color: #fff3dc; }
.acct .nm span { color: var(--text-faint); font-size: 15px; margin-left: 4px; }
.acct .uid { font-size: 11.5px; color: var(--text-faint); margin-top: 5px; }

.acctstats { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 16px; }
.acctstats .c {
  position: relative; overflow: hidden;
  padding: 14px 15px; border-radius: var(--r);
  background: linear-gradient(158deg, #2c1a17, #16100f);
  border: 1px solid var(--line-gold); box-shadow: var(--sh-2);
}
.acctstats .c .k { font-size: 11.5px; color: var(--text-faint); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.acctstats .c .k .u { margin-left: auto; font-size: 10.5px; }
.acctstats .c .v { font-size: 27px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; color: var(--gold-2); }
.acctstats .c .ic { position: absolute; right: 10px; bottom: 6px; font-size: 26px; opacity: .85; }

.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fgrid a {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 15px 4px 13px; border-radius: 12px;
  font-size: 11.5px; color: var(--text-dim);
}
.fgrid a:active { background: #ffffff0d; }
.fgrid a i { font-size: 22px; font-style: normal; line-height: 1; }
.fgrid a.hl { color: var(--gold-2); }

.verline { text-align: center; font-size: 11px; color: #5b3b31; margin-top: 18px; }

.shcard {
  padding: 18px; border-radius: var(--r-lg); margin-top: 12px;
  background: linear-gradient(160deg, #2c1a17, #150d0c);
  border: 1px solid var(--gold-3); box-shadow: var(--sh-2);
}
.shcard .k { font-size: 12px; color: var(--text-faint); margin-bottom: 7px; }
.shcard .v { font-size: 38px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: var(--gold-2); }
.shcard .v small { font-size: 14px; font-weight: 600; color: var(--text-faint); margin-left: 5px; }
.shcard .meta { margin-top: 14px; font-size: 12px; color: var(--text-faint); line-height: 1.9; }
.shcard .meta b { color: var(--text-dim); font-weight: 600; }

.shmenu { margin-top: 12px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-gold); }
.shmenu a {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 14px; background: linear-gradient(158deg, #2c1a17, #16100f);
  border-bottom: 1px solid #ffffff0d; font-size: 14px;
}
.shmenu a:last-child { border-bottom: 0; }
.shmenu a .ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 14px;
  background: #ffffff0a; border: 1px solid var(--line-gold);
}
.shmenu a .ar { margin-left: auto; color: var(--text-faint); }

.rpthead {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border-radius: var(--r) var(--r) 0 0;
  background: #1a100f; border: 1px solid var(--line-gold); border-bottom: 0;
}
.rpthead .gm { font-size: 14.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; color: #fff3dc; }
.rpthead .gm::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--gold); }
.rpthead .mine { margin-left: auto; text-align: right; }
.rpthead .mine .k { font-size: 10.5px; color: var(--text-faint); }
.rpthead .mine .v { font-size: 16px; font-weight: 900; color: var(--gold-2); font-variant-numeric: tabular-nums; }

.rptstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-gold); border: 1px solid var(--line-gold); border-top: 0; border-bottom: 0; }
.rptstats .s { background: #140c0b; padding: 12px 8px; text-align: center; }
.rptstats .s .k { font-size: 10.5px; color: var(--text-faint); margin-bottom: 6px; }
.rptstats .s .v { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rptstats .s .v.win { color: var(--win); }

.rpttbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rpttbl th { text-align: left; padding: 9px 11px; font-size: 11px; font-weight: 600; color: var(--text-faint); background: #1c1211; border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold); }
.rpttbl td { padding: 11px; border-bottom: 1px solid #ffffff0d; background: #140c0b; }
.rpttbl .n { text-align: right; font-variant-numeric: tabular-nums; }
.rpttbl tr.me td { background: var(--gold-soft); color: #4a2a02; font-weight: 800; }
.rpttbl td.p { font-weight: 800; }
.rpttbl tfoot td { background: #1c1211; font-weight: 800; border-bottom: 0; }
.rpttbl tfoot td.tot { background: var(--win); color: #06251a; }
.rptwrap { overflow-x: auto; border: 1px solid var(--line-gold); border-top: 0; border-radius: 0 0 var(--r) var(--r); }

.pending {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 14px; font-size: 12.5px; color: var(--text-dim);
  background: #140c0b; border: 1px solid var(--line-gold); border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
}
.pending .ic { color: var(--gold); font-size: 15px; }

/* ---------- 兼容：旧的 .games / .game ---------- */
.games { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.game {
  position: relative; overflow: hidden; display: block;
  border-radius: var(--r); padding: 15px 14px 14px;
  border: 1px solid var(--line-gold);
  background: linear-gradient(158deg, #2c1a17, #16100f);
  box-shadow: var(--sh-2);
}
.game h3 { margin: 10px 0 3px; font-size: 15.5px; font-weight: 800; }
.game p { margin: 0; font-size: 11.5px; color: var(--text-faint); }

/* ================= 插画素材接入 =================
 * assets/img/ 里放了 PNG 就自动生效；没放就沿用上面的 CSS 造型。
 * 由 art.js 在 <html> 上加 has-* 类来切换。
 */
.artimg { display: block; width: 100%; height: 100%; object-fit: contain; }

/* 有图的槽位：去掉 emoji 的字号限制，交给图片 */
[data-art].has-art { font-size: 0; line-height: 0; }

.masthead [data-art="masthead"] {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.masthead [data-art="masthead"].has-art ~ .title .t1,
.masthead [data-art="masthead"].has-art ~ .title .t2 { display: none; }

/* chest.png 裁掉空白后 428x355（1.21:1），槽位按这个比例给，图才撑得满 */
.balcard [data-art="chest"].has-art {
  position: absolute; right: 6px; top: 4px; width: 106px; height: 88px; z-index: 1;
  filter: drop-shadow(0 4px 10px #1a030477);
}
/* 有聚宝盆图就把 emoji 那个去掉，不然会从图后面露出来 */
.has-chest .balcard::after { display: none; }

.gcard .art.has-art { width: 84px; height: 84px; right: 4px; bottom: 2px; transform: none; }
.hero .sl .deco.has-art { width: 112px; height: 112px; right: 4px; bottom: 0; transform: none; }
.resume .mark.has-art { width: 48px; height: 48px; }
/* 铜钱图上了就整颗换掉：CSS 画的金圆 + ::after 方孔都不要了。
 * ▶ 也一并去掉 —— 图上本来就有「招財進寶」四个字，再压个箭头就糊了。 */
.resume .go.has-art {
  background: none; box-shadow: none; border-radius: 0;
  width: 56px; height: 56px; margin-top: 14px;
  filter: drop-shadow(0 5px 14px #1a0304aa);
}
.resume .go.has-art::after { display: none; }
/* 底部导航：emoji 占位只要 21px 就够，换成插画后要大一圈才压得住 */
.tabbar button i.has-art {
  width: 30px; height: 30px;
  filter: saturate(.7) brightness(.82);       /* 没选中的压暗；不用 grayscale，金色会发灰 */
}
.tabbar button.on i.has-art { filter: drop-shadow(0 2px 8px var(--or-glow)); }

/* nav-play.png 本身就是一整个金环奖牌，CSS 画的那个金圆底得撤掉，
 * 不然金环中间会透出一块金饼，两层金糊在一起。 */
.has-nav-play .tabbar .playbtn .ring {
  background: none; border: 0; box-shadow: none;
  width: 72px; height: 72px; top: -30px;
}
.has-nav-play .tabbar .playbtn .lbl { margin-top: 48px; }
/* 金环内圈是透明的，在后面垫一块金底板从环里透出来，
 * 把奖牌从深色导航条上托起来。直径按环的内孔给（约外径的 72%），
 * 大了会从金环外面探出来。 */
.has-nav-play .tabbar .playbtn .ring::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--gold-metal);
  box-shadow: inset 0 2px 0 #fff8e2, inset 0 -5px 10px #8a5c1255,
              0 4px 14px -2px #1a0304cc;
}
.tabbar .playbtn .ring em.has-art {
  position: relative; z-index: 1;   /* 压在底板上面，不然会被盖住 */
  width: 100%; height: 100%;
  filter: drop-shadow(0 5px 14px #1a0304cc);
}

/* 红漆卡：九宫格拉伸 */
.has-lacquer .resume {
  background: none; border: 0;
  border-image: url(img/card-red.png) 46 fill / 46px / 0 stretch;
  box-shadow: var(--sh-3);
}
.has-lacquer .hero .sl.s1 { background-image: url(img/card-red.png); background-size: 100% 100%; }

/* 金框：九宫格拉伸 */
.has-goldfrm .gcard {
  border: 0;
  border-image: url(img/frame-gold.png) 34 fill / 34px / 0 stretch;
}
.has-goldfrm .hero .slides { border: 0; border-image: url(img/frame-gold.png) 34 fill / 34px / 0 stretch; }

/* 元宝按钮：ingot.png 直接铺成底
 * 元宝顶上那个鼓包占了上半张图，字压上去看不清，所以用 padding-top
 * 把文字顶到元宝肚子那块平面上（grid 居中 + 上内边距 = 整体下移一半）。*/
.has-ingot .balact,
.has-ingot .cats button,
.has-ingot .amts button {
  background: url(img/ingot.png) center/100% 100% no-repeat;
  border-radius: 0; border: 0; box-shadow: none;
  /* 金底上的深棕字 + 一道高光描边，做出压印效果，不然金压金糊成一团 */
  color: #46240a; text-shadow: 0 1px 0 #ffeab5, 0 -1px 1px #7a4a0f66;
}
.has-ingot .balact::before,
.has-ingot .cats button::before,
.has-ingot .amts button::before { display: none; }

/* 没选中的那几颗：元宝上盖一层暗色压下去。
 * 暗色层是铺满整个按钮的矩形，所以要用 mask 按同一张图的 alpha 裁成元宝轮廓，
 * 否则元宝四周会露出一个黑方块。
 * 不用 filter：filter 会把文字一起压暗，字就看不清了。 */
.has-ingot .cats button:not(.on),
.has-ingot .amts button:not(.on) {
  background:
    linear-gradient(#170704ad, #170704ad),
    url(img/ingot.png) center/100% 100% no-repeat;
  -webkit-mask: url(img/ingot.png) center/100% 100% no-repeat;
          mask: url(img/ingot.png) center/100% 100% no-repeat;
  color: #d9b078; text-shadow: none;
}

/* ingot.png 裁掉空白后是 328x230（1.43:1）。按钮尽量按这个比例给宽高，
 * 否则元宝会被拉扁；padding-top ≈ 高度的 32%，字正好落在肚子中间。 */
.has-ingot .balact { height: 54px; padding-top: 17px; }        /* 77x54 ≈ 1.43 */
.has-ingot .cats button { height: 48px; min-width: 82px; padding: 14px 12px 0; }
.has-ingot .amts button { height: 56px; padding: 18px 6px 0; }
/* 元宝按钮长高了，emoji 聚宝盆往上收一点，别压到「邀请」那颗 */
.has-ingot .balcard::after { font-size: 78px; top: -10px; right: -2px; }

/* 底部导航条底图 */
.has-navbar .tabbar {
  background: url(img/nav-bar.png) center bottom/100% 100% no-repeat;
  border-top: 0; box-shadow: none;
}
.has-navbar .tabbar::before { display: none; }
.has-navbar .tabbar .playbtn .ring { background: none; border: 0; box-shadow: none; }

/* ================= Jackpot 活动奖励卡 =================
 * 两列错落排布。奖金数字由 hall.js 从引擎读，这里只管样子。 */
.jack {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 11px; align-items: start;
}
.jcard {
  position: relative; display: block; overflow: hidden;
  padding: 13px 12px 14px; border-radius: 12px;
  border: 1px solid var(--line-gold);
  box-shadow: var(--sh-2), inset 0 1px 0 #ffffff12;
  min-height: 150px;
}
/* 五张各给一个底色，别全长一个样 */
.jcard.c1 { background: linear-gradient(158deg, #3a1a16, #1d0f0d); }
.jcard.c2 { background: linear-gradient(158deg, #16263a, #0d141d); }
.jcard.c3 { background: linear-gradient(158deg, #3a2e12, #1d170b); }
.jcard.c4 { background: linear-gradient(158deg, #2a1636, #150c1d); }
.jcard.c5 { background: linear-gradient(158deg, #123428, #0a1c16); }
/* 第 2 张和第 4 张往下错开，做出瀑布流的感觉 */
.jcard.c2, .jcard.c4 { margin-top: 18px; }

.jcard .jlive {
  position: absolute; left: 0; top: 0; z-index: 2;
  padding: 3px 10px 4px; border-radius: 12px 0 10px 0;
  font-size: 9.5px; font-weight: 900; letter-spacing: 1px;
  color: #fff; background: linear-gradient(135deg, #2f7fd4, #1b4f8e);
}
.jcard .jart {
  position: absolute; right: 6px; top: 8px; z-index: 1;
  width: 54px; height: 54px; font-size: 32px; line-height: 1;
  display: grid; place-items: center;
  opacity: .9; filter: drop-shadow(0 3px 8px #00000088);
}
.jcard .jart.has-art { width: 56px; height: 56px; font-size: 0; }

.jcard .jttl {
  display: block; margin-top: 24px; position: relative; z-index: 2;
  font-size: 15px; font-weight: 900; letter-spacing: .5px;
  color: var(--gold-2); text-shadow: 0 2px 4px #0008;
}
.jcard .jsub {
  display: block; margin-top: 5px; min-height: 30px;
  font-size: 11px; line-height: 1.5; color: var(--text-faint);
}
.jcard .jval {
  display: flex; align-items: baseline; gap: 6px; margin-top: 9px;
}
.jcard .jval span { font-size: 10.5px; color: var(--text-faint); }
.jcard .jval b {
  font-size: 19px; font-weight: 900; color: var(--gold-soft);
  font-variant-numeric: tabular-nums; text-shadow: 0 2px 5px #000a;
}
.jcard .jtop { margin-top: 9px; font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }
.jcard .jtop b { display: block; margin-top: 2px; color: #8fd0ff; font-size: 13px; font-weight: 800; }

.jcard .jprog {
  margin-top: 9px; height: 5px; border-radius: 3px; overflow: hidden;
  background: #ffffff1a;
}
.jcard .jprog i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-soft));
  min-width: 3px;
}
.jcard .jpnum {
  margin-top: 5px; font-size: 10.5px; color: var(--gold-2);
  font-variant-numeric: tabular-nums;
}
.jcard:active { transform: scale(.985); }