/* 样式总入口：基础 → 通用组件 → 首页。具体规则放在对应模块中。 */
:root {
  color-scheme: dark;
  --bg: #020f1b;
  --panel: #051420;
  --text: #f3f1ec;
  --muted: #adb3ba;
  --gold: #e5c274;
  --gold-light: #ffe3a1;
  --border: #554c39;
  --border-soft: #28333a;
  --radius: 9px;
  --page-width: 1440px;
  --font: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
.bh-surface { scroll-behavior: smooth; scroll-padding-top: 20px; }
.bh-surface { margin: 0; background: radial-gradient(ellipse at 50% 0, #081a2b 0, var(--bg) 65%); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
button, a, .game-card { transition: color .18s, border-color .18s, background .18s, box-shadow .18s; }
svg { display: block; width: 100%; height: 100%; }
[data-icon] { display: inline-flex; flex: none; width: 23px; height: 23px; }
[hidden] { display: none !important; }
.container { width: calc(100% - 40px); max-width: var(--page-width); margin-inline: auto; }
.gold-button { border: 1px solid #f7dc9d; border-radius: 28px; color: #211800; background: linear-gradient(#ffe9af 0%, #f6d37b 44%, #d5a73e 100%); box-shadow: inset 0 1px 1px #fff6d1, 0 2px 1px #78531b; font-weight: 700; }
.gold-button:hover { background: linear-gradient(#fff1ca, #efc665); box-shadow: 0 0 17px #ddb25335; }
.panel { background: linear-gradient(115deg, #06172390, #03111ca8); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: inset 0 0 0 3px #ffffff02; }
.skip-link { position: fixed; top: -70px; left: 20px; z-index: 10; background: var(--gold); color: #07101c; padding: 12px; }
.skip-link:focus { top: 10px; }
.artwork { display: block; width: 100%; height: 100%; overflow: hidden; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .bh-surface { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

.site-header { border-bottom: 1px solid #3f423e; background: #020e18e8; }
.header-inner { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-crown { width: 46px; height: 43px; color: var(--gold); filter: drop-shadow(0 2px 2px #000); }
.brand strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 30px; line-height: 1.05; letter-spacing: .4px; color: var(--gold-light); }
.brand small { display: block; font-size: 11px; letter-spacing: 2.5px; margin-top: 2px; }
.main-nav { display: flex; align-items: stretch; gap: clamp(10px, 2.1vw, 34px); margin-left: auto; margin-right: auto; align-self: stretch; }
.main-nav a, .main-nav button { display: flex; align-items: center; gap: 8px; position: relative; padding: 0 3px; white-space: nowrap; font-size: 17px; }
.main-nav [data-icon] { width: 21px; height: 21px; }
.main-nav a::after { content: ''; position: absolute; bottom: 7px; height: 2px; left: 0; right: 0; background: transparent; }
.main-nav a.is-active::after { background: var(--gold); box-shadow: 0 0 9px #e8c06d40; }
.main-nav a.is-active [data-icon], .main-nav a:hover, .main-nav button:hover { color: var(--gold-light); }
.header-account { display: flex; align-items: center; gap: 14px; flex: none; }
.balance { display: flex; gap: 8px; align-items: center; border: 1px solid #182c3a; border-radius: 30px; padding: 8px 11px 8px 16px; background: linear-gradient(#0b1d2d, #061320); font-size: 14px; white-space: nowrap; box-shadow: inset 0 0 0 3px #ffffff02; }
.balance b { font-weight: 500; letter-spacing: .5px; }
.balance button { padding: 0; display: flex; color: #b2b7b9; }
.balance [data-icon] { width: 16px; height: 16px; }
.recharge { height: 36px; padding: 0 24px; font-size: 17px; }
.recharge[data-action="deposit"] { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.recharge[data-action="deposit"] [data-icon] { width:18px; height:18px; }

.section-heading { display: flex; align-items: center; justify-content: space-between; min-height: 31px; padding: 0 2px 3px; }
.section-heading h2 { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: 18px; font-weight: 600; letter-spacing: 1px; }
.text-button { display: flex; align-items: center; gap: 5px; color: #c6c5c3; padding: 2px 5px; font-size: 13px; letter-spacing: .5px; }
.text-button [data-icon] { width: 15px; height: 15px; }
.text-button:hover { color: var(--gold-light); }
.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.game-card { display: block; width: 100%; padding: 0; text-align: left; border: 1px solid #8b7449; border-radius: 9px; overflow: hidden; background: #03121e; box-shadow: inset 0 0 0 2px #f1d8a012; }
.game-card:hover { border-color: #f8d789; box-shadow: 0 0 17px #e4b24f20; }
.game-art { aspect-ratio: 2.25; overflow: hidden; background: #0b1b2b; border-bottom: 1px solid #69573b; position: relative; }
.game-art::after { content: '进入游戏  ›'; position: absolute; inset: 0; display: grid; place-items: center; background: #00102070; color: #ffe1a2; font-weight: 700; letter-spacing: 3px; opacity: 0; transition: opacity .18s; }
.game-card:hover .game-art::after, .game-card:focus-visible .game-art::after { opacity: 1; }
.game-meta { padding: 3px 12px 6px; }
.game-meta h3 { font-size: 17px; line-height: 1.5; letter-spacing: 1px; }
.game-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 3px; }
.stat { display: flex; align-items: center; gap: 7px; }
.stat + .stat { border-left: 1px solid #263039; padding-left: 13px; }
.stat [data-icon] { width: 22px; height: 22px; color: #b4bec5; }
.stat:last-child [data-icon] { color: var(--gold); }
.stat small { display: block; font-size: 11px; color: #cbc9c4; line-height: 1.25; letter-spacing: 1px; }
.stat b { display: block; font-size: 16px; line-height: 1.2; font-weight: 500; }
.stat:last-child b { color: var(--gold-light); }
.activity-grid { display: grid; grid-template-columns: 1.06fr 1fr 1fr .52fr; gap: 12px; align-items: center; }
.activity-card { display: flex; align-items: center; text-align: left; gap: 8px; width: 100%; height: clamp(94px, 8vw, 120px); padding: 0 10px 0 0; overflow: hidden; border: 1px solid #86734f; border-radius: 8px; background: linear-gradient(110deg,#0c203e,#03101e); }
.activity-card:nth-child(2) { background: linear-gradient(110deg,#102322,#04101b); }
.activity-card:nth-child(3) { background: linear-gradient(110deg,#241d3b,#131329); }
.activity-card:hover { border-color: var(--gold-light); }
.activity-art { width: 49%; height: 100%; flex: none; mask-image: linear-gradient(to right, #000 85%, transparent); }
.activity-copy h3 { font-size: clamp(17px, 1.65vw, 23px); letter-spacing: 1px; margin-bottom: 4px; white-space: nowrap; }
.activity-copy p, .activity-copy span { font-size: 12px; line-height: 1.7; white-space: nowrap; }
.activity-copy span { letter-spacing: 2px; }
.app-download { display: flex; justify-content: center; gap: 7px; align-items: center; min-height: 70px; width: 100%; border: 2px solid #bb985d; border-radius: 40px; background: radial-gradient(ellipse at top,#192128,#03111c); white-space: nowrap; }
.app-download > [data-icon] { width: 26px; height: 40px; color: var(--gold); }
.app-download strong { font-size: 18px; font-weight: 500; letter-spacing: 1px; }
.app-download small { display: block; font-size: 11px; margin-top: 4px; letter-spacing: 1px; }
.app-download:hover { border-color: var(--gold-light); }

#site-dialog { color: var(--text); width: min(460px, calc(100% - 32px)); max-height: calc(100% - 40px); padding: 34px 30px 28px; border: 1px solid #9c8051; border-radius: 16px; background: radial-gradient(ellipse at top,#182b3c,#061320 70%); box-shadow: 0 24px 100px #0009; text-align: center; }
#site-dialog::backdrop { background: #000a; backdrop-filter: blur(5px); }
.dialog-close { position: absolute; right: 12px; top: 12px; padding: 5px; color: var(--muted); }
.dialog-emblem { color: var(--gold); width: 44px; height: 44px; margin: 0 auto 12px; }
.dialog-eyebrow { color: var(--gold); font-size: 10px; letter-spacing: 3px; margin-bottom: 8px; }
#dialog-title { font-size: 25px; margin-bottom: 14px; }
#dialog-description { color: #bdc5cb; font-size: 14px; line-height: 1.9; }
.dialog-confirm { margin-top: 24px; min-width: 160px; padding: 10px 24px; }
.promotion-list { text-align: left; list-style: none; padding: 0; margin: 18px 0 0; }
.promotion-list li { border-bottom: 1px solid #ffffff15; padding: 12px 0; }
.promotion-list strong { color: var(--gold-light); display: block; margin-bottom: 4px; }
.promotion-list span { color: var(--muted); font-size: 13px; }

.custom-art { object-fit:cover; }
.hero-art .custom-art { object-fit:contain; }
.custom-icon { display:block; width:100%; height:100%; object-fit:contain; }
.custom-logo { display:block; width:205px; height:46px; object-fit:contain; object-position:left center; }
.has-custom-background { background-position:center top; background-size:cover; background-attachment:fixed; }

.hero { position: relative; isolation: isolate; overflow: hidden; height: clamp(180px,15.5vw,225px); margin-top: 9px; border: 1px solid #94764a; border-radius: 11px; box-shadow: inset 0 0 0 3px #ffffff03; background: #031222; }
.hero-copy { position: relative; z-index: 1; padding: clamp(16px,1.5vw,27px) 3.8%; }
.hero h1 { font-size: clamp(29px,3.2vw,46px); font-weight: 700; line-height: 1.3; letter-spacing: .5px; color: var(--gold-light); text-shadow: 0 2px 1px #8c6c37; white-space: nowrap; }
.hero h1 span { font-size: 1.13em; letter-spacing: -1px; margin-left: 3px; }
.hero p { font-size: clamp(16px,1.65vw,22px); letter-spacing: 1px; margin: 6px 0 11px; }
.hero-cta { width: clamp(176px,16vw,230px); height: clamp(44px,4vw,54px); font-size: 24px; letter-spacing: 2px; }
.hero-art { position: absolute; z-index: -1; right: 2%; top: 0; height: 100%; width: 51%; mask-image: linear-gradient(to right, transparent, #000 10%); }
.welcome-bar { display: flex; align-items: center; gap: 12px; margin: 9px 7px 8px; min-height: 44px; }
.welcome-bar > p { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; flex: 1; }
.welcome-bar strong { color: var(--gold); font-size: 17px; font-weight: 500; }
.welcome-bar p span { font-size: 12px; }
.welcome-bar i { display: inline-block; height: 12px; border-left: 1px solid #a2a1a1; vertical-align: middle; margin: 0 7px; }
.quick-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; flex: 1; }
.quick-actions a, .quick-actions button { display: flex; justify-content: center; align-items: center; gap: 11px; height: 44px; padding: 0 16px; border: 1px solid #36404a; border-radius: 7px; background: linear-gradient(#0c1d2a,#06131f); box-shadow: inset 0 0 0 3px #ffffff03; font-size: 18px; white-space: nowrap; }
.quick-actions [data-icon] { color: var(--gold); width: 27px; height: 27px; }
.quick-actions button:hover, .quick-actions a:hover { border-color: var(--gold); }
.categories { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); padding: 6px 8px; margin-bottom: 6px; }
.category { position: relative; padding: 0 6px; min-width: 0; }
.category + .category { border-left: 1px solid #334048; }
.category-art { display: block; height: clamp(62px,5.4vw,82px); width: 100%; overflow: hidden; mask-image: linear-gradient(to right,transparent,#000 7%,#000 93%,transparent); }
.category-label { display: block; font-size: 16px; letter-spacing: 1px; line-height: 1.5; }
.category:hover, .category.is-selected { color: var(--gold-light); background: linear-gradient(transparent,#d2a45212); }
.category.is-selected::after { content: ''; position: absolute; bottom: -6px; height: 2px; background: var(--gold); left: 22%; right: 22%; }
.games-section, .activities-section { padding: 0 9px 3px; margin-top: 6px; scroll-margin-top: 12px; }
.activities-section { padding-bottom: 6px; }
.empty-state { text-align: center; padding: 36px 16px; color: var(--muted); min-height: 185px; }
.empty-state [data-icon] { color: var(--gold); width: 32px; height: 32px; }
.empty-state h3 { color: var(--text); font-size: 17px; margin: 8px 0; }
.empty-state p { font-size: 13px; }
.empty-state button { padding: 8px 20px; margin-top: 18px; font-size: 13px; }
.site-footer { display: flex; justify-content: space-between; gap: 12px; color: #697581; font-size: 11px; padding: 14px 2px 18px; }
.noscript { padding: 20px; text-align: center; color: var(--gold); }

/* PC 优先：常见桌面宽度保留单行导航、七分类和四列游戏。 */
@media (min-width: 1600px) { .header-inner { min-height: 74px; } .hero { margin-top: 14px; } .welcome-bar { margin-block: 13px; } .games-section,.activities-section { margin-top: 10px; } .section-heading { min-height: 38px; } .game-meta { padding-block: 7px 10px; } }
@media (max-width: 1120px) and (min-width: 901px) { .header-inner { gap: 15px; } .brand strong { font-size: 27px; } .brand-crown { width: 38px; } .main-nav { gap: 14px; } .main-nav a,.main-nav button { font-size: 15px; gap: 5px; } .header-account { gap: 8px; } .recharge { padding-inline: 18px; } .balance { font-size: 12px; padding-inline: 10px; } .welcome-bar > p { gap: 8px; flex-wrap: wrap; } .welcome-bar p span { font-size: 10px; } .quick-actions { gap: 9px; } .quick-actions a,.quick-actions button { padding-inline: 12px; } .activity-copy p { font-size: 10px; } .app-download { gap: 3px; } .app-download strong { font-size: 16px; } .stat + .stat { padding-left: 7px; } }
/* 窄窗口兜底，不改变桌面端的参考图布局。 */
@media (max-width: 900px) { .container { width: calc(100% - 28px); } .header-inner { flex-wrap: wrap; gap: 0; padding-top: 10px; } .brand { order: 0; } .header-account { margin-left: auto; order: 1; } .main-nav { order: 2; width: 100%; justify-content: space-between; min-height: 54px; gap: 8px; } .main-nav a,.main-nav button { font-size: 15px; } .hero { height: 185px; } .hero h1 { font-size: 27px; } .hero-copy { padding: 23px; } .hero p { font-size: 15px; } .hero-art { right: 0; width: 49%; opacity: .65; } .hero-cta { font-size: 20px; } .welcome-bar { flex-wrap: wrap; margin-inline: 0; } .welcome-bar > p { flex-basis: 100%; } .quick-actions { flex-basis: 100%; } .category-label { font-size: 13px; letter-spacing: 0; } .category-art { height: 51px; } .game-grid { gap: 9px; } .game-meta { padding-inline: 8px; } .game-meta h3 { font-size: 15px; } .game-stats { gap: 4px; } .stat { gap: 4px; } .stat [data-icon] { width: 16px; } .stat + .stat { padding-left: 5px; } .stat small { font-size: 9px; letter-spacing: 0; } .stat b { font-size: 13px; } .activity-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; } .activity-card { height: 90px; gap: 3px; } .activity-copy h3 { font-size: 17px; } .activity-copy p,.activity-copy span { font-size: 10px; } .app-download { grid-column: 1/-1; min-height: 50px; border-radius: 8px; } .app-download > [data-icon] { height: 30px; } .app-download small { display: inline; margin-left: 12px; } }
@media (max-width: 580px) { .container { width: calc(100% - 20px); } .brand strong { font-size: 25px; } .brand-crown { width: 34px; } .brand small { font-size: 9px; letter-spacing: 1.5px; } .header-account { gap: 7px; } .balance { padding: 7px 8px; font-size: 10px; gap: 4px; } .recharge { font-size: 13px; height: 31px; padding: 0 12px; } .main-nav { min-height: 48px; } .main-nav a,.main-nav button { font-size: 13px; gap: 4px; } .main-nav [data-icon] { width: 17px; height: 17px; } .hero { height: 174px; } .hero-copy { padding: 18px 15px; } .hero h1 { font-size: clamp(19px,4.9vw,27px); letter-spacing: 0; white-space: normal; } .hero p { font-size: 11px; letter-spacing: 0; margin-block: 9px 15px; } .hero-art { width: 70%; right: -12%; opacity: .32; } .hero-cta { width: 145px; height: 36px; font-size: 19px; } .welcome-bar > p { flex-wrap: wrap; gap: 4px; white-space: normal; } .welcome-bar strong { font-size: 15px; } .welcome-bar p span { font-size: 10px; } .quick-actions { gap: 6px; } .quick-actions a,.quick-actions button { font-size: 14px; gap: 6px; padding: 0 5px; height: 40px; } .quick-actions [data-icon] { width: 21px; height: 21px; } .categories { overflow-x: auto; grid-template-columns: repeat(7,92px); padding-inline: 3px; } .category-art { height: 48px; } .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .section-heading h2 { font-size: 16px; } .text-button { font-size: 11px; } .game-meta h3 { font-size: 16px; } .game-stats { margin-top: 4px; } .stat small { font-size: 10px; } .activity-grid { grid-template-columns: 1fr; } .activity-card { height: 96px; } .activity-art { width: 40%; } .activity-copy h3 { font-size: 20px; } .activity-copy p,.activity-copy span { font-size: 13px; } .site-footer { flex-direction: column; gap: 5px; font-size: 10px; } }


/* 横向循环轮播；PC / WAP 共用行为，保留各端的横幅排版。 */
.carousel { touch-action:pan-y pinch-zoom; }
.carousel-viewport { width:100%; height:100%; overflow:hidden; }
.carousel-track { display:flex; width:100%; height:100%; transition:transform .44s cubic-bezier(.22,.65,.3,1); will-change:transform; }
.carousel-slide { position:relative; isolation:isolate; flex:0 0 100%; width:100%; min-width:0; height:100%; overflow:hidden; }
.carousel-slide img { user-select:none; -webkit-user-drag:none; }
.carousel-theme-blue { background:radial-gradient(ellipse at 85% 75%,#16354f66,transparent 70%); }
.carousel-theme-green { background:radial-gradient(ellipse at 85% 75%,#29463c99,#051a2090 75%); }
.carousel-theme-purple { background:radial-gradient(ellipse at 85% 75%,#48304d99,#10162a90 75%); }
.carousel-controls { position:absolute; inset:0; z-index:3; pointer-events:none; }
.carousel-controls button { pointer-events:auto; }
.carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); width:32px; height:44px; display:grid; place-items:center; border:1px solid #cba86b45; border-radius:6px; color:#eed399; background:#02101eb8; }
.carousel-prev { left:7px; }
.carousel-next { right:7px; }
.carousel-prev [data-icon] { transform:rotate(180deg); }
.carousel-arrow [data-icon] { width:17px; height:17px; }
.carousel-pagination { position:absolute; bottom:0; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:0; height:28px; padding:0 7px; border-radius:18px 18px 0 0; background:#04122090; }
.carousel-pagination button { display:grid; place-items:center; min-width:26px; height:28px; padding:0 5px; color:#eace94; }
.carousel-pagination button span { width:6px; height:6px; border-radius:5px; background:#c8bdab65; transition:width .2s,background .2s; }
.carousel-pagination button.is-active span { width:18px; background:#ebcb85; }
.carousel-pagination [data-carousel-play] { font-size:12px; border-left:1px solid #dcc08730; margin-left:4px; }
.carousel-pagination [data-carousel-play] span { width:auto; height:auto; background:none; line-height:1; }
.carousel-full-image { position:absolute; inset:0; width:100%; height:100%; padding:0; display:block; }
.carousel-full-image img { display:block; width:100%; height:100%; object-fit:cover; }
.carousel-full-image:focus-visible { outline-offset:-4px; }
.carousel[data-variant="desktop"] .hero-title { font-size:clamp(29px,3.2vw,46px); font-weight:700; line-height:1.3; letter-spacing:.5px; color:var(--gold-light); text-shadow:0 2px 1px #8c6c37; white-space:nowrap; }
.carousel[data-variant="desktop"] .carousel-theme-green .hero-art,.carousel[data-variant="desktop"] .carousel-theme-purple .hero-art { width:38%; right:6%; }
.carousel[data-variant="desktop"] .carousel-theme-green .hero-art img,.carousel[data-variant="desktop"] .carousel-theme-purple .hero-art img { object-fit:contain; }
.carousel[data-variant="mobile"] { height:220px; }
.carousel[data-variant="mobile"] .hero-copy { padding:14px 18px; }
.carousel[data-variant="mobile"] .hero-title { margin-top:8px; font-size:23px; font-weight:600; line-height:1.2; letter-spacing:1px; color:#fff1d3; }
.carousel[data-variant="mobile"] .hero-title strong { display:inline-block; margin-top:2px; font-size:39px; letter-spacing:-1px; background:linear-gradient(#fff0c2,#e0b368); color:transparent; background-clip:text; }
.carousel[data-variant="mobile"] .hero-title em { font-size:22px; font-style:normal; margin-left:5px; letter-spacing:1px; }
.carousel[data-variant="mobile"] .carousel-arrow { top:auto; bottom:0; transform:none; width:26px; height:28px; border:0; background:transparent; }
.carousel[data-variant="mobile"] .carousel-prev { left:auto; right:36px; }
.carousel[data-variant="mobile"] .carousel-next { right:8px; }
.carousel[data-variant="mobile"] .carousel-pagination { height:25px; }
.carousel[data-variant="mobile"] .carousel-pagination button { height:25px; }
.carousel[data-variant="mobile"] .hero-cta { margin-top:9px; }
.carousel[data-variant="mobile"] .carousel-theme-green .hero-art,.carousel[data-variant="mobile"] .carousel-theme-purple .hero-art { width:65%; right:-8%; height:142px; bottom:8px; }
.carousel[data-variant="mobile"] .carousel-theme-green .hero-art img,.carousel[data-variant="mobile"] .carousel-theme-purple .hero-art img { object-fit:contain; }
@media(max-width:900px) { .carousel[data-variant="desktop"] .hero-title { font-size:27px; } .carousel[data-variant="desktop"] .carousel-arrow { width:22px; height:32px; } }
@media(max-width:580px) { .carousel[data-variant="desktop"] .hero-title { font-size:clamp(19px,4.9vw,27px); white-space:normal; } .carousel[data-variant="desktop"] .carousel-arrow { top:auto; bottom:0; transform:none; border:0; background:none; } }
@media(prefers-reduced-motion:reduce) { .carousel-track,.carousel-pagination button span { transition:none; } }


/* 内页共用的面板、筛选、提示与详情弹窗。 */
.portal-main { padding-top:28px; padding-bottom:20px; min-height:75vh; }
.portal-main section { margin-top:0; }
.portal-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:14px; }
.eyebrow { color:#9e875f; font-size:10px; letter-spacing:3px; margin-bottom:8px; }
.portal-heading h1 { font-size:29px; font-weight:600; letter-spacing:2px; }
.portal-heading h1 > span { font-size:12px; font-weight:400; letter-spacing:.5px; color:#91a1ae; margin-left:19px; }
.subtle-badge { display:inline-flex; border:1px solid #5c513c; background:#c6a7620c; border-radius:20px; color:#c7b387; padding:5px 12px; font-size:11px; white-space:nowrap; }
.surface { background:linear-gradient(125deg,#102231,#091823); border:1px solid #2b3d4a; border-radius:13px; }
.gold-kicker { font-size:10px; color:#dfc38d; letter-spacing:2.8px; }
.portal-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; min-height:42px; font-size:13px; border-radius:7px; white-space:nowrap; }
.portal-button [data-icon] { width:17px; height:17px; }
.quiet-button { display:inline-flex; justify-content:center; align-items:center; gap:7px; border:1px solid #726344; border-radius:7px; color:#e3cc9a; min-height:39px; padding:8px 15px; font-size:12px; }
.text-link { display:inline-flex; align-items:center; gap:5px; color:#cfb889; font-size:12px; min-height:36px; }
.text-link [data-icon] { width:13px; height:13px; }
.portal-main button:disabled,#site-dialog button:disabled { cursor:default; opacity:.6; }
.portal-main input,.portal-main select,.auth-fields input { font:inherit; border:1px solid #30414e; background:#071621; color:#dce2e4; border-radius:7px; min-height:42px; padding:9px 12px; outline:none; }
.portal-main input:focus,.portal-main select:focus { border-color:#c7a568; }
.portal-main select { font-size:12px; }
.pill-tabs { display:flex; align-items:center; gap:8px; }
.pill-tabs button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 15px; min-height:37px; border-radius:6px; color:#a8b6c2; border:1px solid transparent; font-size:12px; white-space:nowrap; }
.pill-tabs button.is-active { color:#eed69f; background:#ddbb6f12; border-color:#816d49; }
.pill-tabs [data-icon] { width:15px; height:15px; }
.portal-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:46px 16px; min-height:250px; grid-column:1/-1; }
.portal-empty > [data-icon] { width:43px; height:43px; margin-bottom:18px; color:#6e7d89; padding:4px; }
.portal-empty h3 { color:#d8dfdf; font-size:17px; font-weight:500; margin-bottom:8px; }
.portal-empty p { color:#8698a8; font-size:12px; line-height:1.8; }
.portal-empty .portal-button,.portal-empty .quiet-button { margin-top:20px; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.panel-heading h2 { font-size:17px; font-weight:500; }
.panel-heading > span { font-size:11px; color:#879aaa; }
.panel-caption { color:#899eaf; font-size:12px; margin:-6px 0 20px; line-height:1.8; }
.portal-toast { position:fixed; left:50%; bottom:92px; transform:translateX(-50%); background:#162b3ef5; border:1px solid #9c8358; padding:12px 20px; color:#f0d8a2; border-radius:9px; box-shadow:0 8px 30px #0008; z-index:30; font-size:13px; max-width:calc(100% - 32px); text-align:center; }
.auth-dialog,.offer-dialog,.game-dialog { width:min(530px,calc(100% - 24px))!important; }
.auth-tabs { display:flex; border-bottom:1px solid #344453; margin:24px 0 20px; }
.auth-tabs button { flex:1; min-height:43px; color:#9dabb7; font-size:14px; border-bottom:2px solid transparent; }
.auth-tabs button.is-active { color:#ead099; border-color:#d7b671; }
.auth-fields { text-align:left; }
.auth-fields label { display:block; font-size:12px; color:#c5cfd7; margin-bottom:15px; }
.auth-fields input { display:block; width:100%; margin-top:7px; min-height:44px; font-size:13px; opacity:.65; }
.auth-meta { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:#8397a7; }
.auth-meta button,.auth-meta a { color:#d2b982; font-size:11px; padding:4px 0; }
.auth-unavailable { width:100%; min-height:42px; border-radius:7px; margin-top:16px; }
.auth-note { font-size:10px; line-height:1.7; color:#7e93a4; text-align:center; margin-top:12px; }
.offer-dialog .dialog-emblem,.game-dialog .dialog-emblem { display:none; }
.offer-detail-art { position:relative; height:145px; margin:20px 0; border:1px solid #5b533f; border-radius:10px; overflow:hidden; background:#122338; }
.offer-detail-art img { object-fit:contain; }
.offer-detail-art > span { position:absolute; top:10px; right:10px; font-size:10px; padding:4px 8px; color:#eddaaf; background:#05101bc9; border-radius:4px; }
.offer-detail-.bh-surface { text-align:left; }
.detail-label { font-size:14px; color:#e4cc95; margin:18px 0 10px; }
.offer-detail-.bh-surface p,.offer-detail-.bh-surface li { font-size:12px; line-height:1.9; color:#9eafbd; }
.offer-detail-.bh-surface ol { padding-left:20px; margin-top:0; }
.offer-facts { margin:18px 0; padding:12px; border:1px solid #2d414f; border-radius:7px; }
.offer-facts > div { display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:12px; }
.offer-facts span { color:#8398a9; }
.offer-facts strong { font-weight:400; color:#c8d2d8; }
.offer-detail-.bh-surface > button,.game-detail-info > button { min-height:42px; width:100%; border-radius:7px; }
.game-detail-art { height:195px; overflow:hidden; border-radius:10px; margin:20px 0; }
.game-detail-art img { object-fit:cover; }
.game-detail-info p { color:#9cafbe; line-height:1.9; font-size:12px; margin:16px 0; }
.dialog-inline-action { margin-top:20px; }
.theme-green { background:linear-gradient(120deg,#193331,#071d23)!important; }
.theme-purple { background:linear-gradient(120deg,#2b2442,#141c2b)!important; }
[data-variant="mobile"] .portal-main { padding-top:12px; }
[data-variant="mobile"] .portal-heading { margin-bottom:18px; }
[data-variant="mobile"] .portal-heading h1 { font-size:25px; }
[data-variant="mobile"] .portal-heading h1 > span { display:block; font-size:10px; margin:7px 0 0; }
[data-variant="mobile"] .eyebrow { font-size:8px; letter-spacing:2.4px; margin-bottom:6px; }
[data-variant="mobile"] .portal-heading > .subtle-badge { font-size:8px; padding:4px 8px; }
[data-variant="mobile"] .portal-button { min-height:39px; font-size:11px; padding:8px 14px; }
[data-variant="mobile"] .portal-empty { min-height:220px; padding:35px 10px; }
[data-variant="mobile"] .portal-empty h3 { font-size:15px; }
[data-variant="mobile"] .portal-empty p { font-size:11px; }
[data-variant="mobile"] .portal-main select { font-size:10px; padding:8px; }
[data-variant="mobile"] .pill-tabs { gap:4px; }
[data-variant="mobile"] .pill-tabs button { font-size:10px; padding:8px 10px; }
[data-variant="mobile"] .panel-heading { margin-bottom:14px; }
[data-variant="mobile"] .panel-heading h2 { font-size:16px; }
[data-variant="mobile"] .panel-heading > span { font-size:9px; }
[data-variant="mobile"] .text-link { font-size:10px; }
[data-variant="mobile"] .offer-detail-art { height:120px; }
[data-variant="mobile"] .game-detail-art { height:150px; }

/* 内页采用紧凑的功能布局，金色仅用于选中项和主要操作。 */
.bh-surface:not([data-page="home"]) { background:#07121c; }
.portal-main { max-width:1200px; padding-top:24px; min-height:calc(100vh - 62px); }
.portal-heading { margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid #26323e; }
.portal-heading h1 { font-size:22px; font-weight:500; letter-spacing:0; }
.surface { background:#0e1b27; border:1px solid #293641; border-radius:5px; }
.portal-main .gold-button { background:#d4b477; border-color:#d4b477; border-radius:4px; box-shadow:none; font-weight:500; }
.portal-main .gold-button:hover { background:#e1c38c; }
.portal-main .quiet-button,.portal-main input,.portal-main select,.portal-button { border-radius:4px; }
.subtle-badge { border:0; border-radius:3px; background:#ffffff06; color:#a0a9b1; }
.pill-tabs { gap:22px; border-bottom:1px solid #293641; }
.pill-tabs button { border:0; border-radius:0; border-bottom:2px solid transparent; padding:12px 2px; background:transparent; font-size:13px; }
.pill-tabs button.is-active { border-color:#cfb479; color:#e2c892; background:transparent; }
.portal-empty { min-height:190px; padding:30px 12px; }
.portal-empty > [data-icon] { width:30px; height:30px; margin-bottom:12px; opacity:.7; }
.portal-empty h3 { font-size:14px; }
.portal-empty p { font-size:12px; color:#82929f; }
.panel-heading { margin-bottom:18px; }
.panel-heading h2 { font-size:16px; }
.portal-main .site-footer { margin-top:24px; border-top:1px solid #222f3a; color:#71818e; }
.bh-surface:not([data-page="home"]) #site-dialog { border-radius:6px; }
[data-variant="mobile"] .portal-main { padding-top:16px; }
[data-variant="mobile"] .portal-heading { margin-bottom:16px; padding-bottom:12px; }
[data-variant="mobile"] .portal-heading h1 { font-size:20px; }
[data-variant="mobile"] .portal-main .pill-tabs { gap:16px; }
[data-variant="mobile"] .portal-main .pill-tabs button { font-size:12px; padding:10px 1px; }
[data-variant="mobile"] .portal-empty { min-height:180px; padding:26px 8px; }
[data-variant="mobile"] .portal-empty h3 { font-size:14px; }
[data-variant="mobile"] .portal-main .site-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 12px; padding:18px 0; font-size:10px; line-height:1.8; }

/* 小面积英文标题：自然大小写、衬线斜体，减少机械的大字距。 */
.page-title { display:flex; align-items:baseline; flex-wrap:wrap; gap:13px; }
.english-label { font-family:Georgia,"Times New Roman",serif; font-style:italic; font-weight:400; font-size:18px; letter-spacing:.1px; color:#aa9672; }
[data-variant="mobile"] .page-title { gap:9px; }
[data-variant="mobile"] .english-label { font-size:15px; }

.lobby-layout { display:grid; grid-template-columns:170px minmax(0,1fr); gap:24px; align-items:start; }
.lobby-sidebar { padding:8px 0; }
.sidebar-title { padding:12px 16px; color:#c7cdd2; font-size:14px; display:flex; align-items:center; gap:9px; border-bottom:1px solid #293641; margin-bottom:6px; }
.sidebar-title [data-icon] { width:17px; height:17px; }
.lobby-sidebar > button { width:100%; display:flex; align-items:center; gap:8px; padding:13px 13px; border-left:2px solid transparent; color:#9eabb7; font-size:13px; }
.lobby-sidebar > button > span:last-child,.lobby-sidebar > button > small { margin-left:auto; color:#71818d; font-size:11px; }
.lobby-sidebar > button.is-active { background:#c8ac7010; color:#e4c992; border-left-color:#c5a565; }
.category-mini-art { width:25px; height:22px; overflow:hidden; border-radius:3px; }
.search-bar { display:flex; gap:10px; margin-bottom:8px; }
.search-field { display:flex; align-items:center; flex:1; min-width:0; padding-left:12px; border:1px solid #30414e; border-radius:4px; background:#0b1823; }
.search-field > [data-icon] { width:16px; height:16px; color:#8b98a2; }
.search-field input { border:0; width:100%; min-width:0; background:transparent; font-size:13px; }
.search-field:focus-within { border-color:#b79c68; }
.search-clear { width:38px; height:40px; display:grid; place-items:center; flex:none; color:#87949e; }
.search-clear [data-icon] { width:13px; height:13px; }
.library-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; border-bottom:1px solid #293641; }
.library-toolbar .pill-tabs { border-bottom:0; }
#game-result-count { color:#7f8d98; font-size:12px; }
.lobby-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 16px; }
.lobby-card { position:relative; min-width:0; border:1px solid #293641; border-radius:5px; background:#0f1c27; overflow:hidden; }
.lobby-card:hover { border-color:#8c7851; }
.lobby-card-main { width:100%; display:block; padding:0; text-align:left; }
.lobby-cover { position:relative; display:block; aspect-ratio:2/1; background:#09141e; }
.lobby-cover .artwork { object-fit:cover; }
.game-type { position:absolute; bottom:7px; left:8px; background:#07121ddd; color:#cbd1d5; font-size:10px; padding:3px 6px; border-radius:2px; }
.favorite-button { position:absolute; top:7px; right:7px; width:32px; height:32px; display:grid; place-items:center; border:1px solid #ffffff25; border-radius:50%; color:#ded6c5; background:#05101acc; }
.favorite-button [data-icon] { width:16px; height:16px; }
.favorite-button.is-saved { color:#efd18f; border-color:#c4a262; }
.favorite-button.is-saved svg { fill:#e1b66a50; }
.lobby-card-copy { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 5px; padding:13px 12px; }
.lobby-card-copy > strong { font-size:15px; font-weight:500; }
.lobby-card-copy > span { color:#82909c; font-size:10px; }
.lobby-card-copy .game-card-bottom { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; color:#d0b986; }
.game-card-bottom small { font-size:11px; }
.game-card-bottom [data-icon] { width:12px; height:12px; }
.library-note { font-size:11px; color:#768793; margin:20px 0; }
@media(min-width:1250px){.lobby-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
[data-variant="mobile"] .lobby-layout { display:flex; flex-direction:column; gap:16px; }
[data-variant="mobile"] .lobby-sidebar { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:5px; gap:2px; }
[data-variant="mobile"] .sidebar-title,[data-variant="mobile"] .category-mini-art { display:none; }
[data-variant="mobile"] .lobby-sidebar > button { justify-content:center; padding:11px 1px; font-size:12px; border:0; border-radius:3px; }
[data-variant="mobile"] .lobby-sidebar > button.is-active { background:#b6985c20; }
[data-variant="mobile"] .lobby-sidebar > button > small,[data-variant="mobile"] .lobby-sidebar > button > span:last-child { display:none; }
[data-variant="mobile"] .lobby-main { width:100%; }
[data-variant="mobile"] .search-bar { gap:7px; }
[data-variant="mobile"] .search-field { padding-left:9px; }
[data-variant="mobile"] .search-field input { font-size:12px; padding:8px; }
[data-variant="mobile"] .search-clear { width:26px; }
[data-variant="mobile"] .lobby-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
[data-variant="mobile"] .lobby-cover { aspect-ratio:1.55; }
[data-variant="mobile"] .lobby-card-copy { padding:11px 9px; }
[data-variant="mobile"] .lobby-card-copy > strong { font-size:14px; }
[data-variant="mobile"] .lobby-card-copy > span { font-size:9px; }
[data-variant="mobile"] .lobby-card-copy > strong { grid-column:1/-1; }
[data-variant="mobile"] .lobby-card-copy .game-card-bottom { grid-column:2; grid-row:2; }
[data-variant="mobile"] .game-card-bottom [data-icon] { display:none; }
[data-variant="mobile"] #game-result-count { font-size:10px; }

.offer-tabs { margin-bottom:20px; }
.offer-list { display:grid; gap:16px; }
.offer-card { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:158px; border:1px solid #293641; border-radius:5px; overflow:hidden; background:#0e1b27; }
.offer-card.theme-green,.offer-card.theme-purple { background:#0e1b27!important; }
.offer-card-visual { padding:12px; background:#12202d; display:flex; align-items:center; justify-content:center; }
.offer-card-visual .artwork { width:100%; height:132px; object-fit:contain; }
.offer-card-content { position:relative; padding:22px 26px; }
.offer-tag { display:inline-block; font-size:11px; color:#bea775; margin-bottom:9px; }
.offer-card-content h2 { font-size:21px; font-weight:500; margin-bottom:9px; }
.offer-card-content > p { font-size:13px; color:#9aa9b5; }
.offer-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:20px; }
.offer-card-footer > span { display:flex; align-items:center; gap:6px; color:#798b98; font-size:11px; }
.offer-card-footer [data-icon] { width:13px; height:13px; }
.offer-card-footer button { position:absolute; right:26px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:12px; color:#d3bd8d; font-size:13px; padding:10px 16px; border:1px solid #6a5e45; border-radius:3px; }
.offer-page-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; font-size:12px; color:#7e8e9b; }
.support-card button,.support-card a { display:flex; align-items:center; gap:7px; color:#c7b78e; font-size:12px; min-height:40px; }
.support-card [data-icon] { width:17px; height:17px; }
[data-variant="mobile"] .offer-tabs { display:flex; justify-content:space-between; gap:8px; margin-bottom:16px; }
[data-variant="mobile"] .offer-card { grid-template-columns:110px minmax(0,1fr); min-height:150px; }
[data-variant="mobile"] .offer-card-visual { padding:6px; }
[data-variant="mobile"] .offer-card-visual .artwork { height:100px; }
[data-variant="mobile"] .offer-card-content { padding:14px 12px; }
[data-variant="mobile"] .offer-tag { font-size:10px; margin-bottom:6px; }
[data-variant="mobile"] .offer-card-content h2 { font-size:17px; margin-bottom:6px; }
[data-variant="mobile"] .offer-card-content > p { font-size:11px; }
[data-variant="mobile"] .offer-card-footer { margin-top:12px; gap:4px; }
[data-variant="mobile"] .offer-card-footer > span { font-size:9px; }
[data-variant="mobile"] .offer-card-footer > span [data-icon] { display:none; }
[data-variant="mobile"] .offer-card-footer button { position:static; transform:none; font-size:11px; padding:5px 0; border:0; gap:2px; }
[data-variant="mobile"] .offer-card-footer button [data-icon] { width:10px; }
[data-variant="mobile"] .offer-page-foot { align-items:flex-start; flex-direction:column; gap:2px; font-size:11px; line-height:1.8; }
@media(max-width:359px){[data-variant="mobile"] .offer-card{grid-template-columns:88px minmax(0,1fr);} [data-variant="mobile"] .offer-card-content{padding:13px 9px;}}

.profile-banner { display:flex; align-items:center; gap:14px; padding:18px 22px; background:#101e29; border:1px solid #293641; border-radius:5px; margin-bottom:20px; }
.profile-avatar { display:grid; place-items:center; flex:none; width:46px; height:46px; border-radius:50%; color:#b8aa8d; background:#23303a; }
.profile-avatar [data-icon] { width:25px; height:25px; }
.profile-info h2 { font-size:16px; font-weight:500; margin-bottom:6px; }
.profile-info p { font-size:12px; color:#8799a7; }
.profile-banner > button { margin-left:auto; }
.account-layout { display:grid; grid-template-columns:175px minmax(0,1fr); gap:20px; align-items:start; }
.account-menu { padding:6px 0; }
.account-menu > button { width:100%; display:flex; align-items:center; gap:10px; min-height:46px; padding:10px 14px; color:#a7b2bb; border-left:2px solid transparent; font-size:13px; }
.account-menu > button > [data-icon]:first-child { width:17px; height:17px; }
.account-menu > button > [data-icon]:last-child { width:10px; height:10px; margin-left:auto; color:#627782; }
.account-menu > button.is-active { color:#ddc68f; background:#c8ac7010; border-left-color:#c5a565; }
.account-service { padding:14px; border-top:1px solid #293641; margin-top:8px; }
.account-service > span { display:none; }
.account-service button,.account-service a { display:flex; align-items:center; gap:8px; font-size:12px; color:#bbaa87; min-height:32px; padding:0; }
.account-service [data-icon] { width:17px; height:17px; }
.account-content { min-width:0; }
.account-wallet { padding:18px 22px 0; margin-bottom:18px; }
.wallet-topline { display:flex; justify-content:space-between; align-items:center; }
.wallet-topline > span:first-child { display:flex; align-items:center; gap:8px; font-size:15px; }
.wallet-topline [data-icon] { width:18px; height:18px; color:#bca77d; }
.account-wallet-main { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; }
.account-wallet-main small { color:#a2aeb7; font-size:12px; }
.account-wallet-main strong { display:block; font-size:30px; font-weight:400; letter-spacing:2px; margin:8px 0; color:#e0cb9f; }
.account-wallet-main p { font-size:11px; color:#7f919e; }
.account-wallet-actions { display:flex; gap:10px; }
.account-wallet-actions > * { min-width:85px; }
.account-wallet-actions [data-icon] { width:15px; height:15px; }
.account-wallet-foot { display:flex; padding:14px 0; border-top:1px solid #293641; }
.account-wallet-foot > span { flex:1; color:#8c9ba6; font-size:12px; }
.account-wallet-foot b { font-weight:400; color:#c9d0d5; margin-left:12px; }
.account-shortcuts { display:flex; margin-bottom:18px; background:#0e1b27; border:1px solid #293641; border-radius:5px; }
.account-shortcut { flex:1; display:flex; align-items:center; gap:10px; padding:18px; text-align:left; }
.account-shortcut + .account-shortcut { border-left:1px solid #293641; }
.account-shortcut > [data-icon]:first-child { color:#bca87f; width:18px; height:18px; }
.account-shortcut strong { font-size:13px; font-weight:400; }
.account-shortcut > [data-icon]:last-child { margin-left:auto; width:11px; height:11px; color:#637d8e; }
.records-panel,.favorites-panel,.messages-panel,.security-panel { padding:22px; }
.record-filters { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.record-filters .pill-tabs { border-bottom:0; }
.records-columns { display:grid; grid-template-columns:1.5fr 1fr 1fr .7fr; padding:12px 15px; background:#142431; color:#899aa6; font-size:12px; }
.favorites-panel .lobby-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.security-intro { display:flex; align-items:center; gap:12px; padding-bottom:20px; border-bottom:1px solid #293641; }
.security-intro > [data-icon] { width:28px; height:28px; color:#b9a27a; }
.security-intro h2 { font-size:17px; font-weight:500; }
.security-intro p { color:#8495a2; font-size:12px; margin-top:7px; }
.security-intro > .subtle-badge { margin-left:auto; }
.security-row { display:flex; align-items:center; gap:14px; padding:20px 0; border-bottom:1px solid #293641; }
.security-row:last-child { border:0; padding-bottom:0; }
.security-row > [data-icon] { width:20px; height:20px; color:#af9c79; }
.security-row h3 { font-size:14px; font-weight:400; margin-bottom:6px; }
.security-row p { font-size:12px; color:#7f929f; }
.security-row > span:not([data-icon]) { margin-left:auto; color:#7b8b96; font-size:12px; }
.security-row .quiet-button { font-size:12px; min-height:32px; padding:6px 14px; }
[data-variant="mobile"] .profile-banner { padding:14px 12px; gap:10px; margin-bottom:16px; }
[data-variant="mobile"] .profile-avatar { width:35px; height:35px; }
[data-variant="mobile"] .profile-avatar [data-icon] { width:21px; height:21px; }
[data-variant="mobile"] .profile-info h2 { font-size:14px; }
[data-variant="mobile"] .profile-info p { font-size:10px; }
[data-variant="mobile"] .profile-banner > button { font-size:11px; padding:7px 10px; min-height:34px; }
[data-variant="mobile"] .account-layout { display:flex; flex-direction:column; gap:16px; }
[data-variant="mobile"] .account-menu { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:6px; width:100%; }
[data-variant="mobile"] .account-menu > button { flex-direction:column; justify-content:center; gap:7px; min-height:61px; padding:8px 1px; border:0; border-radius:3px; font-size:11px; }
[data-variant="mobile"] .account-menu > button > [data-icon]:last-child { display:none; }
[data-variant="mobile"] .account-service { display:flex; align-items:center; justify-content:center; margin:0; padding:0; border:0; }
[data-variant="mobile"] .account-service button,[data-variant="mobile"] .account-service a { flex-direction:column; justify-content:center; font-size:10px; gap:7px; }
[data-variant="mobile"] .account-content { width:100%; }
[data-variant="mobile"] .account-wallet { padding:15px 14px 0; margin-bottom:16px; }
[data-variant="mobile"] .wallet-topline > span:first-child { font-size:14px; }
[data-variant="mobile"] .account-wallet-main { gap:8px; padding:18px 0; }
[data-variant="mobile"] .account-wallet-main strong { font-size:26px; }
[data-variant="mobile"] .account-wallet-main small,[data-variant="mobile"] .account-wallet-main p { font-size:10px; }
[data-variant="mobile"] .account-wallet-actions { gap:6px; }
[data-variant="mobile"] .account-wallet-actions > * { min-width:53px; font-size:11px; padding:8px; gap:4px; min-height:34px; }
[data-variant="mobile"] .account-wallet-actions [data-icon] { display:inline-flex; width:13px; height:13px; }
[data-variant="mobile"] .account-wallet-foot > span { font-size:10px; }
[data-variant="mobile"] .account-wallet-foot b { margin-left:5px; }
[data-variant="mobile"] .account-shortcut { padding:14px 8px; gap:6px; justify-content:center; }
[data-variant="mobile"] .account-shortcut strong { font-size:11px; }
[data-variant="mobile"] .account-shortcut > [data-icon]:first-child { width:15px; height:15px; }
[data-variant="mobile"] .account-shortcut > [data-icon]:last-child { display:none; }
[data-variant="mobile"] .records-panel,[data-variant="mobile"] .favorites-panel,[data-variant="mobile"] .messages-panel,[data-variant="mobile"] .security-panel { padding:16px 12px; }
[data-variant="mobile"] .record-filters { gap:6px; }
[data-variant="mobile"] .record-filters .pill-tabs { gap:12px; }
[data-variant="mobile"] .record-filters .pill-tabs button { font-size:11px; }
[data-variant="mobile"] .records-columns { font-size:11px; padding:10px; }
[data-variant="mobile"] .favorites-panel .lobby-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
[data-variant="mobile"] .security-intro { gap:9px; }
[data-variant="mobile"] .security-intro h2 { font-size:16px; }
[data-variant="mobile"] .security-intro p { font-size:10px; }
[data-variant="mobile"] .security-row { gap:10px; }
[data-variant="mobile"] .security-row h3 { font-size:13px; }
[data-variant="mobile"] .security-row p { font-size:10px; }
[data-variant="mobile"] .security-row > span:not([data-icon]) { display:none; }
[data-variant="mobile"] .security-row .quiet-button { margin-left:auto; font-size:11px; padding:6px 10px; }
@media(max-width:359px){[data-variant="mobile"] .profile-avatar{display:none;} [data-variant="mobile"] .account-shortcut{padding:13px 4px;gap:4px;}}

/* 页面细节：可读性、交互状态与移动端触控。放在页面样式之后。 */
.bh-surface { scrollbar-gutter:stable; }
.bh-surface.dialog-open { overflow:hidden; }
.bh-surface { text-rendering:optimizeLegibility; }
button,a,input,select { touch-action:manipulation; }
button:not(:disabled),a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid #e2c38a; outline-offset:3px; }
button:disabled { cursor:not-allowed; }
img { -webkit-user-drag:none; }
.brand { flex-shrink:0; }
.custom-logo { object-fit:contain; }
.portal-heading { align-items:center; }
.page-title h1 { line-height:1.45; }
.english-label { color:#b6a17b; }
.surface,.lobby-card,.offer-card { border-color:#31404c; }
.search-field { transition:border-color .16s,box-shadow .16s; }
.search-field:focus-within { border-color:#b99d66; box-shadow:0 0 0 2px #c8a96519; }
.search-field input:focus-visible { outline:none; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; }
.search-clear:disabled { visibility:hidden; pointer-events:none; }
.portal-main input::placeholder { color:#8d9ca8; opacity:1; }
.portal-main select { cursor:pointer; }
.portal-main .library-toolbar .pill-tabs button { min-height:44px; }
#game-result-count { font-variant-numeric:tabular-nums; white-space:nowrap; }
.lobby-card-copy > strong { line-height:1.45; }
.lobby-card-copy > span { color:#9aa8b3; }
.library-note { line-height:1.8; color:#93a1ad; }
.favorite-button { width:40px; height:40px; }
.favorite-button.is-saved { background:#473a21; border-color:#ebce8c; box-shadow:inset 0 0 0 1px #d0af6440; }
.favorite-button.is-saved::after { content:''; position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%; background:#f2d396; }
.account-wallet-main strong,#balance-value,.balance b,.stat b { font-variant-numeric:tabular-nums; }
.account-wallet-main strong { line-height:1.2; }
.records-columns { letter-spacing:.2px; }
.record-filters { flex-wrap:wrap; }
.record-filters select { margin-left:auto; }
.account-wallet-actions > *,.security-row .quiet-button { min-height:40px; }
.offer-card-content > p { line-height:1.65; }
.offer-tag { line-height:1.4; }
.offer-card-footer button { min-height:40px; }
.portal-empty p { max-width:380px; }
.panel-caption { line-height:1.8; }
.site-footer { line-height:1.8; }
.main-nav a:not(.is-active) .custom-icon,.bottom-nav button .custom-icon { opacity:.7; }
.main-nav a.is-active .custom-icon { opacity:1; }
.section-eyebrow,.dialog-eyebrow { font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:13px; letter-spacing:.3px; color:#b29b74; }
#site-dialog { max-height:calc(100dvh - 32px); overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#71654d #0b1b29; padding:28px; border-radius:9px; background:#0c1c2a; }
#site-dialog .dialog-close { position:sticky; float:right; top:0; right:auto; margin:-12px -12px 0 0; width:40px; height:40px; display:grid; place-items:center; z-index:3; border:1px solid #344451; border-radius:50%; background:#112636; }
#site-dialog .dialog-close [data-icon] { width:16px; height:16px; }
#dialog-title { font-size:23px; line-height:1.4; padding-inline:28px; margin-bottom:10px; }
#dialog-description { line-height:1.75; font-size:13px; }
.dialog-confirm { border-radius:5px; min-height:42px; font-size:14px; }
.offer-detail-art,.game-detail-art { border-radius:6px; }
.offer-detail-.bh-surface p,.offer-detail-.bh-surface li { font-size:13px; line-height:1.9; }
.offer-detail-.bh-surface li + li { margin-top:5px; }
.auth-note { font-size:11px; }
.auth-fields input:disabled { opacity:1; color:#95a2ae; background:#0a1621; }
.auth-fields input::placeholder { color:#7d8e9d; opacity:1; }
.portal-toast { pointer-events:none; max-width:min(420px,calc(100% - 32px)); line-height:1.6; }
@media(hover:hover) and (pointer:fine) {
  .lobby-sidebar > button:hover,.account-menu > button:hover { background:#ffffff06; color:#ebd4a4; }
  .account-shortcut:hover { background:#ffffff05; }
  .lobby-card:hover,.offer-card:hover { border-color:#a88c57; }
  .lobby-card-main:hover .game-card-bottom,.text-link:hover { color:#f3d79e; }
  .quiet-button:hover,.offer-card-footer button:hover { background:#c2a06212; border-color:#baa06c; }
  .favorite-button:hover { background:#42351f; border-color:#d9bc7e; }
  .search-clear:hover { color:#edcea0; }
}
button:not(:disabled):active,.portal-button:active { filter:brightness(.93); }
[data-variant="desktop"] .portal-main { padding-top:26px; }
[data-variant="desktop"] .main-nav a::after { bottom:0; height:2px; }
[data-variant="desktop"] .games-section,[data-variant="desktop"] .activities-section { margin-top:12px; padding:0 10px 10px; }
[data-variant="desktop"] .section-heading { min-height:40px; }
[data-variant="desktop"] .category { padding-top:3px; padding-bottom:4px; }
[data-variant="desktop"] .game-meta { padding-top:10px; padding-bottom:10px; }
[data-variant="desktop"] .hero-title { text-shadow:0 1px 1px #8c6c3733; }
[data-variant="mobile"] { -webkit-text-size-adjust:100%; }
[data-variant="mobile"] .mobile-shell { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
[data-variant="mobile"] .site-header { padding-bottom:12px; }
[data-variant="mobile"] .header-login { min-height:40px; font-size:12px; }
[data-variant="mobile"] .bottom-nav { padding-top:8px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); border-top-color:#485044; }
[data-variant="mobile"] .bottom-nav a,[data-variant="mobile"] .bottom-nav button { font-size:11px; min-height:50px; }
[data-variant="mobile"] .bottom-nav .is-active::before { top:-9px; width:22px; box-shadow:none; }
[data-variant="mobile"] .announcement p { font-size:11px; }
[data-variant="mobile"] .announcement p > span { font-size:9px; }
[data-variant="mobile"] .announcement { min-height:42px; }
[data-variant="mobile"] .balance-caption { font-size:11px; }
[data-variant="mobile"] .sample-tag { font-size:9px; }
[data-variant="mobile"] .wallet-shortcuts > * { min-height:44px; font-size:12px; }
[data-variant="mobile"] .wallet-actions button { min-height:42px; }
[data-variant="mobile"] .category-label { font-size:12px; }
[data-variant="mobile"] .category-art { height:auto; aspect-ratio:1.7; border-radius:6px; }
[data-variant="mobile"] .section-heading h2 { font-size:19px; letter-spacing:.3px; }
[data-variant="mobile"] .section-eyebrow { margin-bottom:5px; }
[data-variant="mobile"] .text-button { font-size:12px; }
[data-variant="mobile"] .game-card { border-color:#5a503d; border-radius:7px; }
[data-variant="mobile"] .game-meta h3 { font-size:15px; line-height:1.5; margin-bottom:7px; }
[data-variant="mobile"] .stat small { font-size:10px; color:#a0aeba; }
[data-variant="mobile"] .stat b { font-size:13px; }
[data-variant="mobile"] .stat [data-icon] { width:12px; height:13px; }
[data-variant="mobile"] .game-stats { gap:5px; }
[data-variant="mobile"] .activity-copy p,[data-variant="mobile"] .activity-copy > span { font-size:11px; }
[data-variant="mobile"] .activity-card { border-radius:7px; }
[data-variant="mobile"] .carousel { height:236px; }
[data-variant="mobile"] .carousel .hero-copy { padding-top:16px; }
[data-variant="mobile"] .carousel .hero-art { bottom:20px; }
[data-variant="mobile"] .carousel .carousel-pagination { height:40px; padding:0 5px; border-radius:12px 12px 0 0; }
[data-variant="mobile"] .carousel .carousel-pagination button { width:34px; height:40px; }
[data-variant="mobile"] .carousel .carousel-arrow { width:40px; height:40px; bottom:0; }
[data-variant="mobile"] .carousel .carousel-prev { left:2px; right:auto; }
[data-variant="mobile"] .carousel .carousel-next { right:2px; }
[data-variant="mobile"] .search-field input { font-size:16px; min-height:44px; }
[data-variant="mobile"] .search-field input::placeholder { font-size:13px; }
[data-variant="mobile"] .search-clear { width:38px; height:44px; }
[data-variant="mobile"] .portal-main select { font-size:12px; min-height:44px; }
[data-variant="mobile"] .lobby-sidebar > button { min-height:44px; padding-block:10px; }
[data-variant="mobile"] .favorite-button { width:44px; height:44px; top:3px; right:3px; }
[data-variant="mobile"] .lobby-card-copy { padding:12px 10px; gap:9px 4px; }
[data-variant="mobile"] .lobby-card-copy > span { font-size:10px; }
[data-variant="mobile"] .game-card-bottom small { font-size:11px; }
[data-variant="mobile"] .library-note { font-size:11px; margin-top:18px; }
[data-variant="mobile"] .offer-card-content { padding:15px 12px; }
[data-variant="mobile"] .offer-card-content > p { font-size:12px; }
[data-variant="mobile"] .offer-card-footer > span { font-size:10px; }
[data-variant="mobile"] .offer-card-footer button { font-size:12px; min-height:40px; }
[data-variant="mobile"] .offer-card-visual .artwork { height:108px; }
[data-variant="mobile"] .profile-info p { font-size:11px; line-height:1.5; }
[data-variant="mobile"] .profile-banner > button { min-height:40px; }
[data-variant="mobile"] .account-menu > button { font-size:12px; }
[data-variant="mobile"] .account-service a,[data-variant="mobile"] .account-service button { font-size:11px; }
[data-variant="mobile"] .account-wallet-main small,[data-variant="mobile"] .account-wallet-main p { font-size:11px; }
[data-variant="mobile"] .account-wallet-actions > * { min-height:40px; }
[data-variant="mobile"] .account-wallet-foot > span { font-size:11px; }
[data-variant="mobile"] .account-shortcut { min-height:48px; }
[data-variant="mobile"] .account-shortcut strong { font-size:12px; }
[data-variant="mobile"] .security-row .quiet-button { min-height:40px; }
[data-variant="mobile"] .security-row p { font-size:11px; line-height:1.7; }
[data-variant="mobile"] .site-footer p { font-size:10px; line-height:1.8; }
[data-variant="mobile"] #site-dialog { padding:24px 20px; max-height:calc(100dvh - 24px); border-radius:9px; }
[data-variant="mobile"] #site-dialog .dialog-close { width:44px; height:44px; }
[data-variant="mobile"] #dialog-title { font-size:21px; }
[data-variant="mobile"] .portal-toast { bottom:calc(88px + env(safe-area-inset-bottom)); font-size:12px; }
@media(max-width:359px) {
 [data-variant="mobile"] .header-login { padding-inline:8px; font-size:11px; }
 [data-variant="mobile"] .announcement p > span { display:none; }
 [data-variant="mobile"] .wallet-row { flex-wrap:wrap; }
 [data-variant="mobile"] .game-meta { padding-inline:7px; }
 [data-variant="mobile"] .stat { gap:3px; }
 [data-variant="mobile"] .stat [data-icon] { display:none; }
 [data-variant="mobile"] .offer-card-footer { flex-wrap:wrap; }
 [data-variant="mobile"] .account-shortcut strong { font-size:11px; }
 [data-variant="mobile"] .account-wallet-main { flex-wrap:wrap; }
 [data-variant="mobile"] .profile-info p { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* 弹窗标题与关闭按钮共用固定可见的顶栏，避免遮挡正文。 */
#site-dialog .dialog-header { position:sticky; top:0; z-index:4; display:flex; align-items:center; gap:12px; padding:0 0 12px; margin:0 0 16px; border-bottom:1px solid #30424f; background:#0c1c2a; box-shadow:0 -28px 0 #0c1c2a; }
#site-dialog .dialog-header #dialog-title { flex:1; padding:0; margin:0; text-align:left; font-size:21px; }
#site-dialog .dialog-header .dialog-close { position:static; float:none; margin:0; flex:none; }
[data-variant="mobile"] #site-dialog .dialog-header #dialog-title { font-size:20px; }

/* 黑金主题：炭灰底色、淡金边框与独立 WebP 背景装饰。
   普通页面默认生效；配色对比页仅在 gold 时生效。 */
:root { --bg:#22252b; --panel:#2c3036; --text:#f1eee8; --muted:#b5b4b1; --gold:#dfbf80; --gold-light:#f5dfb1; --border:#8b7755; --border-soft:#575249; background:#22252b; }
:root .bh-surface { background-color:#22252b; background-image:url('./image/background-gold-lines.webp'),radial-gradient(ellipse at 6% 0%,#b68c4528,transparent 48%),radial-gradient(ellipse at 94% 40%,#bb925019,transparent 48%); background-position:top center; background-size:1600px auto,100% 900px,100% 1500px; background-repeat:repeat-y,no-repeat,no-repeat; color:var(--text); }
:root .mobile-shell { background-color:#22252b; background-image:url('./image/background-gold-lines.webp'),radial-gradient(ellipse at 0 0,#bc97552b,transparent 65%); background-size:760px auto,100% 700px; background-position:top center; background-repeat:repeat-y,no-repeat; box-shadow:0 0 60px #10111530; }
:root .site-header { background:linear-gradient(110deg,#303136,#272b31 65%,#35332f); border-bottom:1px solid #8b775570; box-shadow:0 1px 0 #f0d8a009; }
:root .bottom-nav { background:#2b2e34f7; border-top:1px solid #ae9160; box-shadow:0 -5px 22px #11131925; }
:root :is(.panel,.surface,.profile-banner,.wallet-panel,.account-shortcuts,.game-card,.lobby-card,.offer-card) { background:linear-gradient(125deg,#34373c,#292e35); border-color:#6c614f; box-shadow:inset 0 1px 0 #f5dfb110,0 4px 16px #10121616; }
:root :is(.offer-card.theme-green,.offer-card.theme-purple) { background:linear-gradient(125deg,#34373c,#292e35)!important; }
:root :is(.game-card,.lobby-card) { border-color:#89734f; }
:root :is(.category-art,.offer-card-visual,.records-columns,.profile-avatar) { background:#34383e; border-color:#70634e; }
:root .category-all .category-art { background:radial-gradient(ellipse at top,#5b503b,#30353b); }
:root :is(.balance,.search-field) { background:#252a30; border-color:#74664f; }
:root :is(.hero,.carousel-slide) { background:radial-gradient(ellipse at 5% 15%,#565044,#29313b 58%,#182734); border-color:#b4955e; }
:root .carousel-theme-green { background:linear-gradient(120deg,#35443b,#233536); }
:root .carousel-theme-purple { background:linear-gradient(120deg,#443b4c,#29313b); }
:root .hero { box-shadow:inset 0 0 0 3px #f1d1970b,0 6px 24px #11141a20; }
:root :is(.gold-button,.portal-main .gold-button) { background:linear-gradient(115deg,#ecd19b,#d6b475); color:#292216; border:1px solid #ffe6b1; box-shadow:inset 0 0 0 2px #7b5a302a,0 0 0 1px #a6834c80,0 3px 7px #15151524; }
:root :is(.quick-actions button,.quick-actions a,.quiet-button,.outline-button,.header-login,.offer-card-footer button) { border:1px solid #b99a63; background:linear-gradient(115deg,#c8a46c15,#c8a46c04); color:#f0d6a6; box-shadow:inset 0 0 0 2px #d9b87809,0 2px 5px #15151512; }
:root .quick-actions :is(a,button) { background:linear-gradient(120deg,#45423a,#2d333a); }
:root .header-service { border:1px solid #8d7854; border-radius:7px; background:#c4a16409; }
:root .pill-tabs { border-color:#645b4c; gap:9px; padding-bottom:12px; flex-wrap:wrap; }
:root .pill-tabs button { border:1px solid #77674e; border-radius:5px; padding:9px 14px; background:#2c3035; color:#c3c2bc; }
:root .pill-tabs button.is-active { border-color:#d1af71; color:#f5dcaa; background:linear-gradient(120deg,#b8934833,#b8934812); box-shadow:inset 0 0 0 2px #d0ae700b; }
:root .lobby-sidebar > button.is-active,:root .account-menu > button.is-active { background:#d3ae6817; border-color:#d2b174; color:#f3d7a1; }
:root :is(.portal-heading,.security-intro,.security-row,.account-wallet-foot,.account-menu,.account-service,.account-shortcut,.site-footer,.wallet-shortcuts,.auth-tabs) { border-color:#625b4d; }
:root .portal-heading { position:relative; }
:root .portal-heading::after { content:''; position:absolute; bottom:-1px; left:0; width:64px; height:2px; background:linear-gradient(90deg,#e1bf7b,#e1bf7b00); pointer-events:none; }
:root .english-label { color:#c9ae80; }
:root :is(.section-eyebrow,.dialog-eyebrow) { color:#c1a779; }
:root :is(.library-note,.panel-caption,.security-intro p,.security-row p,.security-state,.profile-info p,.offer-card-content>p,.offer-card-footer>span,.offer-page-foot,.portal-empty p,.lobby-card-copy>span,.field-hint,.account-form-note,.account-form-help,.account-wallet-main p,.account-wallet-foot>span,.site-footer,.site-footer p,.stat small,.category-label) { color:#b1b5b8; }
:root :is(.portal-main input,.portal-main select,.account-form input,.account-form select) { background:#23282f; border-color:#776a55; color:#f0eee8; }
:root :is(.account-form input::placeholder,.portal-main input::placeholder) { color:#a1a7ad; }
:root :is(.account-form input:focus,.account-form select:focus,.search-field:focus-within) { border-color:#e0bd7a; box-shadow:0 0 0 2px #d3b17520; }
:root .account-form .has-error input { border-color:#ed9c91; }
:root #site-dialog { background:#2b3037; color:#f1eee8; border-color:#ad9061; scrollbar-color:#9a8055 #2b3037; box-shadow:0 20px 70px #0006,inset 0 0 0 3px #f0d09708; }
:root #site-dialog .dialog-header { background:#2b3037; border-color:#6c614f; box-shadow:0 -28px 0 #2b3037; }
:root #site-dialog .dialog-close { background:#353940; border-color:#a58b60; color:#e7d3aa; }
:root .auth-tabs button { color:#bdc0c4; }
:root .auth-tabs button.is-active { color:#f1d6a0; border-color:#d6b272; }
:root .favorite-button { background:#2c303bd9; border-color:#ae9465; }
:root .favorite-button.is-saved { background:#5c4d32; }
:root .activity-card { border-color:#ad9060; }
:root .app-download { background:linear-gradient(115deg,#454035,#2b3037); box-shadow:inset 0 0 0 3px #d0ae7010; }
:root .portal-toast { background:#34363af5; border-color:#c5a56e; }
@media(hover:hover) and (pointer:fine) {
 :root :is(.quiet-button,.outline-button,.quick-actions button,.quick-actions a,.header-login,.offer-card-footer button,.pill-tabs button):hover { border-color:#f2d399; background:#cba46124; box-shadow:inset 0 0 0 2px #d9b87810,0 0 12px #d7ad5e10; }
 :root :is(.gold-button,.portal-main .gold-button):hover { background:linear-gradient(115deg,#f6dfb0,#e2c18a); border-color:#fff0d0; }
 :root :is(.lobby-card,.game-card,.offer-card):hover { border-color:#d7b475; }
}
:root [data-variant="mobile"] .portal-main .pill-tabs { gap:6px; }
:root [data-variant="mobile"] .portal-main .pill-tabs button { padding:8px 11px; }
:root [data-variant="mobile"] .offer-card-footer { flex-wrap:wrap; row-gap:9px; }
:root [data-variant="mobile"] .offer-card-footer button { padding:6px 12px; min-height:36px; }
:root [data-variant="mobile"] .record-filters .pill-tabs { padding-bottom:0; }
:root [data-variant="mobile"] .wallet-shortcuts { padding:8px; gap:8px; }
:root [data-variant="mobile"] .wallet-shortcuts > * { border:1px solid #8c7855; border-radius:6px; background:#b3935710; }
:root [data-variant="mobile"] .game-card { border-color:#9a8057; }
:root [data-variant="mobile"] .bottom-nav .is-active { color:#f1d6a0; background:#d6af6510; border-radius:6px; }



/* 柔和黑金背景：大面积暖灰与两道淡金流线，两端各自适配。 */
:root .bh-surface { background-image:url('./image/background-gold-desktop.webp'),radial-gradient(ellipse at 4% 0,#b8a17a1a,transparent 58%); background-size:100% auto,100% 1000px; background-position:center top; background-repeat:repeat-y,no-repeat; }
:root .site-header { background:linear-gradient(110deg,#333334,#2b2d31 65%,#333332); border-bottom-color:#ad947f3b; }
:root :is(.panel,.surface,.profile-banner,.wallet-panel,.account-shortcuts,.game-card,.lobby-card,.offer-card) { background:linear-gradient(135deg,#333538,#2b2e33); border-color:#8e7a594f; box-shadow:inset 0 1px 0 #f5e1bd09,0 4px 16px #10121610; }
:root :is(.offer-card.theme-green,.offer-card.theme-purple) { background:linear-gradient(135deg,#333538,#2b2e33)!important; }
:root :is(.game-card,.lobby-card,.activity-card) { border-color:#a28a605e; }
:root :is(.quick-actions button,.quick-actions a,.quiet-button,.outline-button,.header-login,.offer-card-footer button) { border-color:#ba9b688f; background:linear-gradient(120deg,#c7ab7c0d,#c7ab7c04); box-shadow:inset 0 1px 0 #eed8b30a; }
:root :is(.wallet-panel,.profile-banner) { background:radial-gradient(ellipse at 0 0,#bda16e16,transparent 70%),linear-gradient(120deg,#363739,#2c3035); }
:root .portal-heading { border-bottom-color:#a28a603d; }
:root .portal-heading::after { width:36px; background:#cfb178; height:1px; }
:root .bh-surface[data-variant="mobile"] { background-image:none; }
:root [data-variant="mobile"] .mobile-shell { background-image:url('./image/background-gold-mobile-soft.webp'),radial-gradient(ellipse at 8% 0,#bfa7801c,transparent 60%); background-size:100% auto,100% 850px; background-position:center 100px,center top; background-repeat:repeat-y,no-repeat; }
:root [data-variant="mobile"] :is(.section-heading,.portal-heading) { background:none; border-radius:0; position:relative; padding:6px 0 12px; border-bottom:1px solid #ac93623d; }
:root [data-variant="mobile"] :is(.section-heading,.portal-heading)::after { content:''; position:absolute; left:0; right:auto; bottom:-1px; width:32px; height:1px; background:#d4b780; transform:none; pointer-events:none; }
:root [data-variant="mobile"] .games-section,:root [data-variant="mobile"] .activities-section { margin-bottom:26px; }
:root [data-variant="mobile"] .game-card { border-color:#a28a607a; }
:root [data-variant="mobile"] .wallet-shortcuts > * { border-color:#ba9b6870; background:#b3935707; }
:root [data-variant="mobile"] .bottom-nav { background:#2b2e33fa; border-top-color:#a58c615e; }
:root :is(.section-heading,.portal-heading),:root [data-variant="mobile"] :is(.section-heading,.portal-heading) { background-image:url('./image/background-gold-heading.webp'); background-size:min(75%,480px) 100%; background-position:right center; background-repeat:no-repeat; }


/* 全站香槟金磨砂纹理：页面底层、内容面板、导航及弹窗均覆盖。
   图案随页面滚动并纵向平铺；独立 WebP 素材可直接替换。 */
:root .bh-surface { background-color:#26272a; background-image:url('./image/background-gold-matte-pc.webp'); background-size:100% auto; background-position:center top; background-repeat:repeat-y; }
:root .bh-surface[data-variant="mobile"] { background-image:none; }
:root [data-variant="mobile"] .mobile-shell { background-color:#26272a; background-image:url('./image/background-gold-matte-wap.webp'); background-size:100% auto; background-position:center top; background-repeat:repeat-y; }
:root :is(.panel,.surface,.profile-banner,.wallet-panel,.account-shortcuts,.game-card,.lobby-card,.offer-card,.account-wallet,.app-download) {
 background-color:#303237; background-image:url('./image/background-gold-matte-panel.webp'),linear-gradient(125deg,#363637,#2b2f34); background-size:100% 600px,100% 100%; background-position:center center; background-repeat:repeat,no-repeat; border-color:#9b835966;
}
:root :is(.offer-card.theme-green,.offer-card.theme-purple) { background:#303237 url('./image/background-gold-matte-panel.webp') center/100% 600px repeat!important; }
:root :is(.section-heading,.portal-heading),:root [data-variant="mobile"] :is(.section-heading,.portal-heading) { background:none; }
:root .site-header { background:#303135 url('./image/background-gold-matte-panel.webp') center 40%/100% 600px repeat; }
:root .bottom-nav { background:#2b2d31 url('./image/background-gold-matte-panel.webp') center 40%/100% 600px repeat; }
:root .offer-card-visual { background:#303438a8; }
:root #site-dialog { background:#2b3037 url('./image/background-gold-matte-panel.webp') center/100% 600px repeat; }
:root #site-dialog .dialog-header { background:#303237 url('./image/background-gold-matte-panel.webp') center/100% 600px repeat; box-shadow:0 -28px 0 #303237; }
:root :is(.library-toolbar,.record-filters,.site-footer) { background-color:#24262924; }
:root [data-variant="mobile"] :is(.panel,.surface,.profile-banner,.wallet-panel,.account-shortcuts,.game-card,.lobby-card,.offer-card,.account-wallet,.app-download) { background-size:100% 400px,100% 100%; }
:root [data-variant="mobile"] :is(.offer-card.theme-green,.offer-card.theme-purple) { background-size:100% 400px!important; }
:root [data-variant="mobile"] .wallet-shortcuts > * { background:#24262930; }

:root { display:block; font-size:14px; line-height:1.5; font-family:var(--font); }
.bh-surface { min-height:100vh; }
.bh-surface .container { box-sizing:border-box; }
.bh-preview { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding:7px 14px; background:#473d2c; color:#f4dcad; font-size:12px; text-align:center; border-bottom:1px solid #8a714b; }
.bh-preview a { text-decoration:underline; }
.bh-status { border:1px solid #75664b; border-radius:8px; padding:20px; color:#beb9af; text-align:center; grid-column:1/-1; }
.bh-status button { display:block; margin:12px auto 0; padding:8px 20px; }
.bh-caption { color:#aca79c; font-size:11px; margin-top:6px; }
.bh-demo { position:absolute; top:10px; left:10px; padding:3px 8px; background:#292726df; border:1px solid #a48b60; border-radius:4px; color:#e0c693; font-size:10px; }
.game-card { position:relative; text-align:left; }
.game-meta .bh-game-note { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#b5afa4; margin-top:10px; font-size:12px; }
.game-meta .bh-game-note b { color:#e5c88f; font-weight:500; }
.bh-profile { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.bh-profile .gold-button,.bh-profile .quiet-button { padding:8px 15px; }
.bh-user-label { color:var(--gold-light); }
.bh-grid-four { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.bh-center-actions { display:flex; justify-content:center; margin:24px 0; gap:12px; }
.bh-center-actions button { padding:10px 30px; }
.bh-funds-entry { padding:24px; }
.bh-funds-entry p { margin:12px 0 20px; color:var(--muted); }
.bh-funds-entry .gold-button { padding:11px 24px; }
.account-shortcuts { margin-top:18px; }
.bh-surface .account-menu>button { width:100%; }
.bh-surface .profile-info { min-width:0; }
.bh-surface .profile-info h2 { overflow-wrap:anywhere; }
.bh-surface .security-actions { margin-left:auto; }
.bh-surface .security-row .quiet-button { padding:8px 12px; }
.bh-surface .activity-art .artwork { object-fit:cover; }
.bh-surface .activity-card { cursor:pointer; }
.bh-surface [data-bh-section] { cursor:pointer; }
.bh-surface #bh-page { padding-bottom:20px; }
.bh-surface .search-bar .gold-button { padding:10px 22px; white-space:nowrap; }
.bh-surface .search-bar { display:flex; }
.bh-surface .search-field { flex:1; min-width:0; }
.bh-surface .search-field input { width:100%; min-width:0; }
.bh-surface .lobby-sidebar button { width:100%; }
.bh-surface .favorite-button { z-index:3; }
.bh-game-wrap { position:relative; }
.bh-game-wrap>.game-card { width:100%; }
.bh-surface .brand-logo { width:auto; max-width:158px; max-height:50px; object-fit:contain; }
.bh-surface .carousel-full-image img { object-fit:cover; }
.bh-surface .hero-copy { pointer-events:none; }
.bh-surface .hero-cta { pointer-events:auto; }
.bh-surface .carousel-track { transition:transform .45s ease; }
.bh-surface .carousel-slide { flex:0 0 100%; }
.bh-surface [data-demo] .game-art::after { content:'设计预览'; }
.platform-app-download-banner { display:flex; align-items:center; gap:14px; padding:14px; margin:14px 0; border:1px solid #8a7454; border-radius:10px; background:#303238; }
.platform-app-download-copy { flex:1; min-width:0; }
.platform-app-download-title,.platform-app-download-description { display:block; }
.platform-app-download-description { color:#b4b0a6; font-size:12px; }
.platform-app-download-button { padding:9px 15px; background:#dcc08c; color:#29231c; border-radius:7px; }
.floating-support { right:max(12px,calc((100vw - 480px)/2 + 12px)); bottom:calc(94px + env(safe-area-inset-bottom)); cursor:pointer; }
.bh-surface .bh-searching { opacity:.6; }
.bh-surface [data-bh-account-action] { cursor:pointer; }
.bh-surface .bh-announcement { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bh-surface[data-variant="mobile"] .bh-profile { gap:5px; }
.bh-surface[data-variant="mobile"] .bh-profile .gold-button { padding:7px 12px; font-size:11px; }
.bh-surface[data-variant="mobile"] .bh-grid-four { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.bh-surface[data-variant="mobile"] .bh-demo { top:6px; left:6px; font-size:8px; padding:2px 5px; }
.bh-surface[data-variant="mobile"] .game-meta .bh-game-note { font-size:10px; margin-top:5px; }
.bh-surface[data-variant="mobile"] .bh-preview { font-size:10px; gap:5px; }
.bh-surface[data-variant="mobile"] .bh-funds-entry { padding:18px; }
.bh-surface[data-variant="mobile"] .bh-user-label { font-size:11px; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:600px) { .bh-grid-four { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Homepage has at most three offers; collapse unused slots and fill the row. */
@media (min-width: 581px) {
  .bh-surface[data-variant="desktop"] #activity-grid {
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - 16px) / 3), 1fr));
    gap: 8px;
  }
}