/*
 * 邀请落地页（运营 2026-11-01 23691 / 23694，设计稿 23698 design_handoff_invite_landing）的样式。
 * 一个文件 = 设计稿的 tokens.css + landing.css 原样（顺序不变，只引用 token），再加末尾「页面机制」一节。
 * 与设计稿的差异只有两处，都不改外观：
 *   - 删掉第一个亮点卖点的认证徽标占位样式（运营 23700：「公平发牌 · 牌谱可查」配线性盾牌图标，不放徽标）；
 *   - 设计稿 index.html 里的两处 style="…" 属性挪到末尾（页面不带内联样式 / 内联脚本 / 内联事件）。
 * 改设计请两边对照：设计稿两份 css 的内容在下面两段里逐字可找到。
 */

/* ---------- 设计稿 tokens.css ---------- */
/* 鸿运扑克 · 邀请落地页 tokens。字体文件自托管后在此追加 @font-face，family 名保持下方栈不变 */
:root{
--bg:#0A0908;--bg-2:#171310;--bg-3:#242321;
--card:#363430;--card-2:#3E3C37;
--text:#F2EFE8;--text-2:rgba(242,239,232,.68);--text-3:rgba(242,239,232,.5);
--gold:#C4AC79;--gold-light:#E8DCC0;--gold-deep:#A18B57;
--gold-grad:linear-gradient(180deg,#E8DCC0 0%,#C4AC79 52%,#A18B57 100%);
--on-gold:#0A0908;
--hairline:rgba(179,164,126,.26);--divider:rgba(242,239,232,.08);
--shadow-card:0 4px 16px rgba(0,0,0,.45);--shadow-hero:0 8px 28px rgba(0,0,0,.55);
--scrim:rgba(10,9,8,.92);
--font-serif:"Songti SC","Noto Serif SC","Noto Serif CJK SC","STSong",serif;
--font-sans:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--font-mono:"SF Mono","JetBrains Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
--fs-12:12px;--fs-13:13px;--fs-14:14px;--fs-15:15px;--fs-16:16px;--fs-17:17px;--fs-20:20px;--fs-22:22px;--fs-26:26px;--fs-code:30px;
--lh-tight:1.3;--lh-body:1.55;
--sp-2:2px;--sp-4:4px;--sp-6:6px;--sp-8:8px;--sp-10:10px;--sp-12:12px;--sp-14:14px;--sp-16:16px;--sp-20:20px;--sp-24:24px;--sp-32:32px;--sp-40:40px;--sp-48:48px;
--page-x:16px;--card-pad:22px;--page-max:520px;
--r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:999px;
--btn-h:56px;--btn-h-2:48px;--topbar-h:56px;
--icon:20px;--icon-sm:18px;--avatar:72px;--qr:148px;
--dur-copy:2000ms;--ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:374px){:root{--card-pad:18px;--fs-code:28px;--avatar:64px}}

/* ---------- 设计稿 landing.css（去掉认证徽标占位那一条） ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;background:radial-gradient(120% 520px at 50% -80px,var(--bg-3) 0%,var(--bg-2) 45%,var(--bg) 100%) no-repeat,var(--bg);color:var(--text);font:400 var(--fs-15)/var(--lh-body) var(--font-sans);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--gold);text-decoration:none}a:hover{color:var(--gold-light)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg.i{width:var(--icon);height:var(--icon);flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.serif{font-family:var(--font-serif)}
.page{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-x) calc(var(--sp-32) + env(safe-area-inset-bottom))}
/* 顶栏 */
.topbar{height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);max-width:var(--page-max);margin:0 auto;padding:0 var(--page-x)}
.brand{display:flex;align-items:center;gap:var(--sp-10);color:var(--text)}
.brand img{width:32px;height:32px;display:block}
.brand-name{display:flex;flex-direction:column;line-height:1.15}
.brand-name b{font:600 var(--fs-17)/1.15 var(--font-serif);letter-spacing:.06em;color:var(--gold-light)}
.brand-name small{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.svc{display:flex;align-items:center;gap:var(--sp-6);height:36px;padding:0 var(--sp-12);border:1px solid var(--hairline);border-radius:var(--r-pill);color:var(--text-2);font-size:var(--fs-14)}
.svc svg.i{width:var(--icon-sm);height:var(--icon-sm);color:var(--gold)}
.svc::before{content:"";position:absolute;inset:-6px}
.svc{position:relative}
/* 邀请人卡片 */
.hero{position:relative;margin-top:var(--sp-8);padding:var(--card-pad);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--card-2) 0%,var(--card) 100%);border:1px solid var(--hairline);box-shadow:var(--shadow-hero);text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-light),transparent);opacity:.55}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:var(--sp-10);font:500 var(--fs-13)/1 var(--font-serif);letter-spacing:.32em;color:var(--gold);margin-bottom:var(--sp-16);padding-left:.32em}
.eyebrow::before,.eyebrow::after{content:"";width:28px;height:1px;background:var(--hairline)}
.avatar{position:relative;width:var(--avatar);height:var(--avatar);margin:0 auto;border-radius:50%;padding:3px;background:var(--gold-grad)}
.avatar>*{width:100%;height:100%;border-radius:50%;border:2px solid var(--card-2)}
.avatar img{display:block;object-fit:cover}
.avatar-fb{display:grid;place-items:center;background:linear-gradient(160deg,var(--bg-3),var(--bg));font:600 var(--fs-26)/1 var(--font-serif);color:var(--gold-light)}
.invite-text{margin:var(--sp-12) 0 0;font:600 var(--fs-22)/var(--lh-tight) var(--font-serif);letter-spacing:.02em;color:var(--text)}
.invite-text .nm{color:var(--gold-light)}
.welcome-mark{width:56px;height:56px;margin:0 auto;display:block}
.welcome-sub{margin:var(--sp-6) 0 0;font-size:var(--fs-14);color:var(--text-2)}
.weak-note{display:inline-flex;align-items:center;gap:var(--sp-6);margin-top:var(--sp-10);font-size:var(--fs-14);color:var(--text-3)}
.weak-note svg.i{width:16px;height:16px}
/* 骨架屏 */
.skel{background:linear-gradient(90deg,var(--bg-3) 0%,var(--card-2) 50%,var(--bg-3) 100%);background-size:200% 100%;animation:skel 1.4s linear infinite;border-radius:var(--r-pill)}
.skel-avatar{width:var(--avatar);height:var(--avatar);margin:0 auto;border-radius:50%}
.skel-line{height:22px;width:64%;margin:var(--sp-16) auto 0}
.skel-line.s{height:14px;width:36%;margin-top:var(--sp-10)}
@keyframes skel{from{background-position:100% 0}to{background-position:-100% 0}}
/* 邀请码 */
.code-box{margin-top:var(--sp-20);padding:var(--sp-14) var(--sp-14) var(--sp-14) var(--sp-16);border-radius:var(--r-md);background:var(--bg-3);border:1px solid var(--hairline);text-align:left;transition:border-color .2s}
.code-box.is-copied{border-color:var(--gold)}
.code-label{font-size:var(--fs-13);color:var(--text-3);letter-spacing:.08em}
.code-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);margin-top:var(--sp-4)}
.code{font:600 var(--fs-code)/1.1 var(--font-mono);letter-spacing:.2em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;user-select:all;-webkit-user-select:all}
.copy-btn{flex:none;display:flex;align-items:center;justify-content:center;gap:var(--sp-6);height:var(--btn-h-2);min-width:96px;padding:0 var(--sp-16);border-radius:var(--r-pill);border:1px solid var(--gold);color:var(--gold-light);font-size:var(--fs-15);font-weight:500;transition:background .2s,color .2s}
.copy-btn svg.i{width:var(--icon-sm);height:var(--icon-sm)}
.copy-btn .ic-ok{display:none}
.copy-btn.is-copied{background:var(--gold-grad);color:var(--on-gold);border-color:transparent}
.copy-btn.is-copied .ic-copy{display:none}.copy-btn.is-copied .ic-ok{display:block}
.copy-btn:active{transform:translateY(1px)}
.code-hint{margin:var(--sp-10) 0 0;font-size:var(--fs-14);color:var(--text-2);text-align:center}
/* 下载 */
.dl{display:flex;flex-wrap:wrap;gap:var(--sp-12);margin-top:var(--sp-20)}
.dl-btn{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:var(--sp-8);height:var(--btn-h-2);padding:0 var(--sp-12);border-radius:var(--r-pill);border:1px solid var(--gold);color:var(--gold-light);font-size:var(--fs-15);font-weight:500;white-space:nowrap}
.dl-btn svg.i{width:var(--icon-sm);height:var(--icon-sm)}
.dl-btn:hover{color:var(--gold-light);background:rgba(196,172,121,.08)}
.dl-btn.is-primary{flex-basis:100%;height:var(--btn-h);border-color:transparent;background:var(--gold-grad);color:var(--on-gold);font-size:var(--fs-17);font-weight:600;box-shadow:0 6px 18px rgba(161,139,87,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.dl-btn.is-primary svg.i{width:var(--icon);height:var(--icon);stroke-width:1.8}
.dl-btn.is-primary:hover{background:var(--gold-grad);filter:brightness(1.05);color:var(--on-gold)}
.qr-panel{display:none;align-items:center;gap:var(--sp-20);margin-top:var(--sp-20);padding:var(--sp-16);border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--hairline)}
html[data-device="pc"] .qr-panel{display:flex}
.qr{flex:none;width:var(--qr);height:var(--qr);padding:10px;border-radius:var(--r-sm);background:#fff}
.qr img,.qr svg,.qr canvas{display:block;width:100%;height:100%}
.qr-text b{display:block;font:600 var(--fs-17)/1.3 var(--font-serif);color:var(--text)}
.qr-text p{margin:var(--sp-6) 0 0;font-size:var(--fs-14);color:var(--text-2)}
.qr-text .plats{display:flex;gap:var(--sp-12);margin-top:var(--sp-12);color:var(--gold)}
/* 平台介绍 */
.section{margin-top:var(--sp-40)}
.tagline{margin:0;text-align:center;font:600 var(--fs-20)/1.4 var(--font-serif);letter-spacing:.08em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-title{display:flex;align-items:center;gap:var(--sp-12);margin:0 0 var(--sp-14);font:600 var(--fs-17)/1.3 var(--font-serif);color:var(--text);letter-spacing:.04em}
.sec-title::after{content:"";flex:1;height:1px;background:var(--divider)}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8);margin-top:var(--sp-16)}
.feat{padding:var(--sp-16) var(--sp-8);border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--divider);text-align:center}
.feat-ic{width:44px;height:44px;margin:0 auto var(--sp-10);display:grid;place-items:center;border-radius:50%;border:1px solid var(--hairline);color:var(--gold)}
.feat-ic svg.i{width:22px;height:22px}
.feat b{display:block;font-size:var(--fs-15);font-weight:600;line-height:1.35;color:var(--text)}
.feat p{margin:var(--sp-4) 0 0;font-size:var(--fs-14);line-height:1.4;color:var(--text-2)}
/* 新人权益 */
.bn-list{list-style:none;margin:0;padding:var(--sp-4) var(--sp-16);border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--divider);box-shadow:var(--shadow-card)}
.bn{display:flex;align-items:flex-start;gap:var(--sp-14);padding:var(--sp-14) 0}
.bn+.bn{border-top:1px solid var(--divider)}
.bn-ic{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(196,172,121,.1);color:var(--gold)}
.bn-body{min-width:0;flex:1;padding-top:var(--sp-6)}
.bn-t{display:block;font-size:var(--fs-15);font-weight:600;line-height:1.4;color:var(--text)}
.bn-d{margin:var(--sp-2) 0 0;font-size:var(--fs-14);line-height:var(--lh-body);color:var(--text-2)}
.bn-d:empty{display:none}
/* 页脚 */
.foot{margin-top:var(--sp-40);padding-top:var(--sp-20);border-top:1px solid var(--divider);text-align:center;font-size:var(--fs-13);color:var(--text-3)}
.foot-brand{display:flex;align-items:center;justify-content:center;gap:var(--sp-8);color:var(--text-2)}
.foot-brand img{width:20px;height:20px}
.foot-age{display:flex;align-items:center;justify-content:center;gap:var(--sp-8);margin-top:var(--sp-8)}
.age{font:700 11px/1 var(--font-sans);padding:3px 5px;border:1px solid var(--text-3);border-radius:4px}
.foot-svc{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--sp-4);font-size:var(--fs-14)}
/* 微信 / QQ 覆盖层 */
.inapp{position:fixed;inset:0;z-index:50;background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;padding:150px 28px 40px;text-align:center}
.inapp-arrow{position:absolute;top:6px;right:16px;width:132px;height:136px;color:var(--gold)}
.inapp-arrow path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.inapp h2{margin:0;font:600 var(--fs-22)/1.45 var(--font-serif);color:var(--text)}
.dots{display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 9px;margin:0 4px;vertical-align:3px;border-radius:var(--r-pill);border:1px solid var(--gold);background:var(--bg-3)}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--gold-light)}
.inapp-steps{list-style:none;margin:var(--sp-24) 0 0;padding:0;width:100%;max-width:320px;display:grid;gap:var(--sp-10);text-align:left}
.inapp-steps li{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16);border-radius:var(--r-md);background:var(--bg-3);border:1px solid var(--hairline);font-size:var(--fs-15);color:var(--text)}
.inapp-steps .n{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--gold);font:600 var(--fs-13)/1 var(--font-mono);color:var(--gold)}
.inapp-steps svg.i{color:var(--gold);margin-left:auto}
.inapp-note{margin:var(--sp-16) 0 0;font-size:var(--fs-14);color:var(--text-2)}
.inapp-close{margin-top:var(--sp-24);height:var(--btn-h-2);min-width:200px;padding:0 var(--sp-24);border-radius:var(--r-pill);border:1px solid var(--gold);color:var(--gold-light);font-size:var(--fs-15);font-weight:500}
/* 电脑 */
@media (min-width:768px){
:root{--page-x:24px}
.topbar{max-width:1120px;height:72px}
.hero{margin-top:var(--sp-24)}
}
@media (prefers-reduced-motion:reduce){.skel{animation:none}.code-box,.copy-btn{transition:none}}

/* ---------- 页面机制（不是设计稿的样式，不改外观） ---------- */
/* 设计稿 <svg … style="position:absolute"> 图标库与第 1 步里 <span class="dots" style="margin-left:auto"> 的内联样式 */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.inapp-steps .dots{margin-left:auto}
/* 页面简介来自后台，可换行（\n）；一行时与设计稿完全相同。接口答复前先占住一行（不可见的设计稿默认文案），
   答复到了再换成后台的文案 —— 下面的卖点卡片不会在首屏里跳动 */
.tagline{white-space:pre-line}
.tagline[data-pending]{visibility:hidden}
/* 地址里异常长的邀请码不撑破卡片（正常 6 位时不起作用） */
.code{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* 地址还没从接口拿到的按钮与客服（加载中）：样子不变，只是还点不了 */
.dl-btn:not([href]),.svc:not([href]),.foot-svc:not([href]){cursor:default}