/* =============================================================
   MOMO 大厅（Lobby）样式
   -------------------------------------------------------------
   版式来自前端同事的静态演示（_ref/static-demo，浅色紫色），
   这里换成和 17 款游戏页一致的深色绿色。

   ⚠️ 没有引用 00_shared/theme.css：那份样式带 * { margin:0; padding:0 } 的全局重置，
      而这套版式依赖标题 / 段落 / 列表的默认外边距。所以颜色变量在下面照抄一份，
      **改品牌色时两处要一起改**（theme.css 的 :root 和这里的 :root）。
   ============================================================= */
:root {
  /* ---- 与 00_shared/theme.css 同值 ---- */
  --bg-page:     #0C1117;
  --bg-card:     #151B23;
  --bg-control:  #1C2430;
  --brand:       #22C55E;
  --brand-hover: #2DD96B;
  --brand-dim:   #1A9E4B;
  --text-1:      #E5E7EB;
  --text-2:      #9CA3AF;
  --text-3:      #6B7280;
  --border:      #273141;
  --divider:     #1F2937;
  --font-num:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ---- 大厅自用 ---- */
  --on-brand: #06210F;                      /* 绿底上的字 */
  --shadow:   0 9px 22px rgba(0, 0, 0, .28);
  --radius:   18px;

  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  color: var(--text-1);
  font-synthesis: none;
}

* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:100px }
body { margin:0; background:#0e1116; font-size:16px; line-height:1.6 }
button,input { font:inherit }
button,a { -webkit-tap-highlight-color:transparent }
button { cursor:pointer }
a { color:inherit; text-decoration:none }
button { color:inherit }
button:disabled { cursor:wait }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #49df80; outline-offset:4px }
button { border:0 }
svg { display:block }
[hidden] { display:none!important }
.container { width:min(1240px,calc(100% - 80px)); margin-inline:auto }
.site-header { height:90px; background:#13181eef; border-bottom:1px solid #1b222b; position:sticky; top:0; z-index:20; backdrop-filter:blur(16px) }
.header-inner { height:100%; display:flex; align-items:center; gap:36px }
.wordmark { font-size:41px; font-weight:900; line-height:1; letter-spacing:-3.2px; display:inline-flex; align-items:baseline }
.logo-orbit { color:var(--brand) }
.logo-dot { height:7px; width:7px; background:var(--brand); border-radius:50%; margin:0 0 3px 6px }
.site-header nav { margin-left:auto; display:flex; gap:35px; align-items:center }
.site-header nav a { color:#abb2bc; font-size:15px; position:relative; white-space:nowrap }
.site-header nav a span { font-size:13px; margin-left:5px; opacity:.8 }
.site-header nav a.active { color:var(--brand) }
.site-header nav a.active:after { content:""; width:18px; height:3px; background:var(--brand); position:absolute; bottom:-31px; left:0; border-radius:2px }
.hero { background:linear-gradient(118deg,#141920 0%,#12161c 54%,#141920 100%); overflow:hidden }
.hero-inner { min-height:650px; display:grid; grid-template-columns:.87fr 1.13fr; align-items:center; gap:20px; padding-block:57px 77px }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:2px; color:var(--brand); margin:0 0 20px; display:flex; align-items:center; gap:10px }
.short-line { height:2px; width:28px; background:var(--brand) }
h1,h2,h3,p { margin-top:0 }
.hero h1 { font-size:clamp(42px,4.35vw,65px); font-weight:780; line-height:1.23; letter-spacing:-2.7px; margin-bottom:24px }
.accent { color:var(--brand) }
.hero-description { font-size:16px; color:#a4abb6; line-height:1.95; margin-bottom:30px }
.hero-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.button { padding:13px 24px; min-height:49px; border-radius:100px; display:inline-flex; gap:10px; align-items:center; justify-content:center; font-size:14px; font-weight:600; transition:transform .18s,background .18s; white-space:nowrap }
.button:hover { transform:translateY(-2px) }
.primary { background:var(--brand); color:#0e1116; box-shadow:0 5px 13px #23c65f19 }
.primary:hover { background:var(--brand-hover) }
.quiet { background:#0e111685; border:1px solid #1f2630; color:#b8bec6 }
.play-icon { width:0; height:0; border-left:8px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; display:inline-block }
.hero-footnote { display:flex; align-items:center; gap:12px; margin-top:34px; color:#99a1ad; font-size:12px }
.footnote-divider { width:1px; height:13px; background:#232c37 }
.mini-squares { display:grid; grid-template-columns:repeat(2,5px); gap:3px }
.mini-squares i { width:5px; height:5px; background:#8d82bd; border-radius:1px }
.hero-art { position:relative; height:476px; isolation:isolate }
.orbit { position:absolute; border:1px solid #1e262f; border-radius:50%; z-index:-1; pointer-events:none }
.orbit-one { width:530px; height:530px; left:90px; top:-35px }
.orbit-two { width:660px; height:660px; left:25px; top:-100px; border-style:dashed; opacity:.8 }
.hero-game-window { position:absolute; left:50px; right:4px; top:72px; border-radius:17px; background:#181d23; box-shadow:0 35px 60px #242e3b38; transform:rotate(-5deg); padding:16px 20px 19px; z-index:2; color:#fff; border:1px solid #454e5b }
.mock-topbar { display:flex; align-items:center; gap:17px; border-bottom:1px solid #343940; padding-bottom:13px }
.mock-brand { font-size:20px; font-weight:900; letter-spacing:-1px }
.mock-brand span { font-size:9px; letter-spacing:.5px; font-weight:500; display:block; line-height:.8; color:#939ca9 }
.mock-pill { font-size:10px; letter-spacing:2px; color:#b0bcce; padding:3px 10px; border-radius:4px; background:#2a313b }
.mock-window-dots { margin-left:auto; font-size:18px; letter-spacing:3px; color:#88909b }
.mock-history { display:flex; gap:7px; margin-top:15px }
.mock-history span { font-size:10px; padding:3px 9px; background:#282f39; border-radius:100px; color:#bec8d7 }
.mock-history span:nth-child(2n) { color:#4fe084; background:#252f3c }
.mock-chart { height:238px; position:relative; margin-top:9px }
.mock-chart svg { width:100%; height:100%; position:absolute; inset:0 }
.chart-guide { position:absolute; height:1px; background:#2f363f; left:29px; right:15px }
.guide-one { top:23% }
.guide-two { top:58% }
.guide-three { top:89% }
.chart-axis { color:#68717d; font-size:9px; position:absolute; left:0 }
.axis-one { top:18% }
.axis-two { top:53% }
.axis-three { top:84% }
.mock-multiplier { position:absolute; left:37%; top:27%; font-size:66px; font-weight:700; line-height:1; letter-spacing:-3px }
.mock-multiplier>span { color:#45de7d; font-weight:400; font-size:45px; margin-left:4px }
.mock-multiplier small { font-size:8px; font-weight:400; letter-spacing:2px; display:block; text-align:center; margin-top:13px; color:#a0abba }
.mock-controls { display:flex; gap:11px; border-top:1px solid #30363e; padding-top:14px; align-items:stretch }
.mock-controls div { padding:8px 11px; background:#232830; border:1px solid #394049; border-radius:9px; flex:1 }
.mock-controls span { font-size:9px; color:#a5afbc; display:block }
.mock-controls b { font-size:15px }
.mock-controls button { flex:1.15; font-size:13px; font-weight:700; border-radius:9px; background:#9bd56b; color:#233617; transition:background .2s }
.mock-controls button:hover { background:#b2e788 }
.floating-dice { position:absolute; top:10px; left:10px; width:212px; height:156px; padding:16px 22px; transform:rotate(-12deg); background:linear-gradient(125deg,#9b60e4,#5b32b2); border:1px solid #c68bf0; border-radius:15px; color:#fff; box-shadow:0 10px 30px #5e339626 }
.mini-game-label { font-size:12px; letter-spacing:1.6px; font-weight:600 }
.floating-dice strong { display:block; font-size:42px; line-height:1.2; letter-spacing:-2px; color:#d5ffad }
.mini-track { height:5px; background:#4a237b; border-radius:10px; margin:8px 0 }
.mini-track i { display:block; height:100%; width:73%; background:#c1f792; border-radius:10px }
.mini-game-bottom { font-size:8px; letter-spacing:.8px; opacity:.8 }
.floating-mines { position:absolute; right:-28px; bottom:31px; width:143px; background:linear-gradient(150deg,#0869b2,#084178); padding:12px 14px 14px; border-radius:12px; transform:rotate(9deg); z-index:3; box-shadow:0 16px 30px #0727452b; color:#fff; border:1px solid #449de0 }
.floating-mines>div:first-child { display:flex; justify-content:space-between; font-size:9px; letter-spacing:.5px; margin-bottom:8px }
.mini-mines { display:grid; grid-template-columns:repeat(3,1fr); gap:5px }
.mini-mines i { aspect-ratio:1; background:#ffffff18; border:1px solid #ffffff20; border-radius:5px; font-style:normal; text-align:center }
.mini-mines .gem { background:#fff; color:#2785d0; font-size:21px; line-height:1.2 }
.featured-caption { position:absolute; left:65px; right:100px; bottom:-5px; z-index:5; background:#0e1116; display:flex; align-items:center; gap:14px; border-radius:12px; padding:15px 17px; box-shadow:0 9px 20px #00000025 }
.caption-icon { background:#fbe5ef; color:#be3d77; border-radius:10px; font-size:24px; font-weight:700; padding:5px 9px }
.featured-caption strong { font-size:17px; display:block }
.featured-caption div>span { display:block; color:#959daa; font-size:12px; margin-top:1px }
.circle-button { height:38px; width:38px; border-radius:50%; background:#141920; color:var(--brand); font-size:25px; line-height:1; margin-left:auto; flex-shrink:0 }
.section { padding-block:68px }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:29px; gap:24px }
.section-heading .eyebrow { margin-bottom:10px; font-size:11px }
h2 { font-size:34px; font-weight:730; letter-spacing:-1px; line-height:1.3; margin-bottom:0 }
.text-link { background:transparent; color:var(--brand); display:inline-flex; align-items:center; gap:12px; font-size:14px; font-weight:500 }
.text-link:hover { text-decoration:underline; text-underline-offset:4px }
.link-count { border:1px solid #1f2631; border-radius:6px; padding:0 6px; font-size:11px }
.game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:25px }
.game-card { border-radius:var(--radius); background:#0e1116; box-shadow:var(--shadow); overflow:hidden; border:1px solid #151a21; transition:transform .22s,box-shadow .22s }
.game-card:hover { transform:translateY(-5px); box-shadow:0 15px 30px #0000003d }
.game-cover { position:relative; aspect-ratio:1.52; background:linear-gradient(130deg,var(--card-color),var(--card-color-dark)); color:#fff; overflow:hidden }
.game-cover:before { content:""; position:absolute; inset:-45% -30% -40% 50%; border-radius:50%; background:#ffffff11; transform:rotate(-25deg) }
.game-cover:after { content:""; position:absolute; width:115%; height:80%; left:-15%; bottom:-58%; border-radius:50%; background:#0000000b }
.cover-open { position:absolute; inset:0; padding:22px 23px; text-align:left; background:transparent; color:#fff; width:100%; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; align-items:start }
.cover-monogram { position:absolute; top:15px; left:22px; font-size:68px; font-weight:750; line-height:1.1; letter-spacing:-3px }
.cover-name { font-size:23px; font-weight:650; line-height:1.15; letter-spacing:-.7px; position:relative }
.cover-series { font-size:8px; font-weight:600; letter-spacing:1.8px; opacity:.58; position:absolute; right:16px; bottom:15px; writing-mode:vertical-rl }
.cover-icon { position:absolute; right:21px; top:23px; width:47px; height:47px; opacity:.5; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.cover-badge { position:absolute; top:14px; right:15px; z-index:3; font-size:10px; line-height:1.4; padding:4px 8px; background:#ffffff22; backdrop-filter:blur(5px); border-radius:100px; letter-spacing:.3px }
.cover-open:focus-visible { outline-offset:-5px }
.game-card[data-game="crash"] .game-cover { background:radial-gradient(ellipse at 20% 100%,#451a43,transparent 75%),#211b2c }
.game-card[data-game="crash"] .cover-monogram { font-size:57px; top:31px; font-style:italic; letter-spacing:-3px }
.game-card[data-game="crash"] .cover-icon { right:8px; top:18px; width:130px; height:120px; opacity:.7; stroke:#ef619f }
.game-card[data-game="longshort"] .game-cover { background:#172938 }
.game-card[data-game="longshort"] .cover-icon { right:13px; top:27px; width:122px; height:92px; opacity:.7; stroke:#6ad5c2 }
.game-card[data-game="longshort"] .cover-monogram { color:#7de5cb }
.game-card[data-game="peak"] .cover-icon { width:73px; height:73px; top:24px; right:13px }
.game-card[data-game="chicken"] .cover-monogram { font-size:65px }
.card-actions { position:absolute; inset:0; background:#17112880; z-index:5; display:flex; align-items:center; justify-content:center; gap:8px; opacity:0; pointer-events:none; transition:opacity .18s; backdrop-filter:blur(3px) }
.game-card:hover .card-actions,.game-card:focus-within .card-actions { opacity:1 }
.card-actions button { background:#fff; color:#34303f; border-radius:50px; padding:9px 14px; font-size:13px; font-weight:600; pointer-events:auto }
.card-actions button:last-child { background:var(--brand); color:#fff }
.card-actions button:hover { filter:brightness(.93) }
.game-card-footer { padding:15px 17px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px }
.game-title-button { text-align:left; background:none; padding:0; min-width:0 }
.game-title-button strong { font-size:15px; font-weight:600; display:block; line-height:1.3 }
.game-title-button span { font-size:12px; color:#8e97a4; display:block; margin-top:4px }
.card-category { color:#9da5b0; font-size:11px; white-space:nowrap; padding:3px 7px; background:#12171d; border-radius:5px }
.collection-section { display:grid; grid-template-columns:1fr 1fr; gap:32px; padding-top:0; padding-bottom:75px }
.collection-intro { background:#14181f; border-radius:20px; padding:38px 40px; position:relative; overflow:hidden; min-height:366px }
.collection-intro .eyebrow { font-size:10px; letter-spacing:1.6px; position:relative; z-index:1 }
.collection-intro h2 { font-size:39px; position:relative; z-index:1 }
.collection-intro p:not(.eyebrow) { margin-top:15px; color:#9aa2ae; font-size:14px; position:relative; z-index:1; line-height:1.9 }
.collection-intro .button { font-size:13px; padding:10px 22px; min-height:44px; position:relative; z-index:1 }
.collection-number { font-size:245px; letter-spacing:-25px; font-weight:800; position:absolute; right:13px; bottom:-59px; line-height:1; color:#1a2129; pointer-events:none }
.category-list { display:flex; flex-direction:column; gap:13px }
.category-tile { display:flex; gap:21px; align-items:center; border:1px solid #181d25; border-radius:13px; padding:15px 21px; background:#0e1116; flex:1; transition:background .15s,transform .15s }
.category-tile:hover { background:#11151a; transform:translateX(4px) }
.category-symbol { background:#141920; color:#49df80; height:48px; width:48px; border-radius:11px; display:grid; place-items:center; font-weight:700; font-size:22px; letter-spacing:-1px }
.category-tile:nth-child(2) .category-symbol { background:#141920; color:#9da5b0 }
.category-tile:nth-child(3) .category-symbol { background:#14191f; color:#969eab }
.category-tile:nth-child(4) .category-symbol { background:#161b22; color:#a8afb9 }
.category-tile h3 { font-size:16px; margin:0; font-weight:600 }
.category-tile p { font-size:12px; color:#939ba8; margin:3px 0 0 }
.category-count { margin-left:auto; color:#7e8998; font-size:24px; font-weight:400; letter-spacing:-1px }
.fairness-section { background:#12171d; padding-block:55px }
.fairness-inner { display:grid; grid-template-columns:.8fr 1fr .9fr; gap:42px; align-items:center }
.fairness-art { height:267px; position:relative; display:grid; place-items:center }
.fair-ring { position:absolute; border:1px solid #1b222b; border-radius:50%; width:220px; height:220px }
.ring-inner { width:185px; height:185px }
.shield { width:110px; height:110px; background:#171c23; border-radius:50%; padding:28px }
.shield svg { stroke:var(--brand); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; width:100%; height:100% }
.fair-art-label { position:absolute; bottom:16px; color:#8b94a2; font-size:10px; letter-spacing:2px }
.fair-plus { position:absolute; font-size:24px; color:#808a99 }
.plus-one { top:26px; right:28px }
.plus-two { bottom:45px; left:12px; font-size:16px }
.fairness-copy .eyebrow { font-size:10px; margin-bottom:14px }
.fairness-copy h2 { font-size:34px; margin-bottom:18px }
.fairness-copy>p:not(.eyebrow) { font-size:14px; color:#9aa2ae; line-height:1.9; margin-bottom:17px }
.small-plus { border-radius:50%; background:#161c23; color:var(--brand); width:24px; height:24px; display:grid; place-items:center; font-size:18px; flex-shrink:0 }
.fairness-points { padding-left:28px; border-left:1px solid #1c222b; display:flex; flex-direction:column; gap:22px }
.fairness-points>div { padding-left:32px; position:relative }
.fairness-points>div>span { position:absolute; left:0; top:1px; font-size:11px; color:#8892a0 }
.fairness-points h3 { font-size:15px; font-weight:600; margin-bottom:4px }
.fairness-points p { font-size:12px; color:#929ba8; margin:0 }
.site-footer { background:#0e1116 }
.footer-main { display:flex; align-items:center; gap:28px; padding-block:35px }
.footer-main .wordmark { font-size:31px }
.footer-main p { font-size:12px; color:#8c95a3; margin:0 }
.footer-main>div { display:flex; align-items:center; gap:28px; margin-left:auto; font-size:13px; color:#a9b0ba }
.footer-main button { background:none; padding:0; font-size:13px }
.footer-bottom { border-top:1px solid #161b23; color:#8892a0; font-size:11px; display:flex; justify-content:space-between; padding-block:18px }
.games-page { background:linear-gradient(#13181e,#0e1116 520px); padding-bottom:10px; min-height:75vh }
.breadcrumb { display:flex; gap:12px; padding-top:29px; color:#8d96a3; font-size:13px }
.breadcrumb a { color:var(--brand) }
.games-heading { display:flex; align-items:center; justify-content:space-between; margin:29px 0 40px }
.games-heading .eyebrow { margin-bottom:12px; font-size:11px }
.games-heading h1 { font-size:44px; letter-spacing:-1.8px; line-height:1.3; margin:0 0 13px; font-weight:750 }
.games-heading p:not(.eyebrow) { font-size:14px; color:#969eab; margin-bottom:0 }
.collection-stamp { text-align:center; color:#7c8796; padding-right:11px }
.collection-stamp strong { display:block; font-size:70px; line-height:1; letter-spacing:-4px; font-weight:400 }
.collection-stamp span { font-size:9px; letter-spacing:1.5px }
.game-tools { display:flex; gap:24px; align-items:center; padding-bottom:23px; border-bottom:1px solid #1b222b }
.filters { display:flex; gap:7px; flex-wrap:wrap }
.filter { background:#0e111688; border:1px solid #1b222b; border-radius:100px; padding:9px 15px; font-size:13px; color:#9ea6b2; display:flex; gap:7px; align-items:center; white-space:nowrap }
.filter>span { font-size:11px; opacity:.6 }
.filter.active { background:var(--brand); color:#0e1116; border-color:var(--brand) }
.filter:hover:not(.active) { background:#171c23 }
.search-box { display:flex; gap:9px; align-items:center; position:relative; margin-left:auto; min-width:190px; width:248px; background:#0e1116ba; border:1px solid #1b212a; border-radius:100px; padding:9px 14px; color:#8f98a5 }
.search-box svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; flex-shrink:0 }
.search-box input { width:100%; min-width:0; background:transparent; border:0; outline:0; font-size:13px; color:#bec3cb; line-height:1.8 }
.search-box input::placeholder { color:#8a93a1 }
.search-box:focus-within { border-color:#49df80; box-shadow:0 0 0 2px #23c65f10 }
.search-box input::-webkit-search-cancel-button { display:none }
.search-box button { background:none; font-size:19px; padding:0 2px; line-height:1 }
.results-line { display:flex; justify-content:space-between; margin:20px 0 24px; font-size:12px; color:#8992a0 }
.results-line>span:first-child { color:#a1a8b3 }
.games-page .game-grid { row-gap:29px }
.games-bottom-note { display:flex; gap:12px; justify-content:center; align-items:center; text-align:center; padding:44px 0 47px }
.games-bottom-note p { color:#8d96a4; font-size:12px; margin:0 }
.empty-state { text-align:center; padding:65px 0 90px }
.empty-state>span { font-size:50px; color:#7e8898 }
.empty-state h2 { font-size:23px; margin:10px 0 }
.empty-state p { color:var(--text-2); font-size:14px }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
dialog { width:min(890px,calc(100% - 40px)); max-height:calc(100vh - 50px); border:0; border-radius:22px; padding:0; background:#0e1116; color:var(--text-1); box-shadow:0 30px 100px #000000ad; overflow:auto }
dialog::backdrop { background:#000000b8; backdrop-filter:blur(7px) }
body.dialog-open { overflow:hidden }
.dialog-close { position:absolute; right:16px; top:14px; height:34px; width:34px; background:#161b22; border-radius:50%; font-size:26px; line-height:1; z-index:10; color:#abb2bc }
.detail-layout { display:grid; grid-template-columns:300px 1fr; gap:33px; padding:42px 40px }
.detail-cover { margin-top:5px }
.detail-cover .game-card { pointer-events:none; box-shadow:none }
.detail-cover .game-cover { aspect-ratio:1.22 }
.detail-cover .game-title-button { cursor:default }
.detail-cover .cover-monogram { top:35px; font-size:85px }
.detail-copy .eyebrow { margin-bottom:8px; font-size:10px }
.detail-copy h2 { font-size:31px; margin:0 0 4px }
.detail-en { font-size:15px; color:#929ba8; display:block; margin-bottom:15px }
.detail-description { font-size:14px; color:#9da5b0; line-height:1.8; margin-bottom:17px }
.detail-specs { display:flex; gap:27px; padding-block:13px 17px; border-block:1px solid #171c24; margin-bottom:18px }
.detail-specs span { font-size:11px; color:#858f9d; display:block }
.detail-specs strong { font-size:16px; font-weight:600; display:block; color:#b8bec6; margin-top:3px }
.detail-copy h3 { font-size:14px; margin:0 0 6px }
.rule-list { padding-left:19px; margin:0 0 23px; color:#9da5b0; font-size:13px; line-height:1.85 }
.info-content { padding:43px 48px 45px }
.info-content .eyebrow { font-size:10px }
.info-content h2 { font-size:30px; margin-bottom:17px }
.info-content p { font-size:15px; color:#a0a8b3; line-height:1.9 }
.info-content ul { font-size:14px; line-height:2; color:#a0a8b3; padding-left:20px }
.info-callout { background:#13171d; border-left:3px solid var(--brand); padding:15px 18px; border-radius:0 8px 8px 0; margin-top:25px; color:#a4acb6; font-size:14px }
@media(min-width:1600px){
  .hero-inner { min-height:690px }
  .hero h1 { font-size:65px }
}
@media(max-width:1150px){
  .container { width:calc(100% - 56px) }
  .site-header nav { gap:22px }
  .hero-inner { grid-template-columns:.9fr 1.1fr; min-height:605px }
  .hero h1 { font-size:49px }
  .hero-art { transform:scale(.9); transform-origin:right center; width:112%; margin-left:-12% }
  .hero-game-window { left:35px }
  .mock-multiplier { font-size:58px }
  .game-grid { gap:18px }
  .cover-monogram { font-size:58px }
  .cover-name { font-size:20px }
  .cover-icon { width:40px; height:40px; right:15px }
  .game-title-button strong { font-size:14px }
  .card-category { font-size:10px; padding:2px 5px }
  .game-card-footer { padding:13px 13px }
  .game-tools { gap:15px }
  .filter { padding:8px 11px; font-size:12px }
  .filter>span { display:none }
  .search-box { width:215px; min-width:150px }
  .fairness-inner { gap:25px }
  .fairness-points { padding-left:17px }
}
@media(max-width:900px){
  .site-header { height:78px }
  .site-header nav a.active:after { bottom:-25px }
  .header-inner { gap:20px }
  .site-header nav a span { display:none }
  .site-header nav { gap:18px }
  .hero-inner { min-height:560px; grid-template-columns:.95fr 1.05fr; padding-block:45px 68px }
  .hero h1 { font-size:40px; letter-spacing:-2px }
  .hero-description { font-size:14px }
  .hero-actions { gap:8px }
  .hero-actions .button { font-size:12px; padding:11px 17px; min-height:44px }
  .hero-art { transform:scale(.78); width:130%; margin-left:-30%; height:460px }
  .mock-multiplier { font-size:50px }
  .floating-mines { right:-20px }
  .hero-footnote { font-size:10px; gap:8px; margin-top:26px }
  .section { padding-block:48px }
  .game-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .featured-grid { grid-template-columns:repeat(4,minmax(0,1fr)) }
  .featured-grid .cover-monogram { font-size:45px; top:13px; left:14px }
  .featured-grid .cover-open { padding:14px }
  .featured-grid .cover-name { font-size:16px }
  .featured-grid .cover-icon { width:32px; height:32px; top:16px; right:12px }
  .featured-grid .game-card[data-game="crash"] .cover-monogram { font-size:37px; top:26px }
  .featured-grid .game-card[data-game="crash"] .cover-icon,.featured-grid .game-card[data-game="longshort"] .cover-icon { width:85px; height:75px }
  .featured-grid .card-category { display:none }
  .featured-grid .game-card-footer { padding:11px }
  .cover-series { display:none }
  .cover-badge { font-size:8px; top:10px; right:10px; padding:3px 6px }
  .collection-section { gap:20px; padding-bottom:48px }
  .collection-intro { padding:31px 26px }
  .collection-intro h2 { font-size:32px }
  .collection-number { font-size:196px; bottom:-32px }
  .category-tile { gap:13px; padding:13px 16px }
  .category-tile h3 { font-size:14px }
  .category-tile p { font-size:11px }
  .fairness-inner { grid-template-columns:.7fr 1fr }
  .fairness-points { display:none }
  .fairness-copy { padding-left:20px }
  .games-heading h1 { font-size:37px }
  .game-tools { flex-wrap:wrap }
  .filters { flex:1 }
  .search-box { width:100%; margin:0; flex-basis:100% }
  .games-heading { margin-bottom:28px }
  .detail-layout { grid-template-columns:260px 1fr; gap:25px; padding:38px 28px }
  .detail-cover .cover-name { font-size:25px }
}
@media(max-width:650px){
  .container { width:calc(100% - 36px) }
  .site-header { height:70px }
  .wordmark { font-size:33px; letter-spacing:-2.6px }
  .logo-dot { width:5px; height:5px; margin-left:4px }
  .header-inner { gap:11px }
  .site-header nav { gap:15px }
  .site-header nav a { font-size:12px }
  .site-header nav a[data-nav="fairness"] { display:none }
  .site-header nav a.active:after { bottom:-23px }
  .hero-inner { display:flex; flex-direction:column; align-items:stretch; gap:5px; padding:39px 0 45px }
  .hero-copy { position:relative; z-index:5 }
  .hero h1 { font-size:43px; letter-spacing:-2px; margin-bottom:17px }
  .eyebrow { font-size:10px; letter-spacing:1.6px; margin-bottom:16px }
  .hero-description { font-size:13px; margin-bottom:21px; line-height:1.85 }
  .hero-actions .button { font-size:12px; padding:11px 18px }
  .hero-footnote { margin-top:22px }
  .hero-art { width:100%; margin:15px 0 0; height:320px; transform:none; transform-origin:center }
  .hero-game-window { left:19px; right:10px; top:47px; padding:12px 13px; transform:rotate(-4deg) }
  .mock-topbar { padding-bottom:9px }
  .mock-brand { font-size:16px }
  .mock-brand span { font-size:7px }
  .mock-history { gap:5px; margin-top:10px }
  .mock-history span { font-size:8px; padding:2px 6px }
  .mock-chart { height:159px }
  .mock-multiplier { font-size:48px; left:36%; top:25% }
  .mock-multiplier>span { font-size:32px }
  .mock-multiplier small { font-size:6px; letter-spacing:1.5px; margin-top:10px }
  .mock-controls { padding-top:10px; gap:7px }
  .mock-controls div { padding:5px 8px }
  .mock-controls span { font-size:7px }
  .mock-controls b { font-size:11px }
  .mock-controls button { font-size:10px }
  .floating-dice { width:143px; height:103px; padding:10px 14px; top:0; left:0; transform:rotate(-12deg) }
  .mini-game-label { font-size:8px }
  .floating-dice strong { font-size:29px; letter-spacing:-1px }
  .mini-track { height:4px; margin:5px 0 }
  .mini-game-bottom { font-size:5px }
  .floating-mines { width:85px; padding:8px; right:0; bottom:0; border-radius:9px }
  .floating-mines>div:first-child { font-size:6px; margin-bottom:5px }
  .mini-mines { gap:3px }
  .mini-mines i { border-radius:3px }
  .mini-mines .gem { font-size:14px }
  .featured-caption { left:26px; right:71px; bottom:-21px; padding:10px 11px; gap:9px; border-radius:9px }
  .caption-icon { font-size:19px; padding:4px 7px; border-radius:7px }
  .featured-caption strong { font-size:13px }
  .featured-caption div>span { font-size:9px }
  .circle-button { height:29px; width:29px; font-size:21px }
  .orbit-one { width:330px; height:330px; left:24px; top:-4px }
  .orbit-two { width:425px; height:425px; left:-24px; top:-50px }
  .section { padding-block:43px }
  .section-heading { align-items:center; gap:14px; margin-bottom:22px }
  .section-heading h2 { font-size:25px }
  .section-heading .eyebrow { font-size:8px; letter-spacing:1.3px }
  .section-heading>.text-link { font-size:11px; gap:6px; white-space:nowrap }
  .link-count { display:none }
  .game-grid,.featured-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px }
  .cover-open { padding:15px }
  .cover-monogram,.featured-grid .cover-monogram { font-size:49px; top:15px; left:15px }
  .cover-name,.featured-grid .cover-name { font-size:19px }
  .cover-icon,.featured-grid .cover-icon { width:33px; height:33px; right:12px; top:17px }
  .game-card[data-game="crash"] .cover-monogram,.featured-grid .game-card[data-game="crash"] .cover-monogram { font-size:39px; top:28px }
  .game-card[data-game="crash"] .cover-icon,.featured-grid .game-card[data-game="crash"] .cover-icon,.game-card[data-game="longshort"] .cover-icon,.featured-grid .game-card[data-game="longshort"] .cover-icon { width:85px; height:75px; right:3px; top:21px }
  .game-card-footer,.featured-grid .game-card-footer { padding:12px 11px }
  .game-title-button strong { font-size:13px }
  .game-title-button span { font-size:10px }
  .card-category { display:none }
  .cover-series { display:none }
  .card-actions { gap:6px }
  .card-actions button { padding:8px 11px; font-size:11px }
  .game-card { border-radius:13px }
  .collection-section { grid-template-columns:1fr; gap:19px; padding-bottom:43px }
  .collection-intro { padding:27px 26px; min-height:305px }
  .collection-intro .eyebrow { font-size:8px }
  .collection-intro h2 { font-size:34px }
  .collection-number { font-size:226px; right:17px; bottom:-26px }
  .category-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .category-tile { padding:16px 13px; display:block; position:relative; border-radius:11px }
  .category-symbol { width:35px; height:35px; font-size:18px; margin-bottom:10px; border-radius:8px }
  .category-tile h3 { font-size:13px }
  .category-tile p { font-size:10px }
  .category-count { position:absolute; right:12px; top:15px; font-size:19px }
  .fairness-section { padding-block:33px }
  .fairness-inner { grid-template-columns:115px 1fr; gap:16px }
  .fairness-art { height:155px }
  .fair-ring { width:113px; height:113px }
  .ring-inner { width:91px; height:91px }
  .shield { width:67px; height:67px; padding:18px }
  .fair-art-label { font-size:6px; letter-spacing:.7px; bottom:6px; white-space:nowrap }
  .fair-plus { display:none }
  .fairness-copy { padding-left:0 }
  .fairness-copy .eyebrow { font-size:7px; letter-spacing:1.1px; margin-bottom:8px }
  .fairness-copy h2 { font-size:24px; margin-bottom:12px }
  .fairness-copy>p:not(.eyebrow) { font-size:11px; line-height:1.8 }
  .fairness-copy .text-link { font-size:11px; gap:7px }
  .small-plus { width:20px; height:20px; font-size:14px }
  .footer-main { padding-block:25px; gap:16px; flex-wrap:wrap }
  .footer-main .wordmark { font-size:29px }
  .footer-main p { font-size:9px }
  .footer-main>div { gap:22px; margin-left:0; justify-content:space-between; width:100%; font-size:12px }
  .footer-main button { font-size:12px }
  .footer-bottom { font-size:9px; padding-block:14px }
  .breadcrumb { font-size:11px; padding-top:22px }
  .games-heading { margin:25px 0 28px }
  .games-heading h1 { font-size:29px; letter-spacing:-1.2px; margin-bottom:10px }
  .games-heading .eyebrow { font-size:8px; margin-bottom:9px }
  .games-heading p:not(.eyebrow) { font-size:11px; max-width:220px }
  .collection-stamp { padding-right:0 }
  .collection-stamp strong { font-size:46px; letter-spacing:-3px }
  .collection-stamp span { font-size:6px; letter-spacing:.5px }
  .game-tools { gap:15px; padding-bottom:16px }
  .filters { gap:6px }
  .filter { padding:7px 12px; font-size:11px }
  .filter>span { display:none }
  .search-box { padding:7px 12px }
  .search-box input { font-size:12px }
  .results-line { font-size:10px; margin:16px 0 18px }
  .games-page .game-grid { row-gap:19px }
  .games-bottom-note { padding:29px 3px; gap:9px }
  .games-bottom-note p { font-size:10px; text-align:left }
  .empty-state { padding:40px 0 55px }
  .empty-state h2 { font-size:20px }
  .empty-state p { font-size:12px }
  dialog { width:calc(100% - 24px); border-radius:16px; max-height:calc(100dvh - 24px) }
  .detail-layout { display:block; padding:38px 23px 27px }
  .detail-cover { width:210px; margin:0 auto 25px }
  .detail-cover .game-cover { aspect-ratio:1.52 }
  .detail-cover .game-card-footer { display:none }
  .detail-cover .cover-monogram { font-size:65px; top:20px }
  .detail-copy h2 { font-size:27px }
  .detail-description { font-size:13px }
  .detail-copy .button { font-size:13px; min-height:44px }
  .info-content { padding:42px 25px 30px }
  .info-content h2 { font-size:25px }
  .info-content p { font-size:13px }
  .info-content ul { font-size:12px }
  .info-callout { font-size:12px }
}
@media(prefers-reduced-motion:reduce){
  html { scroll-behavior:auto }
  *,*:before,*:after { animation:none!important; transition:none!important }
}

/* =============================================================
   深色主题的补充（上面是按规则换色的结果，这里是换色规则顾不到的地方）
   ============================================================= */
body { background: var(--bg-page); }
.primary { color: var(--on-brand); box-shadow: none; }
.quiet { background: var(--bg-control); border-color: var(--border); color: var(--text-1); }
.quiet:hover { border-color: var(--brand); }
.button { text-decoration: none; }

/* 浅色稿里「白卡片压在白底上」靠阴影分层；深色下改成卡片比底色亮一档 */
.game-card, .category-tile, .featured-caption, dialog { background: var(--bg-card); border-color: var(--border); }
.game-card:hover { border-color: var(--brand); box-shadow: 0 15px 30px rgba(0, 0, 0, .45); }
.category-tile:hover { background: var(--bg-control); border-color: var(--brand); }
.card-category { background: var(--bg-control); color: var(--text-2); }
.collection-intro { background: var(--bg-card); border: 1px solid var(--border); }
.collection-number { color: rgba(255, 255, 255, .045); }
.site-footer { background: var(--bg-page); border-top: 1px solid var(--divider); }
.fairness-section { background: #10161d; border-block: 1px solid var(--divider); }
.games-page { background: linear-gradient(#121820, var(--bg-page) 520px); }
.filter { background: var(--bg-card); border-color: var(--border); color: var(--text-2); }
.filter.active { color: var(--on-brand); }
.filter:hover:not(.active) { background: var(--bg-control); color: var(--text-1); }
.search-box { background: var(--bg-card); border-color: var(--border); color: var(--text-3); }
.search-box input { color: var(--text-1); }
.search-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(34, 197, 94, .15); }
.dialog-close { background: var(--bg-control); color: var(--text-2); }
.dialog-close:hover { color: var(--text-1); }
dialog::backdrop { background: rgba(4, 7, 11, .72); }
.info-callout { background: rgba(34, 197, 94, .08); color: var(--text-1); }
.detail-specs strong { color: var(--text-1); font-family: var(--font-num); }

/* 四个分类图标：浅色稿是粉彩底，这里用同色相的半透明底 */
.category-symbol { background: rgba(34, 197, 94, .14); color: #4ade80; }
.category-tile:nth-child(2) .category-symbol { background: rgba(56, 149, 255, .14); color: #6cb2ff; }
.category-tile:nth-child(3) .category-symbol { background: rgba(244, 114, 182, .14); color: #f58cc2; }
.category-tile:nth-child(4) .category-symbol { background: rgba(250, 204, 21, .13); color: #f5cf4b; }
.caption-icon { background: rgba(34, 197, 94, .14); color: #4ade80; }
.shield { background: rgba(34, 197, 94, .12); }

/* 数字用等宽字体，和游戏页一致 */
.mock-multiplier, .mock-history, .mock-controls b, .floating-dice strong, .collection-stamp strong, .category-count,
.chart-axis, .link-count { font-family: var(--font-num); }
.mock-multiplier { letter-spacing: -4px; }

/* ---- 卡片：整张封面是进入游戏的链接 ---- */
a.cover-open { text-decoration: none; }
a.game-title-button { display: block; }
.info-button {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-control); border: 1px solid var(--border); color: var(--text-2);
  font-size: 14px; font-weight: 700; line-height: 1; font-style: italic; font-family: Georgia, serif;
}
.info-button:hover { border-color: var(--brand); color: var(--brand); }
.card-meta { display: flex; align-items: center; gap: 8px; }
.card-actions a, .card-actions button { background: #fff; color: #1b222c; border-radius: 50px; padding: 9px 14px; font-size: 13px; font-weight: 600; pointer-events: auto; }
.card-actions a:last-child { background: var(--brand); color: var(--on-brand); }
.card-actions a:hover, .card-actions button:hover { filter: brightness(.93); }
.card-actions { background: rgba(6, 10, 15, .6); }
/* ⚠️ 触屏没有悬停：遮罩虽然透明，里面的按钮仍然能点，手指点封面中间会点到看不见的按钮 */
@media (hover: none) { .card-actions { display: none; } }

/* ---- 顶栏右侧：验证工具入口 ---- */
.header-tool {
  border: 1px solid var(--border); border-radius: 100px; padding: 9px 18px; font-size: 14px;
  display: flex; gap: 8px; align-items: center; color: var(--text-1); white-space: nowrap;
}
.header-tool:hover { border-color: var(--brand); color: var(--brand); }
.header-tool svg { width: 16px; height: 16px; stroke: var(--brand); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 游戏介绍弹窗 ---- */
.detail-note { font-size: 11px; color: var(--text-3); margin: 13px 0 0; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) { .header-tool { padding: 7px 12px; font-size: 13px; } }
@media (max-width: 650px) {
  .header-tool { font-size: 11px; padding: 6px 10px; gap: 5px; }
  .header-tool svg { width: 13px; height: 13px; }
  .info-button { width: 26px; height: 26px; font-size: 12px; }
  .mock-multiplier { letter-spacing: -3px; }
}

/* 主视觉示意图里的「进入游戏」是链接（原稿是按钮） */
.mock-controls a {
  flex: 1.15; display: grid; place-items: center; font-size: 13px; font-weight: 700; border-radius: 9px;
  background: var(--brand); color: var(--on-brand); transition: background .2s;
}
.mock-controls a:hover { background: var(--brand-hover); }
@media (max-width: 650px) { .mock-controls a { font-size: 10px; } }