/* ══════════════════════════════════════════════════════════════════════
   BUILD 146:大厅 + 登录页改版
   ── 大厅:一种卡型(图上字下)· 平板 / 电脑 / 横屏放宽 · 门图一律裁在卡里 · 首屏精简 · 分类按玩家分法
   ── 顶栏:充值键永远在(窄屏只留 +)· 大厅首页不放「大厅」键 · 语言键只在登录页(进了游戏在 菜单 → 设置)
   ── 登录:游客试玩做成按钮 · 注册按钮粘底 · 横屏 / 矮屏主图收小
   ══════════════════════════════════════════════════════════════════════ */

/* ── 宽屏:登录页和大厅放宽到 1100px(游戏页照旧 480px 的手机柱子)── */
@media(min-width:700px){
  #app:has(#lobby:not(.hide)),#app:has(#login:not(.hide)){max-width:1100px}
  #app:has(#lobby:not(.hide)) .drawer,#app:has(#login:not(.hide)) .drawer{max-width:480px;margin-inline:auto}
}

/* ── 顶栏 ── */
#app .top .wallet{overflow:visible}
#app .top .topupbtn{flex:0 0 auto}
@media(max-width:430px){
  /* 中文也一样:窄屏只留金色的「+」,不切半个字(以前 390px 中文切成「+充」,360px 整颗按钮被裁掉) */
  #app .top .topupbtn i{display:none}
  #app .top .topupbtn{padding:0 9px}
}
@media(max-width:360px){#app .top .wallet .wic{display:none}}
#app:has(#lobby.lobby-home:not(.hide)) #btnLobby{display:none}   /* 已经在大厅首页,别再放一颗「大厅」 */
/* BUILD 190(老板:「切换语言的地方不方便」):语言键登录以后也一直在顶栏(以前只在登录页,登录后要 菜单 → 设置 → 语言)。
   多了一颗键,手机上要挤出位置(余额 999,999.99 这么长也不能被「+」盖住):≤ 430px 图标键 34px、间距 4px;
   ≤ 380px 再收起顶栏那颗「大厅」—— 游戏页眉的「‹ 大厅」、列表页的返回键做的是同一件事;≤ 340px 再收起左上角的小 logo */
body:not(.login-mode) #app .top .bn{display:none}   /* 登录后左上角只留 logo 图(「21ACE」字标在登录页照旧) */
@media(max-width:460px){
  body:not(.login-mode) #app .top .topupbtn i{display:none}   /* 充值键:窄于 460 只留金色「+」(以前 430) */
  body:not(.login-mode) #app .top .topupbtn{padding:0 9px}
}
@media(max-width:430px){
  body:not(.login-mode) #app .top{gap:4px}
  body:not(.login-mode) #app .top .icb{width:34px;height:34px}
}
@media(max-width:380px){body:not(.login-mode) #btnLobby{display:none}}
@media(max-width:340px){body:not(.login-mode) #app .top .brand{display:none}}

/* ── 大厅首页:顺序 = 标题 → 最近玩过 → 大赢滚动条 → 分类条 → 门卡 → 规则入口 ── */
#app .lobby-home .lobkicker{display:none}
#app .lobby-home .lobhead h1{order:1;font-size:21px;margin:2px 0 10px;letter-spacing:.04em}
#app .lobby-home .recentrow{order:2;max-width:560px}
#app .lobby-home .lobticker{order:3}
#app .lobby-home .catnav{order:4}
#app .lobby-home .catbar.v2{order:5}
#app .lobby-home .lobrules{order:6}
#app .lobticker.empty{display:none}                               /* 没有大赢就不占那一行 */
#app .catnav .cn{min-height:38px;font-size:13px}
#app .lobwrap{padding-bottom:calc(32px + var(--safeb))}

/* 规则 / 公平性入口:放在门卡下面(以前被藏掉了,「Provably Fair」说了却没地方点) */
#app .lobrules{display:none;align-items:center;justify-content:center;gap:8px;width:100%;max-width:560px;margin:4px auto 0;padding:11px 14px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);font-family:var(--display);font-size:12px;letter-spacing:.06em}
#app .lobby-home .lobrules{display:inline-flex}
#app .lobrules svg{width:16px;height:16px;flex:0 0 auto;color:var(--acc)}
#app .lobrules .arw{opacity:.6}
#app .lobrules:active{transform:scale(.985)}

/* ── 门卡网格:手机 2 列;≥700px 3 列;≥1100px 4 列。招牌卡横跨两格 ── */
#app .catbar.v2{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:560px;margin:0 auto 12px;grid-auto-flow:dense}
#app .lobby-home .catbar.v2{display:grid}
@media(min-width:700px){
  #app .lobby-home .catbar.v2{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1040px;gap:12px}
  #app .lobby-home .catnav,#app .lobby-home .lobrules,#app .lobby-home .lobticker{max-width:640px}
}
@media(min-width:1000px){#app .lobby-home .catbar.v2{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* 一种卡型:图(4:3,裁在卡里)在上,名字 / 一句卖点 / 最低下注 + 在玩人数 在下 */
#app .catbar.v2 .cat{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;min-height:0;border-radius:16px;overflow:hidden;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid var(--stroke);
  box-shadow:0 10px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .12s,border-color .15s}
#app .catbar.v2 .cat::before,#app .catbar.v2 .cat::after{display:none}
#app .catbar.v2 .cat:active{transform:scale(.985)}
#app .catbar.v2 .cat .cart{position:relative;flex:0 0 auto;width:100%;height:auto;aspect-ratio:4/3;border-radius:0;overflow:hidden;filter:none;
  display:grid;place-items:center;
  background:radial-gradient(70% 70% at 50% 45%,rgba(62,242,224,.13),transparent 70%),radial-gradient(50% 50% at 80% 20%,rgba(168,85,247,.16),transparent 70%),linear-gradient(180deg,#121a35,#0a0e1e)}
#app .catbar.v2 .cat .cart > svg{width:80%;height:80%;overflow:hidden;filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
#app .catbar.v2 .cat .cart > img.ac3door{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
#app .catbar.v2 .cat .ctx{padding:9px 12px 12px;gap:3px;align-items:flex-start;text-align:left;width:auto;min-width:0}
#app .catbar.v2 .cat b{font-size:16px;letter-spacing:.03em;line-height:1.2;color:var(--ink);background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;filter:none}
#app .catbar.v2 .cat i{font-size:11.5px;line-height:1.4;color:var(--muted);min-height:0;-webkit-line-clamp:2}
#app .catbar.v2 .cat .meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:5px;text-decoration:none;font-style:normal;min-height:20px}
#app .catbar.v2 .cat .cmin{font-family:var(--num);font-size:10.5px;line-height:1;color:var(--money);letter-spacing:.04em;padding:4px 7px;border-radius:99px;background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.32)}
#app .catbar.v2 .cat .catlive{margin:0}
/* 徽章:统一放图的左上角;最近一笔大赢在右上角 */
#app .catbar.v2 .cat .cattag{position:absolute;top:8px;left:8px;right:auto;z-index:2;padding:4px 9px;border-radius:99px;font-family:var(--display);font-size:9.5px;letter-spacing:.12em;
  background:rgba(6,18,26,.72);color:var(--money2);border:1px solid rgba(255,209,102,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#app .catbar.v2 .cat .cattag.new{background:var(--accgrad);color:#06121a;border-color:rgba(255,255,255,.35);font-weight:700}
#app .catbar.v2 .cat .catwin{left:auto;right:8px;top:8px}
#app .catbar.v2 .cat.featured .catwin{left:auto;right:8px;top:8px}
/* 招牌卡(21 点):横跨两格,图左字右 */
#app .catbar.v2 .cat.featured{grid-column:1/-1;order:-1;flex-direction:row;align-items:stretch;padding:0;gap:0;
  background:linear-gradient(120deg,rgba(62,242,224,.10),rgba(168,85,247,.10) 70%,rgba(255,255,255,.03)),rgba(10,13,28,.6);border-color:rgba(62,242,224,.35)}
#app .catbar.v2 .cat.featured .cart{width:42%;flex:0 0 42%;height:auto;aspect-ratio:4/3;align-self:stretch}
#app .catbar.v2 .cat.featured .ctx{flex:1;justify-content:center;padding:12px 14px}
#app .catbar.v2 .cat.featured b{font-size:20px}
#app .catbar.v2 .cat.featured i{-webkit-line-clamp:3}
/* 宽屏(3 – 4 列):招牌卡和别的卡一样竖着排,只留徽章和描边 —— 横跨两格会空一大块 */
@media(min-width:700px){
  #app .catbar.v2 .cat.featured{grid-column:auto;flex-direction:column;align-items:stretch}
  #app .catbar.v2 .cat.featured .cart{width:100%;flex:0 0 auto;align-self:auto}
  #app .catbar.v2 .cat.featured .ctx{justify-content:flex-start;padding:9px 12px 12px}
  #app .catbar.v2 .cat.featured b{font-size:16px}
}
/* 分类筛掉之后没有卡 */
/* BUILD 160 修:上面 .catbar.v2 .cat{display:flex} 的权重比 theme.css 的 .cat.hidecat{display:none} 高,
   分类条(牌桌 / 街机 / 全服同场)一直没把不属于这一组的门藏起来 —— 点哪一组都还是 13 扇门全在 */
#app .catbar.v2 .cat.hidecat{display:none}
#app .catbar.v2 .catempty{display:none;grid-column:1/-1;padding:28px 12px;text-align:center;color:var(--dim);font-size:13px}
#app .catbar.v2.empty .catempty{display:block}

/* ── 登录页 ── */
#app .lf{font-size:11.5px;color:var(--muted)}
#app .lf .lfopt{color:var(--dim);letter-spacing:.04em;text-transform:none;font-weight:500}
#app .guestbtn{margin-top:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;
  border:1px solid var(--stroke2);background:rgba(255,255,255,.06);color:var(--ink);border-radius:16px}
#app .guestbtn b{font-family:var(--display);font-size:15px;letter-spacing:.04em}
#app .guestbtn i{font-style:normal;font-weight:500;font-size:11px;color:var(--muted);letter-spacing:.02em}
#app .guestbtn:active{transform:scale(.985)}
#app .regsticky{position:sticky;bottom:0;z-index:3;margin:12px -18px 0;padding:10px 18px 10px;
  background:linear-gradient(180deg,rgba(10,13,28,0),rgba(10,13,28,.94) 35%)}
#app .regsticky .btn{margin-top:0}
#app .regswitch{text-align:center;margin:2px 0 0;font-size:12.5px;color:var(--dim)}
#app .regswitch a{color:var(--acc);text-decoration:none;font-weight:700;margin-left:6px}
#app .avatars .avpick{max-width:46px;font-size:14px}
#app .loginfoot{margin-top:10px}
/* 横屏 / 矮屏(手机横过来只有 390px 高):主图收成一个小徽章,表单第一屏就看得到 */
@media(max-height:520px){
  #app .loginwrap{padding-top:8px;justify-content:flex-start}
  #app .loginhero{display:none}                    /* logo 顶栏已经有了 */
  #app .authform .lf{margin-top:2px}
  #app .authform .tin.big{padding:9px 14px;font-size:16px}
  #app .authtabs{margin-bottom:4px}
  #app #loginPane,#app #regPane{gap:6px}
  #app .authform .btn.big{min-height:46px;margin-top:8px}
  #app .guestbtn{min-height:46px;margin-top:6px}
  #app .loginform{padding:12px 16px 14px}
}

/* ── 抽屉:退出登录做成小按钮;没坐桌就不显示「本桌牌局」 ── */
#app .acct .aclink{text-decoration:none;padding:6px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted);font-size:12px}
#app:has(#tableview.hide) #tableHistSec,#app:has(#tableview.hide) #history{display:none}

/* 首屏再省一点:大厅首页顶上的留白 */
#app #lobby.lobby-home{padding-top:6px}
/* 手机两列时最后一张落单 → 横过来铺满一行(app.js 筛选后打 .wide) */
@media(max-width:699px){
  #app .catbar.v2 .cat.wide{grid-column:1/-1;flex-direction:row;align-items:stretch}
  #app .catbar.v2 .cat.wide .cart{width:42%;flex:0 0 42%;height:auto;aspect-ratio:4/3;align-self:stretch}
  #app .catbar.v2 .cat.wide .ctx{flex:1;justify-content:center;padding:12px 14px}
}
/* 手机横屏(宽但矮):四列小卡,标题和分类条压扁,第一屏就能看到一整排 */
@media(min-width:700px) and (max-height:500px){
  #app .lobby-home .catbar.v2{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  #app .lobby-home .lobhead h1{font-size:17px;margin:0 0 6px}
  #app .catnav .cn{min-height:32px;font-size:12px}
  #app .catbar.v2 .cat b{font-size:14px}
  #app .catbar.v2 .cat i{font-size:11px}
}
/* 高屏(平板 / 电脑):登录表单垂直居中,别顶在上面留一大片空 */
@media(min-height:760px) and (min-width:700px){#app .loginwrap{justify-content:center;padding-top:14px}}