/* ══════════ BUILD 170:官网首页(没登录时的 #login)══════════
   老板:「那个人讲我们的网站太小孩子了、不入流」—— 支付公司审核网站,以前打开只有一个登录框。
   现在:导航 · 第一屏(一句话说清是什么 + 登录卡片)· 13 款游戏的封面 · 充值档位 · 公平性三步 · 18+ · 底部公司资料和条款。
   配色跟全站主题走(theme.css:--gold 这一组现在是青色),封面和首页大图是老板让用 GPT 画的同一套(深色底 · 金色光 · 写实 3D)。 */

#app:has(#login:not(.hide)){max-width:none}                       /* 首页铺满整个宽度(大厅还是 1100px 居中) */
#app #login{background:#07070b;overflow-x:hidden;scroll-behavior:smooth}
#app #login .loginbg{position:absolute;left:0;right:0;top:0;bottom:auto;height:min(100%,1180px);
  background:linear-gradient(180deg,rgba(7,7,11,.25),rgba(7,7,11,.62) 40%,rgba(7,7,11,.9) 78%,#07070b),url(land-bg-m.webp?v=f12d9ad2) center top/cover no-repeat}
#app #login .loginbg .suit{display:none}

/* ── 导航:手机上一行横着滑,电脑上靠右 ── */
#app .lnav{position:relative;z-index:2;flex:0 0 auto;display:flex;gap:2px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;
  padding:8px 12px 0;-webkit-overflow-scrolling:touch}
#app .lnav::-webkit-scrollbar{display:none}
#app .lnav a{flex:0 0 auto;color:var(--muted);font-size:13px;text-decoration:none;padding:7px 11px;border-radius:999px;transition:color .2s,background .2s}
#app .lnav a:hover{color:var(--gold2);background:rgba(82,233,255,.08)}

/* ── 第一屏 ── */
#app .lhero{position:relative;z-index:1;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 16px 34px}
#app .lh-copy{max-width:560px;text-align:center}
#app .lh-eyebrow{margin:0 0 8px;font-size:12px;letter-spacing:.14em;color:var(--gold2)}
#app .lh-title{margin:0;font-weight:800;font-size:23px;line-height:1.2;color:var(--ink);text-wrap:balance}
#app .lh-title span,#app .lh-title em{display:block}
#app .lh-title em{font-style:normal;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent}
#app .lhero > .loginwrap{flex:0 0 auto;width:100%;max-width:420px;margin:0;padding:0;justify-content:flex-start}
#app .lhero .loginhero{display:none}                               /* logo 顶栏已经有了,第一屏换成那句话 */
#app .lh-more{max-width:560px;text-align:center}
#app .lh-lead{margin:2px 0 14px;color:var(--muted);font-size:14px;line-height:1.75}
#app .lh-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
#app .lh-badges li{font-size:12px;letter-spacing:.02em;color:var(--gold2);border:1px solid rgba(82,233,255,.38);background:rgba(82,233,255,.07);padding:6px 11px;border-radius:999px}
#app .lh-badges li::before{content:"✓";margin-right:6px;opacity:.85}

/* 注册:已满 18 岁 + 同意条款 */
#app .agreerow{display:flex;gap:10px;align-items:flex-start;margin:6px 0 2px;font-size:13px;line-height:1.55;color:var(--muted);cursor:pointer}
#app .agreerow input{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;accent-color:var(--gold)}
#app .agreerow a{color:var(--gold2);text-underline-offset:2px}
#app .agreerow.shake{animation:lagshake .42s}
@keyframes lagshake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
/* 游客试玩前的 18+ 确认 */
#app .guestagree{display:grid;gap:10px;padding:12px;border-radius:12px;border:1px solid rgba(82,233,255,.38);background:rgba(82,233,255,.07)}
#app .guestagree.hide{display:none}
#app .guestagree p{margin:0;font-size:13px;color:var(--ink)}
#app .guestagree .garow{display:flex;gap:8px}
#app .guestagree .btn{flex:1 1 auto;padding:11px 12px;font-size:14px}
#app .guestagree .btn:last-child{flex:0 0 auto}

/* ── 分区 ── */
#app .lsec{position:relative;z-index:1;flex:0 0 auto;width:100%;max-width:1180px;margin:0 auto;padding:40px 16px}
#app .lsec + .lsec{border-top:1px solid rgba(82,233,255,.12)}
#app .lk{margin:0 0 8px;font:700 11px/1 var(--display);letter-spacing:.3em;color:var(--gold)}
#app .lsec h2{margin:0 0 8px;font-size:24px;line-height:1.25;font-weight:800;color:var(--ink);text-wrap:balance}
#app .lsub{margin:0 0 22px;max-width:700px;color:var(--muted);font-size:14px;line-height:1.75}

/* 游戏:手机两列,21 点(招牌)占一整行;电脑四列,21 点占 2 × 2 */
#app .lgames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#app .lgame{display:flex;flex-direction:column;gap:3px;padding:0;text-align:left;border-radius:14px;overflow:hidden;
  background:#121016;border:1px solid rgba(255,255,255,.07);transition:transform .2s,border-color .2s,box-shadow .2s}
#app .lgame:hover{transform:translateY(-2px);border-color:rgba(82,233,255,.5);box-shadow:0 10px 26px rgba(0,0,0,.45)}
#app .lgame:first-child{grid-column:1/-1}
#app .lgimg{display:block;aspect-ratio:4/3;overflow:hidden;background:#0b0a0e}
#app .lgame:first-child .lgimg{aspect-ratio:16/9}
#app .lgimg img{display:block;width:100%;height:100%;object-fit:cover}
#app .lgame b{padding:9px 12px 0;font-size:15px;color:var(--ink)}
#app .lgame i{padding:0 12px 12px;font-style:normal;font-size:12px;line-height:1.5;color:var(--dim)}

/* 充值档位 */
#app .lpacks{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin:0 0 20px}
#app .lpack{display:flex;flex-direction:column;gap:5px;padding:16px;border-radius:14px;border:1px solid rgba(82,233,255,.32);
  background:linear-gradient(160deg,rgba(82,233,255,.13),rgba(18,16,22,.92) 58%)}
#app .lpack b{font:800 21px/1.1 var(--num);color:var(--gold2);font-variant-numeric:tabular-nums}
#app .lpack span{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
#app .lpack em{font-style:normal;font-size:12px;color:var(--win)}
#app .lpack.off{grid-column:1/-1;color:var(--muted);font-size:14px}
#app .lpcustom{grid-column:1/-1;margin:0;font-size:13px;color:var(--muted)}
#app .lnotes{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:780px}
#app .lnotes li{position:relative;padding-left:24px;font-size:14px;line-height:1.75;color:var(--muted)}
#app .lnotes li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;background:var(--gold);transform:rotate(45deg);opacity:.75}

/* 公平性三步(真的是先后顺序,所以编号) */
#app .lsteps{list-style:none;counter-reset:lstep;margin:0 0 24px;padding:0;display:grid;gap:12px}
#app .lsteps li{counter-increment:lstep;position:relative;padding:18px 18px 18px 64px;border-radius:14px;background:#121016;border:1px solid rgba(255,255,255,.07)}
#app .lsteps li::before{content:counter(lstep);position:absolute;left:18px;top:17px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font:800 15px/1 var(--num);color:#1a1207;background:var(--goldflat)}
#app .lsteps b{display:block;margin-bottom:5px;font-size:15px;color:var(--ink)}
#app .lsteps span{font-size:13px;line-height:1.75;color:var(--muted)}
#app .lbtn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;border:1px solid rgba(82,233,255,.55);color:var(--gold2);font-weight:700;text-decoration:none;transition:background .2s}
#app .lbtn::after{content:"→"}
#app .lbtn:hover{background:rgba(82,233,255,.1)}
#app .lmore{color:var(--gold2);font-size:14px;text-underline-offset:3px}

/* 底部:公司资料 + 条款 */
#app .lfoot{position:relative;z-index:1;flex:0 0 auto;margin-top:12px;background:#050507;border-top:1px solid rgba(82,233,255,.22)}
#app .lf-in{max-width:1180px;margin:0 auto;padding:30px 16px;display:grid;gap:22px}
#app .lf-brand{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;align-content:start;align-self:start}
#app .lf-brand img{grid-row:1/3;width:38px;height:38px;border-radius:10px;box-shadow:0 0 0 1px rgba(82,233,255,.5)}
#app .lf-brand b{font:900 18px/1 var(--display);letter-spacing:.06em;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent}
#app .lf-brand b em{font-style:normal}
#app .lf-brand p{margin:0;font-size:12px;line-height:1.6;color:var(--dim)}
#app .lf-co{margin:0;display:grid;gap:7px}
#app .lf-co div{display:flex;gap:10px;font-size:13px;line-height:1.5}
#app .lf-co dt{flex:0 0 76px;color:var(--dim)}
#app .lf-co dd{margin:0;color:var(--ink);word-break:break-word}
#app .lf-co a{color:var(--gold2)}
#app .lf-links{display:flex;flex-wrap:wrap;gap:8px 18px;align-content:flex-start}
#app .lf-links a,#app .lobfoot a{font-size:13px;color:var(--muted);text-decoration:none}
#app .lf-links a:hover,#app .lobfoot a:hover{color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
#app .lf-base{max-width:1180px;margin:0 auto;padding:14px 16px calc(18px + var(--safeb,0px));display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;
  font-size:12px;color:var(--dim);border-top:1px solid rgba(255,255,255,.05)}

/* 大厅最下面一行条款链接(只在大厅首页露出) */
#app .lobfoot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;padding:18px 12px 6px}
#app #lobby:not(.lobby-home) .lobfoot{display:none}

/* 页眉菜单里的小门图:现在都是图片 */
#app .ghmenu .gm-art img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px}

#app .lnav a:focus-visible,#app .lgame:focus-visible,#app .lbtn:focus-visible,#app .lf-links a:focus-visible,#app .lobfoot a:focus-visible,#app .lmore:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}

@media(min-width:640px){
  #app .lgames{grid-template-columns:repeat(3,minmax(0,1fr))}
  #app .lgame:first-child{grid-column:span 2}
  #app .lgame:first-child .lgimg{aspect-ratio:auto;flex:1 1 auto;min-height:0}
}
@media(min-width:960px){
  #app #login .loginbg{display:none}
  #app .lnav{justify-content:flex-end;padding:14px max(32px,calc((100vw - 1180px) / 2)) 0}
  #app .lhero{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"copy card" "more card";column-gap:64px;row-gap:20px;
    align-content:center;align-items:center;min-height:min(700px,calc(100vh - 100px));margin-top:-48px;padding:84px max(32px,calc((100vw - 1180px) / 2)) 60px;
    background:linear-gradient(90deg,#07070b 0%,rgba(7,7,11,.9) 34%,rgba(7,7,11,.5) 58%,rgba(7,7,11,.62) 100%),linear-gradient(0deg,#07070b 0%,rgba(7,7,11,0) 26%),
      url(land-hero.webp?v=a952d777) right center/cover no-repeat}
  #app .lh-copy{grid-area:copy;align-self:end;text-align:left;max-width:600px}
  #app .lhero > .loginwrap{grid-area:card;align-self:center}
  #app .lh-more{grid-area:more;align-self:start;text-align:left;max-width:560px}
  #app .lh-eyebrow{font-size:13px}
  #app .lh-title{font-size:46px;line-height:1.14}
  #app .lh-lead{font-size:16px}
  #app .lh-badges{justify-content:flex-start}
  #app .lsec{padding:72px 32px}
  #app .lsec h2{font-size:32px}
  #app .lsub{font-size:15px}
  #app .lgames{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  #app .lgame:first-child{grid-row:span 2}
  #app .lsteps{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  #app .lf-in{grid-template-columns:1.3fr 1fr 1fr;padding:44px 32px}
  #app .lf-base{padding-left:32px;padding-right:32px}
}
/* 手机横屏(宽但矮,只有 360–430px 高):照电脑版左右两栏 —— 登录卡片放右边,第一屏就看得到登录键;锚点导航收起(往下滑一样看得到) */
@media(orientation:landscape) and (max-height:520px) and (min-width:600px) and (max-width:959px){
  #app .lnav{display:none}
  #app .lhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);grid-template-areas:"copy card" "more card";
    column-gap:22px;row-gap:10px;align-items:start;padding:10px 18px 26px}
  #app .lh-copy{grid-area:copy;align-self:end;text-align:left}
  #app .lh-eyebrow{font-size:11px;margin-bottom:4px}
  #app .lh-title{font-size:21px}
  #app .lhero > .loginwrap{grid-area:card;max-width:none}
  #app .lh-more{grid-area:more;text-align:left}
  #app .lh-lead{font-size:13px;line-height:1.6;margin:0 0 10px}
  #app .lh-badges{justify-content:flex-start;gap:6px}
  #app .lh-badges li{font-size:11px;padding:5px 9px}
}
@media(orientation:landscape) and (max-height:400px) and (min-width:600px) and (max-width:959px){
  #app .lhero{padding-top:6px}
  #app .loginform{padding:9px 14px 12px}
  #app .authtabs{margin-bottom:2px}
  #app .atab{padding-top:7px;padding-bottom:7px}
  #app .authform .lf{margin:0}
  #app #loginPane,#app #regPane{gap:4px}
  #app .authform .tin.big{padding:7px 12px;font-size:15px}
  #app .loginhints{margin:0}
  #app .authform .btn.big{min-height:42px;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){
  #app #login{scroll-behavior:auto}
  #app .lgame,#app .lnav a,#app .lbtn{transition:none}
  #app .agreerow.shake{animation:none}
}