/* 21 ACE — 移动优先。桌面样式放在 min-width 媒体查询里。 */
:root{
  /* 配色取自 21Ace logo:深海军蓝底 + 电光蓝 + 银。
     变量仍叫 --gold/--goldline(历史命名),现在装的是电光蓝。 */
  --bg:#030814; --panel:#071226; --panel2:#0b1a36; --line:rgba(80,150,255,.12);
  --line2:rgba(255,255,255,.07);
  --felt:#0d3766; --felt2:#155096; --felt3:#041b3a;
  --rail:#151d2e; --rail2:#41506b;
  --ink:#eef4fd; --muted:#8ca6c9; --dim:#5c7495;
  --gold:#2f8fff; --gold2:#a9d4ff; --goldline:rgba(90,160,255,.38);
  --win:#4ade80; --lose:#f87171; --push:#fbbf24; --blue:#60a5fa;
  --serif:Georgia,'Times New Roman','Songti SC',serif;
  --top:56px;
  --safeb:env(safe-area-inset-bottom,0px);
  --safet:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}

/* 全平台统一手机布局。宽屏上把整个 app 居中成一个手机宽度的框 ——
   这样电脑上看到的就等于手机上的样子,也不必维护第二套布局。
   抽屉/遮罩/提示都改成相对 #app 绝对定位,才不会跑到框外面去。 */
#app{position:relative;width:100%;max-width:480px;height:100%;margin:0 auto;
  overflow:hidden;background:var(--bg);display:flex;flex-direction:column}
@media(min-width:520px){
  html,body{background:#01030a}
  #app{border-left:1px solid rgba(255,255,255,.07);border-right:1px solid rgba(255,255,255,.07);
    box-shadow:0 0 60px rgba(0,0,0,.8)}
}
body{
  background:var(--bg);color:var(--ink);
  font:14px/1.45 ui-sans-serif,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
button{font-family:inherit;cursor:pointer;border:0;color:inherit;background:none;padding:0}
button:disabled{opacity:.3;cursor:not-allowed}
input{font-family:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#223252;border-radius:6px}
.hide{display:none !important}
.view{flex:1;min-height:0;overflow:hidden}

/* ════════════ 顶栏 ════════════ */
.top{
  flex:0 0 auto;height:calc(var(--top) + var(--safet));padding:var(--safet) 10px 0;
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#0a1730,#050c1d);
  position:relative;z-index:40;
}
.top::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--goldline) 20%,var(--goldline) 80%,transparent)}
.brand{padding:0 2px;display:flex;align-items:center;gap:7px}
.brand .bicon{width:30px;height:30px;border-radius:8px;display:block;
  box-shadow:0 0 10px rgba(47,143,255,.35)}
.bn{font:800 19px/1 var(--serif);letter-spacing:.04em;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bn em{font-style:italic;-webkit-text-fill-color:var(--ink);opacity:.9;margin-left:3px}
.top .sp{flex:1}
.wallet{display:flex;align-items:center;gap:7px;background:rgba(0,0,0,.4);
  border:1px solid var(--line);border-radius:20px;padding:5px 13px 5px 6px}
.wic{width:21px;height:21px;display:block;flex:0 0 auto}
.wic svg{width:100%;height:100%;display:block}
.wv{font-size:15px;font-weight:750;color:var(--gold2);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
.topupbtn{width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(180deg,#8cc6ff,var(--gold));color:#04122b;
  font-weight:900;font-size:16px;line-height:1;display:grid;place-items:center;
  box-shadow:0 0 8px rgba(47,143,255,.5)}
.topupbtn:active{transform:scale(.9)}
.login-mode .topupbtn{display:none}

/* 充值弹窗 */
.modalwrap{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(2,6,14,.72)}
.modalwrap.on{display:flex}
.topupcard{width:100%;max-width:360px;max-height:90%;overflow-y:auto;
  background:linear-gradient(165deg,rgba(80,150,255,.06),rgba(0,0,0,0) 45%),var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.topuphead{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.topuphead b{font:800 17px var(--serif);color:var(--gold2)}
.tuclose{width:30px;height:30px;border-radius:8px;color:var(--muted);font-size:15px}
.tuclose:active{background:rgba(255,255,255,.06)}
.tusub{color:var(--muted);font-size:11.5px;line-height:1.55;margin:0 0 14px}
.tupkgs{display:flex;flex-direction:column;gap:9px}
.tupkg{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);text-align:left;width:100%}
.tupkg:active{transform:scale(.99)}
.tupkg.sel{border-color:var(--gold);background:rgba(80,150,255,.1)}
.tupkg .chips{font-size:16px;font-weight:800;color:var(--ink)}
.tupkg .chips small{display:block;font-size:10px;color:var(--win);font-weight:700;margin-top:1px}
.tupkg .price{font-size:15px;font-weight:800;color:var(--gold2);white-space:nowrap}
.tucustom{margin-top:11px;padding:11px 12px;border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.02);transition:border-color .15s,background .15s}
.tucustom.active{border-color:var(--gold);border-style:solid;background:rgba(80,150,255,.08)}
.tuclabel{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:8px}
.tucrow{display:flex;align-items:center;gap:8px}
.tucur{font-size:16px;font-weight:800;color:var(--gold2)}
.tucinput{flex:1 1 auto;min-width:0;width:100%;height:44px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg2,#0a1526);color:var(--ink);font-size:17px;font-weight:800;padding:0 12px;text-align:left}
.tucinput:focus{outline:none;border-color:var(--gold)}
.tucget{font-size:11.5px;font-weight:800;color:var(--win);white-space:nowrap;flex:0 0 auto;min-width:56px;text-align:right}
.tuchint{font-size:10px;color:var(--dim);margin-top:7px;line-height:1.45}
.tuage{display:flex;gap:8px;align-items:flex-start;margin:14px 0 4px;font-size:11.5px;color:var(--muted);line-height:1.5}
.tuage input{margin-top:2px;flex:0 0 auto}
.tumode{font-size:10.5px;color:var(--dim);margin:8px 0 0;text-align:center}
.tubuy{width:100%;margin-top:12px;min-height:48px;border-radius:12px;font-size:15.5px;font-weight:800;
  background:linear-gradient(180deg,#8cc6ff,var(--gold) 70%,#1a5fd0);color:#04122b}
.tubuy:disabled{opacity:.4}
.tustate{margin-top:12px;font-size:12.5px;text-align:center;min-height:18px}
.tustate.ok{color:var(--win)} .tustate.err{color:var(--lose)}
.icb{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);flex:0 0 auto}
.icb svg{width:19px;height:19px}
.icb:active{background:rgba(255,255,255,.06)}

/* ════════════ 新手教学(BUILD 35)════════════ */
/* 进门图卡:全屏遮罩 + 居中卡片 */
.tutwrap{position:absolute;inset:0;z-index:88;display:none;align-items:center;
  justify-content:center;padding:22px;background:rgba(2,6,14,.82)}
.tutwrap.on{display:flex}
.tutcard{width:100%;max-width:340px;background:linear-gradient(165deg,rgba(80,150,255,.08),rgba(0,0,0,0) 45%),var(--panel);
  border:1px solid var(--goldline);border-radius:18px;padding:24px 22px 18px;
  box-shadow:0 24px 70px rgba(0,0,0,.65);animation:viewfade .25s ease}
.tutslide{min-height:168px;text-align:center}
.tutslide .tic{font-size:44px;line-height:1;margin-bottom:12px}
.tutslide h3{font:800 19px/1.3 var(--serif);color:var(--gold2);margin:0 0 9px}
.tutslide p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}
.tutslide p b{color:var(--ink)}
.tutdots{display:flex;justify-content:center;gap:6px;margin:14px 0 12px}
.tutdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.tutdots i.on{background:var(--gold);box-shadow:0 0 6px rgba(255,201,74,.6)}
.tutbtns{display:flex;gap:9px}
.tutbtns .ghost{flex:0 0 auto}
.tutbtns .primary{flex:1}
/* 实战引导:聚光灯镂空 + 气泡;整层不挡点击,玩家照常操作 */
#coach{position:fixed;inset:0;z-index:66;pointer-events:none}
.coachhole{position:absolute;border-radius:14px;
  box-shadow:0 0 0 9999px rgba(2,6,14,.66),0 0 0 3px var(--gold),0 0 22px rgba(255,201,74,.5);
  transition:all .28s cubic-bezier(.3,.8,.3,1)}
.coachbubble{position:absolute;max-width:270px;background:var(--panel);
  border:1px solid var(--goldline);border-radius:12px;padding:11px 13px;
  font-size:12.5px;line-height:1.65;color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.55);transition:all .28s cubic-bezier(.3,.8,.3,1)}
.coachbubble b{color:var(--gold2)}
.coachbubble .cstep{display:block;font-size:10px;letter-spacing:.1em;color:var(--dim);
  text-transform:uppercase;margin-bottom:3px}
.coachskip{position:absolute;top:calc(var(--safet) + 58px);right:10px;pointer-events:auto;
  font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:14px;
  padding:5px 11px;background:rgba(2,6,14,.8)}
@media(prefers-reduced-motion:reduce){.coachhole,.coachbubble{transition:none}}

/* 9倍盘:选中但还没押钱的号码 —— 金圈提示「点筹码就押这号」 */
.rounum.pick{border-color:var(--gold);box-shadow:0 0 8px rgba(255,201,74,.4)}

/* ════════════ 质感二期(BUILD 39)════════════ */
/* 发牌:新牌从荷官位置沿弧线飞过来(--fx/--fy 由 JS 按实际位置算) */
.cw.flyin{animation:flyin .42s cubic-bezier(.22,.9,.32,1) both !important}
@keyframes flyin{
  0%{opacity:0;transform:translate(var(--fx,0),var(--fy,-46px)) rotate(-14deg) scale(.7)}
  55%{opacity:1}
  80%{transform:translate(calc(var(--fx,0) * -0.04),calc(var(--fy,0) * -0.04)) rotate(3deg) scale(1.03)}
  100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
}
/* 爆牌:整手牌抖一下再压暗 */
.hbox.busthand .cardrow{animation:bustshake .4s ease}
.hbox.busthand .cardrow svg{filter:drop-shadow(0 3px 8px rgba(0,0,0,.5)) saturate(.45) brightness(.75)}
@keyframes bustshake{0%,100%{transform:none}20%{transform:translateX(-4px) rotate(-1.5deg)}
  40%{transform:translateX(4px) rotate(1.5deg)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
/* 待机呼吸:桌面灯光极轻微地起伏,画面就是「活」的 */
.tablefelt::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 55% 40% at 50% 10%,rgba(140,190,255,.09),transparent 70%);
  opacity:0}
body[data-phase="idle"] .tablefelt::after{opacity:1;animation:feltbreath 4.5s ease-in-out infinite}
@keyframes feltbreath{50%{opacity:.35}}
/* 轮到谁:那一座暖色聚光 */
.pod.act{filter:none}
.pod.act::after{content:'';position:absolute;inset:-10px;border-radius:14px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 70% 62% at 50% 45%,rgba(255,201,74,.22),transparent 72%);
  animation:actglow 1.6s ease-in-out infinite}
@keyframes actglow{50%{opacity:.55}}
/* 中央压纹水印 */
.feltmark{display:block;pointer-events:none;z-index:1;opacity:.75}
.feltmark span{color:rgba(80,150,255,.10);text-shadow:0 1px 0 rgba(0,0,0,.35),0 -1px 0 rgba(160,200,255,.06)}
.feltmark i{color:rgba(120,170,235,.12)}
/* 注区筹码堆:金额越大叠得越高 */
.bspot{position:relative}
/* 9倍盘 · 我的开号走势 */
.rouhist{display:flex;align-items:center;gap:4px;font-size:9.5px;color:var(--dim);
  padding:4px 2px 0;flex-wrap:wrap}
.rouhist b{font-weight:800;font-size:10px;color:var(--gold2);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-variant-numeric:tabular-nums}
.rouhist b.swp{color:#fca5a5;border-color:rgba(248,113,113,.4)}
/* 余额不足:提示条变红 */
.hintbar.lowbal{color:#fca5a5;font-weight:700}
@media(prefers-reduced-motion:reduce){
  .cw.flyin,.hbox.busthand .cardrow,body[data-phase="idle"] .tablefelt::after,.pod.act::after{animation:none}
}

/* ════════════ 手感动画(BUILD 34)════════════ */
/* 筹码从筹码档飞到注区(克隆一颗筹码按钮,飞完就删) */
.chipfly{position:fixed !important;z-index:85;pointer-events:none;opacity:1;
  min-height:0 !important;box-shadow:0 6px 16px rgba(0,0,0,.5);
  transition:transform .24s cubic-bezier(.25,.7,.35,1),opacity .24s ease !important}
/* 大奖金光一闪(天生21点 / KB 高倍 / 大赢) */
.goldflash{position:fixed;inset:0;z-index:84;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(255,201,74,.4),rgba(255,201,74,.08) 55%,transparent 75%);
  animation:goldf .9s ease-out forwards}
@keyframes goldf{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
/* 赢的座位净额:弹出上浮 */
.netline.pop{animation:netpop .8s cubic-bezier(.2,.9,.3,1.2)}
@keyframes netpop{0%{transform:translateY(8px) scale(.6);opacity:0}
  45%{transform:translateY(-2px) scale(1.18)}100%{transform:none;opacity:1}}
/* 视图切换淡入,消掉画面硬切 */
.view:not(.hide){animation:viewfade .22s ease}
@keyframes viewfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* 新手第一次坐下:提示条脉动几秒 */
.hintbar.first{animation:hintpulse 1.4s ease-in-out 3;color:var(--gold2)}
@keyframes hintpulse{50%{transform:scale(1.05);text-shadow:0 0 12px rgba(255,201,74,.6)}}
@media(prefers-reduced-motion:reduce){
  .chipfly,.goldflash{display:none}
  .netline.pop,.view:not(.hide),.hintbar.first{animation:none}
}

/* 公告 / 维护横幅 —— 顶栏正下方,不占牌桌空间的一条细带 */
.noticebar{flex:0 0 auto;font-size:11.5px;line-height:1.5;padding:6px 12px;
  display:flex;flex-direction:column;gap:2px;text-align:center;
  background:rgba(255,201,74,.1);border-bottom:1px solid rgba(255,201,74,.3);
  color:var(--gold2);position:relative;z-index:39}
.noticebar .ntmaint{color:#fca5a5;font-weight:700}
.login-mode .noticebar{display:none}

/* ════════════ 登录 ════════════ */
.login-mode .wallet,.login-mode #btnLobby,.login-mode #btnMenu,.login-mode #btnLogoutTop{display:none}
/* 顶栏退出键:两次确认,第一次点击后变红等第二次 */
#btnLogoutTop.arm{border-color:rgba(248,113,113,.55);color:#fca5a5;
  background:rgba(248,113,113,.1);animation:armpulse 1.2s ease-in-out infinite}
@keyframes armpulse{50%{box-shadow:0 0 10px rgba(248,113,113,.45)}}
.icb{position:relative}
.icb .dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;
  background:var(--win);display:none;box-shadow:0 0 6px rgba(74,222,128,.8)}
.icb .dot.on{display:block;animation:dotpulse 1.6s ease-in-out infinite}
@keyframes dotpulse{50%{transform:scale(1.35);opacity:.7}}
#login{position:relative;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:
    radial-gradient(ellipse 110% 55% at 50% -12%,rgba(31,110,210,.34),transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 118%,rgba(47,143,255,.10),transparent 58%),
    linear-gradient(180deg,#040a1a 0%,var(--bg) 40%,#02060f 100%)}
/* 背景:极淡的花色水印,慢慢漂 —— 只是氛围,不抢戏 */
.loginbg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.loginbg .suit{position:absolute;font:700 150px/1 var(--serif);color:rgba(120,180,255,.045);
  filter:blur(.5px);animation:suitdrift 18s ease-in-out infinite alternate}
.loginbg .s1{left:-28px;top:9%;transform:rotate(-14deg)}
.loginbg .s2{right:-34px;top:26%;font-size:120px;animation-delay:-6s}
.loginbg .s3{left:8%;bottom:8%;font-size:110px;animation-delay:-11s}
.loginbg .s4{right:6%;bottom:-20px;font-size:170px;animation-delay:-3s}
@keyframes suitdrift{to{transform:translateY(-22px) rotate(6deg)}}
.loginwrap{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:30px 24px calc(28px + var(--safeb));max-width:400px;margin:0 auto;width:100%}
.loginhero{text-align:center;margin-bottom:24px;animation:heroin .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroin{from{opacity:0;transform:translateY(14px)}}
/* logo 外圈:一圈缓慢流转的光,像筹码边缘 */
.logoring{position:relative;width:164px;height:164px;margin:0 auto 16px;border-radius:38px;padding:3px;
  background:conic-gradient(from 0deg,rgba(47,143,255,0) 0%,rgba(140,198,255,.9) 18%,rgba(47,143,255,0) 36%,
    rgba(47,143,255,0) 55%,rgba(169,212,255,.55) 72%,rgba(47,143,255,0) 90%);
  box-shadow:0 22px 60px rgba(0,0,0,.7),0 0 70px rgba(47,143,255,.22)}
.logoring::before{content:"";position:absolute;inset:-14px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,143,255,.16),transparent 62%);z-index:-1}
@property --ra{syntax:'<angle>';inherits:false;initial-value:90deg}
.ringlight{position:absolute;inset:0;border-radius:38px;z-index:0;
  background:conic-gradient(from var(--ra,90deg),transparent 0 70%,rgba(210,235,255,.95) 84%,transparent 100%);
  animation:ringspin 7s linear infinite}
@keyframes ringspin{to{--ra:450deg}}
.loginlogo{position:relative;z-index:1;width:100%;height:100%;border-radius:35px;display:block;background:#050b1c}
.loginsub{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;
  color:var(--muted);font-size:12px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.loginsub i{flex:0 0 46px;height:1px;background:linear-gradient(90deg,transparent,rgba(140,198,255,.55));position:relative}
.loginsub i:last-child{background:linear-gradient(90deg,rgba(140,198,255,.55),transparent)}
.loginsub i::after{content:"";position:absolute;top:-2.5px;width:6px;height:6px;transform:rotate(45deg);
  background:var(--gold2);right:-3px;box-shadow:0 0 8px rgba(169,212,255,.9)}
.loginsub i:last-child::after{right:auto;left:-3px}
/* 表单卡:玻璃面 + 渐变细边 + 顶部一条高光 */
.loginform{position:relative;display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(160deg,rgba(80,150,255,.09),rgba(7,18,38,.6) 45%),rgba(7,18,38,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid transparent;border-radius:20px;padding:18px 18px 16px;
  background-clip:padding-box;
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  animation:heroin .6s .12s cubic-bezier(.2,.8,.2,1) both}
.loginform::before{content:"";position:absolute;inset:-1px;border-radius:21px;padding:1px;z-index:-1;
  background:linear-gradient(160deg,rgba(140,198,255,.55),rgba(47,143,255,.12) 40%,rgba(47,143,255,.05) 70%,rgba(140,198,255,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.lf{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:6px;font-weight:600}
.tin.big{font-size:17px;padding:13px 14px;font-family:inherit;border-radius:12px;
  background:rgba(2,6,16,.75);border-color:rgba(120,170,255,.16);transition:border-color .15s,box-shadow .15s}
.tin.big:focus{border-color:rgba(140,198,255,.8);box-shadow:0 0 0 3px rgba(47,143,255,.18),0 0 18px rgba(47,143,255,.15)}
/* 带图标 / 眼睛的输入框 */
.fld{position:relative;display:flex;align-items:center}
.fld .fic{position:absolute;left:14px;width:18px;height:18px;fill:none;stroke:var(--dim);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke .15s}
.fld .fic~.tin{padding-left:42px}
.fld:focus-within .fic{stroke:var(--gold2)}
.fld .eye{position:absolute;right:6px;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  color:var(--dim);transition:color .15s,background .15s}
.fld .eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fld .eye:hover,.fld .eye.on{color:var(--gold2);background:rgba(47,143,255,.12)}
.fld:has(.eye) .tin{padding-right:46px}
.avrow{display:flex;gap:9px;justify-content:space-between}
.avpick{flex:1;aspect-ratio:1;max-width:52px;border-radius:50%;border:2.5px solid transparent;
  display:grid;place-items:center;font-weight:800;font-size:15px;color:#08120f;
  transition:transform .12s}
.avpick.on{border-color:var(--gold2);transform:scale(1.12);
  box-shadow:0 0 14px rgba(80,150,255,.4)}
.btn.big{min-height:52px;font-size:16.5px;margin-top:14px;letter-spacing:.02em}
/* 主按钮:一道缓慢扫过的高光 */
.btn.glow{position:relative;overflow:hidden;box-shadow:0 10px 26px rgba(47,143,255,.32),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.glow::after{content:"";position:absolute;top:-40%;bottom:-40%;width:38%;left:-50%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,60%{left:-50%}100%{left:130%}}
.btn.glow:active{transform:translateY(1px)}
.loginfoot{text-align:center;font-size:11px;color:var(--dim);margin:12px 0 0;letter-spacing:.02em}
@media(prefers-reduced-motion:reduce){
  .ringlight,.loginbg .suit,.btn.glow::after{animation:none}
  .loginhero,.loginform{animation:none}
}
@media(max-height:640px){
  .logoring{width:124px;height:124px;border-radius:30px}
  .loginlogo{border-radius:27px}
  .loginhero{margin-bottom:16px}
  .loginwrap{padding-top:18px}
}

/* ════════════ 大厅 ════════════ */
#lobby{overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:20px 14px calc(28px + var(--safeb))}
.lobwrap{max-width:1100px;margin:0 auto}
.lobhead{text-align:center;margin-bottom:22px}
.lobhead h1{font:800 26px/1.15 var(--serif);margin:0 0 6px;letter-spacing:.01em;color:var(--gold2)}
.lobhead p{color:var(--muted);margin:0;font-size:13px;line-height:1.5}
.vbadge{display:inline-block;margin-top:6px;font-size:8px;color:var(--dim);
  border:0;background:none;border-radius:0;padding:0;letter-spacing:.02em;opacity:.5}
/* 醒目的规则入口 —— 大厅首屏,人人可见 */
.ruleslink{display:flex;align-items:center;gap:9px;margin:14px auto 0;padding:11px 16px;
  border-radius:13px;font-size:13.5px;font-weight:700;color:var(--gold2);
  background:linear-gradient(180deg,rgba(80,150,255,.14),rgba(80,150,255,.05));
  border:1px solid rgba(80,150,255,.4);box-shadow:0 0 18px rgba(47,143,255,.15)}
.ruleslink svg{width:17px;height:17px;flex:0 0 auto}
.ruleslink .arw{margin-left:2px;opacity:.7}
.ruleslink:active{transform:scale(.98)}

/* 全屏规则页 */
.rulesfull{position:absolute;inset:0;z-index:70;background:var(--bg);display:none;flex-direction:column}
.rulesfull.on{display:flex}
.rfbar{flex:0 0 auto;display:flex;align-items:center;gap:10px;height:calc(var(--top) + var(--safet));
  padding:var(--safet) 12px 0;background:linear-gradient(180deg,#0a1730,#050c1d);
  border-bottom:1px solid var(--goldline)}
.rfbar b{flex:1;font:800 16px var(--serif);color:var(--gold2)}
.rfback{width:36px;height:36px;font-size:26px;line-height:1;color:var(--gold2);
  display:grid;place-items:center;border-radius:9px}
.rfback:active{background:rgba(255,255,255,.06)}
.rfbody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 16px calc(30px + var(--safeb))}
.rfsec{margin-bottom:22px}
.rfsec h3{font:800 13px/1 var(--serif);color:var(--gold2);margin:0 0 10px;
  padding-bottom:8px;border-bottom:1px solid var(--goldline);letter-spacing:.02em}
.rftable{width:100%;border-collapse:collapse;font-size:13px}
.rftable td{padding:8px 4px;border-bottom:1px solid var(--line2);vertical-align:top}
.rftable td:first-child{color:var(--muted)}
.rftable td:last-child{text-align:right;font-weight:650;color:var(--ink);white-space:nowrap}
/* 说明性的表格(每局流程等):右列是整句话,必须能换行 */
.rftable.rfflow{table-layout:fixed}
.rftable.rfflow td:first-child{width:34%;font-weight:650;color:var(--ink2,var(--ink))}
.rftable.rfflow td:last-child{text-align:left;white-space:normal;font-weight:500;
  color:var(--muted);line-height:1.55;overflow-wrap:anywhere}
.rfpay td:last-child{color:var(--gold2);font-variant-numeric:tabular-nums}
.rfpay .edge td{border-top:1px solid var(--goldline)}
.rfpay .edge td:first-child,.rfpay .edge td:last-child{color:var(--dim);font-weight:600}
.rfcard{background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:13px;padding:14px 15px;margin-bottom:12px}
.rfcard.sidebet{border-color:rgba(80,150,255,.22)}
.rfcard .bhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.rfcard .bhead b{font-size:14px;color:var(--ink)}
.rfcard .bhead .edgetag{font-size:10.5px;color:var(--dim)}
.rfnote{font-size:11.5px;color:var(--muted);line-height:1.6;margin-top:6px}
.rfwarn{background:rgba(80,150,255,.06);border:1px solid rgba(80,150,255,.22);
  border-radius:12px;padding:13px 15px;font-size:12px;color:var(--muted);line-height:1.65}
.rfwarn b{color:var(--gold2)}
.room{
  background:
    radial-gradient(ellipse 130% 90% at 85% -30%,rgba(17,96,72,.35),transparent 55%),
    linear-gradient(150deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:15px;padding:15px 16px;
  text-align:left;position:relative;overflow:hidden;width:100%;display:block;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.room:active{transform:scale(.985)}
.room::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--tg,var(--gold))}
.room[data-tag=low]{--tg:#4ade80} .room[data-tag=mid]{--tg:#60a5fa}
.room[data-tag=pro]{--tg:#2dd4bf} .room[data-tag=high]{--tg:#c084fc}
.room[data-tag=vip]{--tg:var(--gold)}
.rh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:11px}
.rn{font:750 18px/1.2 var(--serif);letter-spacing:.02em}
.re{font-size:10.5px;color:var(--dim);letter-spacing:.09em;text-transform:uppercase;margin-top:2px}
.pill{font-size:9.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--muted);white-space:nowrap}
.pill.live{background:rgba(74,222,128,.15);color:var(--win)}
.rl{font-size:12.5px;color:var(--muted);margin-bottom:11px;font-variant-numeric:tabular-nums}
.rl b{color:var(--gold2);font-weight:750}
.seatrow{display:flex;gap:4px;margin-bottom:11px}
.sdot{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.09)}
.sdot.on{background:var(--tg,var(--gold))}
.rf{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--dim)}
.go{color:var(--gold2);font-weight:750}

/* 两级大厅:等级卡 / 引导 / 返回条 */
.lobhint{font-size:12.5px;color:var(--muted);background:rgba(80,150,255,.07);
  border:1px solid rgba(80,150,255,.2);border-radius:11px;padding:10px 14px;margin-bottom:4px;text-align:center}
.tiercard .playing{display:flex;align-items:baseline;gap:4px;font-size:11px;color:var(--muted);
  background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.3);border-radius:14px;padding:4px 11px;white-space:nowrap}
.tiercard .playing b{font-size:16px;font-weight:800;color:var(--win)}
.recbadge{display:inline-block;margin-left:8px;font-size:10px;font-weight:700;color:#04122b;
  background:linear-gradient(180deg,#8cc6ff,var(--gold));border-radius:10px;padding:2px 8px;vertical-align:middle}
.room.recommend{box-shadow:0 6px 22px rgba(0,0,0,.35),0 0 0 1px rgba(80,150,255,.35)}
.tierbar{display:flex;align-items:center;gap:12px;padding:2px 0 12px;margin-bottom:2px}
.tierback{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  min-height:40px;padding:0 15px 0 11px;border-radius:20px;
  border:1px solid var(--goldline);
  background:linear-gradient(180deg,rgba(80,150,255,.14),rgba(80,150,255,.05));
  color:var(--gold2);font-size:14px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
.tierback svg{width:17px;height:17px;flex:0 0 auto}
.tierback:active{transform:scale(.95);background:rgba(80,150,255,.22)}
.tiercrumb{display:flex;flex-direction:column;gap:1px;min-width:0;margin-left:2px}
.tiercrumb b{font:800 18px/1.15 var(--serif);color:var(--ink);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tiercrumb .tierlim{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ════════════ 牌桌 ════════════ */
#tableview{display:flex;flex-direction:column;min-height:0}

.tablewrap{flex:0 0 auto;padding:8px 8px 0;position:relative}
.tablefelt{
  position:relative;width:100%;aspect-ratio:1/0.80;max-height:44vh;
  border-radius:0 0 50% 50% / 0 0 58% 58%;
  /* 多层质感:顶灯光池 + 绒面基色 + 细纹理 + 四周暗角(vignette) */
  background:
    radial-gradient(ellipse 60% 44% at 50% 8%,rgba(140,190,255,.10),transparent 68%),
    repeating-linear-gradient(48deg,rgba(255,255,255,.014) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(-48deg,rgba(0,0,0,.02) 0 2px,transparent 2px 5px),
    radial-gradient(ellipse 76% 84% at 50% 4%,var(--felt2) 0%,var(--felt) 52%,var(--felt3) 100%);
  box-shadow:inset 0 -34px 60px rgba(0,0,0,.58), inset 0 10px 28px rgba(255,255,255,.035),
    inset 26px 0 46px rgba(0,0,0,.22), inset -26px 0 46px rgba(0,0,0,.22),
    0 18px 44px rgba(0,0,0,.65), 0 3px 8px rgba(0,0,0,.4);
  overflow:visible;
}
.tablefelt::before{content:'';position:absolute;inset:9px 12px 14px;
  border-radius:0 0 50% 50% / 0 0 56% 56%;
  border:1px solid rgba(80,150,255,.18);
  box-shadow:inset 0 0 22px rgba(0,0,0,.28);
  pointer-events:none;z-index:1}
/* 桌沿:立体包边 —— 上缘受光、下缘落影,像一圈真实的软垫扶手 */
.rail{position:absolute;inset:-7px -7px -7px -7px;border-radius:0 0 50% 50% / 0 0 58% 58%;
  border:7px solid transparent;
  background:
    linear-gradient(175deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 12%,rgba(0,0,0,0) 30%,rgba(0,0,0,.28) 100%) border-box,
    linear-gradient(160deg,var(--rail2),var(--rail)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}

.dealerzone{position:absolute;top:8px;left:0;right:0;display:flex;flex-direction:column;
  align-items:center;gap:4px;z-index:4}
.dealerid{display:flex;align-items:center;gap:8px}
.davatar{width:44px;height:44px;flex:0 0 auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.davatar svg{width:100%;height:100%;display:block}
.dtxt{line-height:1.25;display:flex;flex-direction:column}
.dtxt b{font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.dtxt i{font-size:10px;font-style:normal;color:var(--muted)}
.dtxt i.wait{color:var(--gold2)}

.feltmark{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;user-select:none;z-index:1}
.feltmark span{display:block;font:800 30px/1 Georgia,serif;color:rgba(80,150,255,.13)}
.feltmark i{display:block;font-style:normal;font-size:7.5px;letter-spacing:.24em;
  color:rgba(255,255,255,.11);margin-top:4px;text-transform:uppercase}

.statusbar{flex:0 0 auto;grid-column:1;display:flex;align-items:center;justify-content:center;gap:9px;
  white-space:nowrap;padding:7px 12px 5px;background:var(--bg);position:relative;z-index:7}
.ptag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tbar{width:120px;height:4px;border-radius:2px;background:rgba(0,0,0,.5);overflow:hidden}
.tbar i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .25s linear}
.tbar.warn i{background:linear-gradient(90deg,#f87171,#fca5a5)}
.tsec{font-size:11px;font-weight:800;color:var(--gold2);font-variant-numeric:tabular-nums;min-width:22px}

/* 弧形座位 */
.seatarc{position:absolute;inset:0;z-index:3}
.pod{position:absolute;transform:translateX(-50%);width:50px;height:74px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border-radius:11px;padding:3px 2px;border:1.5px solid transparent;transition:.18s;
  overflow:hidden}
.pod.act{border-color:var(--gold);background:rgba(80,150,255,.14);
  box-shadow:0 0 0 3px rgba(80,150,255,.1),0 0 18px rgba(80,150,255,.22)}
.pod.own{border-color:rgba(96,165,250,.55);background:rgba(96,165,250,.09)}
.pod.own.act{border-color:var(--gold)}
/* 座位可点热区放大:视觉不变,四周各多 14px 都算点中;悬停给出明确反馈 */
.pod{cursor:pointer}
.pod::before{content:'';position:absolute;inset:-14px;z-index:-1}
.pod:hover .podsit{border-color:var(--gold);color:var(--gold2);transform:scale(1.1);
  box-shadow:0 0 12px rgba(255,201,74,.35)}
.podsit{transition:transform .15s,border-color .15s,box-shadow .15s}
.podsit{width:30px;height:30px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.26);
  display:grid;place-items:center;color:rgba(255,255,255,.35)}
.podsit svg{width:17px;height:17px}
.podsit:disabled{opacity:.35}
.pod .av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#08120f;
  background:linear-gradient(160deg,var(--gold2),var(--gold));flex:0 0 auto}
.pod.other .av{background:linear-gradient(160deg,#8fa6c4,#5b7092);color:#0a1220}
.pod .nm{font-size:7.5px;color:var(--muted);max-width:50px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pod .bt{font-size:9.5px;font-weight:800;color:var(--gold2);font-variant-numeric:tabular-nums}
/* 牌局中座位会长高,但宽度必须锁死 —— 否则分牌一变宽就会压到邻座 */
.pod.dealt{height:auto;min-height:74px;width:50px}
.podhands{display:flex;flex-direction:column;gap:2px;align-items:center}
.podhand{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:1px 2px;border-radius:6px}
.podhand.ah{background:rgba(80,150,255,.2);box-shadow:0 0 0 1px rgba(80,150,255,.5)}
.pod .nm.tiny{font-size:7.5px;opacity:.8;margin-bottom:1px}
.pod .mini{display:flex;justify-content:center;min-height:24px}
.pod .mini .cw{margin-left:-9px}
.pod .mini .cw:first-child{margin-left:0}
.pod .mini svg{width:15px;height:21px;display:block;border-radius:3px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.pod .mt{font-size:8.5px;font-weight:800;background:rgba(0,0,0,.62);border-radius:8px;
  padding:0 6px;font-variant-numeric:tabular-nums}
.pod .mt.bust{color:var(--lose)}
.pod .net{font-size:9.5px;font-weight:800;font-variant-numeric:tabular-nums}
.pod .rdy{position:absolute;top:-6px;right:-2px;font-size:8px;font-weight:800;color:var(--win)}
.pod .rdy.done{color:var(--muted);background:rgba(0,0,0,.55);border:1px solid var(--line);
  border-radius:6px;padding:0 3px;top:-8px}

/* 牌 */
.cardrow{display:flex;justify-content:center;align-items:flex-end}
.cardrow .cw{animation:deal .34s cubic-bezier(.2,.9,.3,1.2) both}
@media(prefers-reduced-motion:reduce){.cardrow .cw{animation-duration:.01s !important}}
/* 底牌翻转 */
.cw.flipc{animation:flipc .5s cubic-bezier(.3,.7,.3,1) both !important}
@keyframes flipc{0%{transform:rotateY(90deg) scale(.94);opacity:.6}
  60%{transform:rotateY(-12deg) scale(1.03);opacity:1}100%{transform:rotateY(0)}}
.view{animation:viewin .28s ease-out}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
@keyframes deal{
  0%{opacity:0;transform:translateY(-46px) rotate(-11deg) scale(.82)}
  60%{opacity:1}
  100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
}
.cardrow.lg svg{width:50px;height:70px;display:block;border-radius:6px;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.55))}
.cardrow.lg .cw{margin-left:-16px}
.cardrow.lg .cw:first-child{margin-left:0}
.cardrow.md svg{width:44px;height:62px;display:block;border-radius:6px;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
/* mini 的尺寸要有全局定义,否则出现在 .pod 以外(比如收起的那一行)就会塌成 0 */
.cardrow.mini svg{width:22px;height:31px;display:block;border-radius:4px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.cardrow.mini .cw{margin-left:-12px}
.cardrow.mini .cw:first-child{margin-left:0}
.cardrow.md .cw{margin-left:-13px}
.cardrow.md .cw:first-child{margin-left:0}

.tot{display:inline-flex;background:rgba(0,0,0,.62);border:1px solid var(--line);
  border-radius:12px;padding:1px 10px;font-size:12px;font-weight:800;
  font-variant-numeric:tabular-nums;backdrop-filter:blur(3px)}
.tot.bust{color:var(--lose);border-color:rgba(248,113,113,.45)}
.tot.bj{color:var(--gold2);border-color:rgba(80,150,255,.5)}

.bigmsg{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:9;
  font-size:26px;font-weight:900;text-align:center;pointer-events:none;
  text-shadow:0 3px 20px rgba(0,0,0,.9);opacity:0;transition:.28s;white-space:nowrap}
.bigmsg.show{opacity:1;animation:bigpop .45s cubic-bezier(.2,1.2,.3,1) both}
@keyframes bigpop{0%{transform:translate(-50%,-50%) scale(.55)}
  70%{transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1)}}
.bigmsg .sub{display:block;font-size:17px;font-weight:850;margin-top:2px;color:inherit;
  font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.bigmsg.win{text-shadow:0 3px 20px rgba(0,0,0,.9),0 0 22px rgba(74,222,128,.45)}
.bigmsg.lose{text-shadow:0 3px 20px rgba(0,0,0,.9),0 0 22px rgba(248,113,113,.4)}

/* ════════════ 我的区域 ════════════ */
/* ⚠ 这里的区块类曾经叫 .mine,和座位的修饰类 .pod.mine 撞名:
   .mine{position:relative} 在后面覆盖了 .pod{position:absolute},
   我的座位因此脱不出文档流,被挤到桌沿外。区块改叫 .myzone,座位改叫 .pod.own。 */
.myzone{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:8px 10px 4px;display:flex;flex-direction:column;gap:7px;
  background:var(--bg);position:relative;z-index:6}
.mycard{background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1.5px solid var(--line);border-radius:12px;padding:7px 9px;flex:0 0 auto}
.mycard.act{border-color:var(--gold);box-shadow:0 0 0 3px rgba(80,150,255,.1)}
.myhead{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.stag{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:9px;
  background:rgba(96,165,250,.16);color:var(--blue);white-space:nowrap}
.mycard.act .stag{background:rgba(80,150,255,.2);color:var(--gold2)}
.myhead .sp{flex:1}
.turnpill{font-size:9.5px;font-weight:800;letter-spacing:.06em;color:#08120f;
  background:linear-gradient(180deg,var(--gold2),var(--gold));border-radius:9px;padding:2px 8px}
.myhands{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
/* 保险 / 发牌阶段占多座时:座位横向并排,牌缩小 —— 两三座要同时看得全,
   竖着堆会被底部操作栏切掉,而保险恰恰是要看着牌做的决定 */
.myzone.compact{flex-direction:row;overflow-x:auto;overflow-y:hidden;align-items:flex-start}
.myzone.compact .mycard{flex:1 1 0;min-width:0;padding:5px 7px}
.myzone.compact .cardrow.md svg{width:34px;height:48px}
.myzone.compact .cardrow.md .cw{margin-left:-10px}
/* ⚠ 上面这条有 5 个类,优先级高过基础规则里 4 个选择器的
   `.cardrow.md .cw:first-child{margin-left:0}`,必须配一条同级的归零,
   否则第一张牌也被拉负边距,整排左移出容器被裁掉左边。 */
.myzone.compact .cardrow.md .cw:first-child{margin-left:0}
.myzone.compact .myhead{margin-bottom:3px}
.myzone.compact .hbox{min-width:0;padding:3px 4px}
.myzone.compact .stag{font-size:9.5px;padding:1px 6px}
.mycard.slim{display:flex;align-items:center;gap:9px;padding:5px 9px}
.slimrow{display:flex;gap:12px;align-items:center;flex:1;overflow-x:auto}
.slimhand{display:flex;align-items:center;gap:5px}
.tot.sm{font-size:10.5px;padding:0 7px}
.mycard.out{opacity:.62;border-style:dashed}
.outtag{font-size:11px;color:var(--muted);letter-spacing:.03em}
.pod .nm.out{color:var(--push);font-size:8.5px}
.betfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.outwarn{font-size:10.5px;color:var(--push);line-height:1.3}
.hbox{flex:0 0 auto;border-radius:10px;padding:5px 7px;border:1.5px solid transparent;
  display:flex;flex-direction:column;align-items:center;gap:3px;min-width:86px}
.hbox.ah{border-color:var(--gold);background:rgba(80,150,255,.12)}
.hbox .hl{font-size:9px;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.hbox .hb{font-size:10px;color:var(--gold2);font-variant-numeric:tabular-nums;font-weight:700}
.res{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:1px 8px;border-radius:9px}
.res.win,.res.blackjack{background:rgba(74,222,128,.18);color:var(--win)}
.res.lose,.res.bust{background:rgba(248,113,113,.16);color:var(--lose)}
.res.push{background:rgba(251,191,36,.16);color:var(--push)}
.res.surrender{background:rgba(255,255,255,.08);color:var(--muted)}

/* 下注区:一排座位标签 + 一组注区,不用在多张卡之间来回滚 */
.betpanel{padding:8px 9px 9px}
.targetbar{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:8px}
.tgt{font-size:12px;color:var(--muted)}
.tgt i{font-style:normal;opacity:.75}
.tgt b{color:var(--gold2);font-weight:750;margin-left:3px}
/* 桌上被选中的座位 */
.pod.picked{border-color:var(--gold);background:rgba(80,150,255,.16);
  box-shadow:0 0 0 3px rgba(80,150,255,.14)}
.betspots{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.bspot{flex:1;min-width:0;padding:7px 6px;border-radius:10px;text-align:center;min-height:52px;
  border:1.5px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.1) 60%),rgba(0,0,0,.28);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.04)}
.bspot .bn2{font-size:9px;letter-spacing:.05em;color:var(--dim);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bspot .bv{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:1px}
.bspot .bd{font-size:8px;color:var(--dim)}
.bspot.sel{border-color:var(--gold);
  background:linear-gradient(180deg,rgba(140,198,255,.1),rgba(80,150,255,.06)),rgba(80,150,255,.12);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25), 0 0 12px rgba(255,201,74,.22)}
.bspot.has .bv{color:var(--gold2)}

/* ════════════ 操作栏 ════════════ */
.dock{flex:0 0 auto;background:linear-gradient(180deg,#0a1426,#050b19);
  border-top:1px solid var(--line);
  padding:8px 10px calc(10px + var(--safeb));
  display:flex;flex-direction:column;gap:8px;
  /* 操作台立体感:顶缘一线高光 + 上方投下的柔影 */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 -10px 24px -14px rgba(0,0,0,.85)}
.hintbar{font-size:11.5px;color:var(--muted);text-align:center;min-height:15px;line-height:1.35}
.insnote{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;
  font-size:11px;color:var(--muted)}
.insnote b{color:var(--gold2);font-weight:750}
.insnote .edge{color:var(--push)}
.chiptray{display:flex;gap:8px;overflow-x:auto;padding:1px 0 3px;justify-content:center;
  scrollbar-width:none}
.chiptray::-webkit-scrollbar{display:none}
.chipbtn{width:50px;height:50px;flex:0 0 auto;position:relative;transition:transform .12s;opacity:.55}
.chipbtn svg{width:50px;height:50px;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.chipbtn.on{opacity:1;transform:translateY(-3px)}
.chipbtn.on::after{content:'';position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--gold2)}
/* 按压触感:选中的筹码按下去更"陷",未选中的也有反馈 */
.chipbtn:active{transform:scale(.9)}
.chipbtn.on:active{transform:translateY(-1px) scale(.92)}
.bspot{transition:transform .1s,border-color .15s,background .15s}
.bspot:active{transform:scale(.96);filter:brightness(1.15)}
.pod{transition:transform .1s}
.pod:active{transform:scale(.95)}
.tiercard:active{transform:scale(.985)}
.actionbar{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.btn{min-height:46px;padding:0 18px;border-radius:11px;font-size:14.5px;font-weight:750;
  background:var(--panel2);border:1px solid var(--line);display:inline-flex;
  align-items:center;justify-content:center;gap:5px;flex:1 1 0;min-width:74px;max-width:170px}
.btn:active:not(:disabled){transform:scale(.96);filter:brightness(1.12)}
.btn{transition:transform .08s,filter .08s}
.btn.primary{background:linear-gradient(180deg,#8cc6ff 0%,var(--gold) 70%,#1a5fd0 100%);
  color:#04122b;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(8,35,80,.4),
    0 4px 12px rgba(47,143,255,.3);
  text-shadow:0 1px 0 rgba(255,255,255,.3)}
.btn.danger{border-color:rgba(248,113,113,.4);color:#fca5a5}
.btn.sm{min-height:36px;padding:0 13px;font-size:12.5px;flex:0 0 auto;min-width:0}
.btn.wide{width:100%;flex:none;max-width:none;text-decoration:none}
.btn.ghost{background:transparent;color:var(--muted)}
a.btn{color:var(--ink);text-decoration:none}

/* ════════════ 抽屉 ════════════ */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transition:.22s;z-index:50}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:absolute;left:0;right:0;bottom:0;z-index:60;max-height:82%;
  background:var(--panel);border-radius:18px 18px 0 0;border-top:1px solid var(--line);
  transform:translateY(102%);transition:transform .26s cubic-bezier(.2,.8,.3,1);
  display:flex;flex-direction:column;padding-bottom:var(--safeb);
  box-shadow:0 -14px 40px rgba(0,0,0,.6)}
.drawer.on{transform:translateY(0)}
.dhandle{width:38px;height:4px;border-radius:3px;background:rgba(255,255,255,.2);
  margin:9px auto 4px;flex:0 0 auto}
/* 抽屉顶部账号条:头像 + 名字 + ID + 退出,任何页签都看得到 */
.acct{display:flex;align-items:center;gap:10px;padding:6px 16px 11px;flex:0 0 auto}
.acav{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:#04122b;flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.actxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.actxt b{font-size:13.5px;font-weight:750;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actxt i{font-style:normal;font-size:10px;color:var(--muted);letter-spacing:.02em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn.acout{flex:0 0 auto;border-color:rgba(248,113,113,.4);color:#fca5a5}
.btn.acout:active{background:rgba(248,113,113,.12)}
.tabs{display:flex;border-bottom:1px solid var(--line);flex:0 0 auto}
.tab{flex:1;color:var(--muted);padding:11px 2px;font-size:12px;font-weight:700;
  border-bottom:2px solid transparent}
.tab.on{color:var(--gold2);border-bottom-color:var(--gold)}
.pane{padding:14px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;display:none}
.pane.on{display:block}
.sec{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  margin:0 0 8px;font-weight:750}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.sub{font-size:10.5px;color:var(--muted);margin-top:4px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;
  background:#070d0b;border:1px solid var(--line);border-radius:7px;padding:7px 9px;
  word-break:break-all;color:#9fb8ae;line-height:1.5}
.seedrow{display:flex;gap:7px}
.tin{flex:1;min-width:0;background:#070d0b;border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:9px 10px;font-family:ui-monospace,Menlo,monospace;font-size:13px}
.tin:focus{outline:none;border-color:var(--blue)}
.kv{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:7px 0;
  border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)} .kv .v{font-variant-numeric:tabular-nums;font-weight:650;text-align:right}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.warnbox{background:rgba(80,150,255,.07);border:1px solid rgba(80,150,255,.24);
  border-radius:9px;padding:10px 12px;font-size:11.5px;color:#e5d4a4;line-height:1.6}
.note{font-size:11.5px;color:var(--muted);line-height:1.62;border-top:1px solid var(--line);
  padding-top:11px;margin-top:12px}
.note b{color:var(--ink)}
.hrow{border-bottom:1px solid var(--line);padding:8px 0;font-size:11.5px}
.hl1{display:flex;justify-content:space-between;align-items:center;gap:7px}
.hn{color:var(--dim);font-size:10px;font-variant-numeric:tabular-nums}
.hl2{color:var(--muted);font-size:10px;margin-top:2px;font-family:ui-monospace,Menlo,monospace}
.netline{font-weight:800;font-variant-numeric:tabular-nums}
.netline.p{color:var(--win)} .netline.n{color:var(--lose)} .netline.z{color:var(--muted)}
.vbtn{border:1px solid var(--line);color:var(--blue);border-radius:5px;font-size:9.5px;
  padding:3px 8px;white-space:nowrap}
.vbtn:disabled{color:var(--dim);border-style:dashed}
.pt{width:100%;border-collapse:collapse;font-size:11.5px}
.pt td{padding:4px 0;border-bottom:1px solid var(--line)}
.pt td:last-child{text-align:right;font-weight:700;color:var(--gold2);font-variant-numeric:tabular-nums}
.pt tr:last-child td{border-bottom:0}

/* toast */
.toast{position:absolute;top:calc(var(--top) + var(--safet) + 8px);left:50%;
  transform:translateX(-50%) translateY(-6px);z-index:90;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 16px;
  font-size:13px;font-weight:650;box-shadow:0 8px 26px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:.2s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:rgba(248,113,113,.5);color:#fecaca}
.toast.good{border-color:rgba(74,222,128,.45);color:#bbf7d0}

/* ════════════ 小屏微调 ════════════ */
@media(max-height:700px){
  .tablefelt{max-height:38vh}
  .cardrow.lg svg{width:42px;height:59px}
  .pod{width:52px}
  .cardrow.md svg{width:40px;height:56px}
}
@media(max-width:360px){
  .pod{width:46px}
  .pod.dealt{width:46px}
  .pod .mini svg{width:14px;height:20px}
  .chipbtn,.chipbtn svg{width:44px;height:44px}
  .bspot .bn2 .sidetag{display:none !important}   /* 窄屏:虚线框已表明是边注,角标省下宽度 */
}
/* 手机顶栏:登录后多了退出键,收起品牌文字只留 logo,钱包和三个键都放得下 */
@media(max-width:429px){
  body:not(.login-mode) .bn{display:none}
  body:not(.login-mode) .top{gap:6px}
}
@media(max-width:359px){
  .icb{width:34px;height:34px}
  .icb svg{width:18px;height:18px}
  .wallet{padding:4px 10px 4px 5px}
  .wv{font-size:14px}
}

/* ════════════ 横屏手机 ════════════ */
@media(orientation:landscape) and (max-height:520px){
  #tableview{flex-direction:row;flex-wrap:wrap}
  .tablewrap{width:58%;padding:6px}
  .tablefelt{max-height:none;aspect-ratio:1/0.62}
  .myzone{width:42%;padding:6px 8px}
  .dock{width:100%}
  .cardrow.lg svg{width:40px;height:56px}
}

/* ════════════ 宽屏 ════════════ */
/* 不再切换成双栏。手机框宽度固定,只把大厅的房间卡片排成两列,
   其余一律沿用手机布局。桌面双栏曾经导致 .statusbar 被自动放进侧栏那一格,
   右边只剩一个孤零零的倒计时 —— 布局只留一套就不会再有这类问题。 */
@media(min-width:430px){
  .rooms{grid-template-columns:1fr 1fr}
  .lobhead h1{font-size:25px}
}

.btn.dim{opacity:.55}

/* 座位交互重写:入座中的即时反馈 + 达到上限时的弱化(仍可点,点了给提示) */
.pod.sitting .podsit{animation:sitpulse .7s ease-in-out infinite;border-color:var(--gold)}
@keyframes sitpulse{50%{transform:scale(.88);opacity:.6}}
.podsit.nosit{opacity:.35}

/* GPT 生成的荷官头像:圆形裁切,开局亮蓝光圈、待机暗银圈 */
.dealerimg{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  border:2.5px solid #5e7ea6;box-shadow:0 0 10px rgba(0,0,0,.45)}
.dealerimg.live{border-color:#3b9dff;box-shadow:0 0 13px rgba(59,157,255,.5)}

/* 座位卡上的边注合计小字 */
.bt.sub{font-size:9px;color:var(--push);opacity:.85;font-weight:700;margin-top:1px}

/* ════════ 下注区新布局:三个方形主注 + 两条横放边注 ════════ */
.betspots.sq3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.betspots.sq3 .bspot{aspect-ratio:1/.9;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;padding:8px 9px;text-align:left}
.betspots.sq3 .bspot .bn2{font-size:9px;letter-spacing:.04em}
.betspots.sq3 .bspot .bv{font-size:19px;font-weight:800;margin:2px 0 1px}
.betspots.sq3 .bspot .bd{font-size:7.5px;line-height:1.4}
.betbars{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.bbar{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:7px 11px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);text-align:left;min-height:40px}
.bbar.sel{border-color:var(--gold);background:rgba(80,150,255,.12)}
.bbar.has .bv2{color:var(--gold2)}
.bbar .bl{display:flex;flex-direction:column;gap:1px;min-width:0}
.bbar .bn3{font-size:9.5px;font-weight:750;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.bbar .bd2{font-size:7.5px;color:var(--push);opacity:.75}
.bbar .bv2{font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;flex:0 0 auto}
.bbar:active{transform:scale(.99)}


/* ══════════════════════════════════════════════════════════════
   原型 UI 移植 —— 紧凑手机牌桌:5 座、座位选择条、扁筹码、一屏下注
   ══════════════════════════════════════════════════════════════ */
/* 数字字体本地托管(OFL 许可,见 fonts/LICENSE-ChakraPetch-OFL.txt)—— 不再连 Google,国内/东南亚打开不会卡,CSP 也不用放外域 */
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/chakra-petch-latin-600-normal.woff2?v=59) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/chakra-petch-latin-700-normal.woff2?v=59) format("woff2")}
:root{ --num:"Chakra Petch",ui-sans-serif,sans-serif; }

/* 数字统一用 Chakra Petch,和原型一致 */
.wv,.tsec,.bv,.bv2,.sta,.bt,.rl b{font-family:var(--num);letter-spacing:.01em}

/* ── 牌桌:压缩高度,把省下的给下注区 ── */
.tablewrap{flex:0 0 auto}
.tablefelt{height:258px;
  background:radial-gradient(110% 78% at 50% -6%, rgba(46,141,251,.20), transparent 62%),
    linear-gradient(180deg,#123059,#0b1d38 70%);
  border:1px solid #22406b;
  border-radius:12px 12px 130px 130px / 12px 12px 74px 74px}
.feltmark{opacity:.13}

/* ── 荷官:只留头像 + 状态胶囊 ── */
.dealerzone{gap:3px}
.dealerid{flex-direction:column;gap:3px}
.davatar{width:46px;height:46px}
.dealerimg{border-width:2px}
.dtxt b{display:none}                     /* 名字占空间没人看,去掉 */
.dtxt{display:block}
#dealerStatus{font-size:9px;font-style:normal;background:rgba(6,18,35,.78);
  padding:2px 9px;border-radius:9px;border:1px solid #2a4368;color:#7fd6a8;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
#dealerStatus::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}

/* ── 状态条:大号倒数 + 进度条 ── */
.statusbar{margin:10px 12px 0;padding:8px 12px;background:#0b1a33;border:1px solid #22406b;
  border-radius:12px;display:flex;align-items:center;gap:10px}
.ptag{font-size:10.5px;color:#9fc4f0;white-space:nowrap;flex-shrink:0;background:none;padding:0;border:0}
.tbar{flex:1;height:8px;border-radius:5px;background:#061223;overflow:hidden}
.tbar i{background:linear-gradient(90deg,#2e8dfb,#63b0ff)}
.tsec{font-weight:700;font-size:22px;color:#ffc94a;min-width:32px;text-align:right;line-height:1}
.tsec.urgent{color:#ff7c8a}
.tbar i.urgent{background:linear-gradient(90deg,#ff5468,#ff8a97);animation:urg .6s infinite}
@keyframes urg{0%,100%{opacity:1}50%{opacity:.55}}

/* ── 座位选择条:[座位2][座位3][座位4][全部] ── */
.seatstrip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-bottom:8px}
.stx{background:#0f1f3a;border:1px solid #22406b;border-radius:10px;padding:5px 4px;
  text-align:center;display:flex;flex-direction:column;gap:1px;min-height:40px;justify-content:center}
.stx.on{border-color:#2e8dfb;background:linear-gradient(180deg,#14315c,#102a4e)}
.stx .stt{font-size:8.5px;color:#7e95b8;line-height:1.4;white-space:nowrap}
.stx.on .stt{color:#9fc4f0}
.stx .sta{font-weight:700;font-size:12.5px;color:#fff;line-height:1.25;font-variant-numeric:tabular-nums}
.stx.on .sta{color:#ffc94a}
.stx.all{border-style:dashed;border-color:#2e8dfb}
.stx.all .stt{color:#63b0ff;font-size:10.5px;font-weight:700}
.stx.all.on{border-style:solid}
.stx:active{transform:scale(.98)}
.sronly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 筹码:扁长方形 38px,四等分 ── */
.chiptray{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 12px}
.chipbtn{height:38px;min-height:38px;width:auto;border-radius:11px;display:grid;place-items:center;
  position:relative;font-family:var(--num);font-weight:700;font-size:15px;color:#fff;
  border:1px solid rgba(255,255,255,.16);
  /* 立体斜面:顶部受光 + 底部内影 + 落影,像一枚真的筹码片 */
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.35),
    0 3px 0 rgba(0,0,0,.28), 0 6px 14px -6px rgba(0,0,0,.85);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  background:linear-gradient(160deg,#6f92c4,#33517d)}
.chipbtn:active{transform:translateY(2px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.25), inset 0 -1px 3px rgba(0,0,0,.35),
    0 1px 0 rgba(0,0,0,.28), 0 3px 8px -5px rgba(0,0,0,.8)}
.chipbtn svg{display:none}                 /* 用纯色扁片取代圆形筹码 SVG */
.chipbtn::after{content:"";position:absolute;inset:4px 6px;border-radius:7px;
  border:1.5px dashed rgba(255,255,255,.5);pointer-events:none}
.chipbtn::before{content:attr(data-v);position:relative;z-index:1}
.chipbtn.on{box-shadow:0 0 0 3px #ffc94a,0 9px 18px -8px rgba(255,201,74,.5);transform:translateY(-3px)}
.chipbtn.c1{background:linear-gradient(160deg,#ff7c8a,#bb2a3c)}
.chipbtn.c2{background:linear-gradient(160deg,#6f92c4,#33517d)}
.chipbtn.c3{background:linear-gradient(160deg,#46b075,#186b3f)}
.chipbtn.c4{background:linear-gradient(160deg,#9679e0,#57379e)}
.chipbtn.c5{background:linear-gradient(160deg,#e0a24f,#8a5a17)}
.chipbtn.c6{background:linear-gradient(160deg,#4fc2d0,#176b78)}

/* ── 操作按钮:和原型同样的圆角实心 ── */
.actionbar{gap:7px;padding:0 12px}
.actionbar .btn{padding:12px 6px;border-radius:12px;font-size:13px;font-weight:700;min-height:46px}

/* ── 下注面板更紧凑,保证一屏 ── */
.myzone{padding-top:8px}
.betpanel{padding:10px 11px}
.betspots.sq3 .bspot{aspect-ratio:1/.82}
.dock{padding-bottom:calc(8px + var(--safeb))}
.hintbar{font-size:10.5px;line-height:1.5}

/* ── 一屏内完成下注:把牌桌和各区再压紧,保证两条边注不被切掉 ── */
.tablefelt{height:clamp(178px,30vh,226px)}
/* 下注阶段牌桌上什么都没有,压矮它,把空间让给六个注区 —— 保证一屏放得下 */
#tableview.betmode .tablefelt{height:clamp(164px,25vh,210px)}
.statusbar{padding:6px 12px;margin-top:8px}
.tsec{font-size:20px}
.myzone{padding-top:6px}
.betpanel{padding:7px 10px}
.seatstrip{gap:5px;margin-bottom:6px}
.seatstrip .stx{min-height:34px;padding:3px 4px}
.seatstrip .stx .sta{font-size:12px}
.betspots.sq3{gap:5px}
.betspots.sq3 .bspot{aspect-ratio:1/.58;padding:6px 8px}
.betspots.sq3 .bspot .bv{font-size:17px;margin:1px 0 0}
.betbars{gap:5px;margin-top:5px}
.bbar{min-height:33px;padding:4px 10px}
.bbar .bv2{font-size:14px}
.chiptray{gap:6px}
.actionbar{gap:6px}
.actionbar .btn{min-height:44px;padding:10px 6px;font-size:12.5px}
.hintbar{font-size:10px;margin-bottom:4px}
.dock{gap:6px}

/* ── 荷官牌位改横排:头像+状态在左,牌和点数在右,腾开正中间的座位 ── */
.dealerzone{flex-direction:row;align-items:flex-start;justify-content:center;
  gap:12px;top:10px;padding:0 14px}
.dealerid{flex-direction:column;align-items:center;gap:3px;flex:0 0 auto}
.dealerzone #dealerCards{margin:0;flex:0 0 auto;align-self:center}
.dealerzone #dealerTotal{flex:0 0 auto;align-self:center;margin:0}
/* 没发牌时不占位,头像保持居中 */
.dealerzone #dealerCards:empty{display:none}
.dealerzone #dealerTotal:empty{display:none}

/* ── 小型轮盘注区:1-9 号码格 + 注额 ── */
.rouwrap{margin-top:4px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.02);padding:5px 9px 6px}
.rouwrap.sel{border-color:var(--gold);background:rgba(80,150,255,.12)}
.rouwrap.has .rv2{color:var(--gold2)}
.rouhead{display:flex;align-items:baseline;gap:7px;margin-bottom:5px}
.rn2{font-size:9.5px;font-weight:750;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap}
.rd2{font-size:7.5px;color:var(--push);opacity:.8;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv2{font-family:var(--num);font-size:14px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.rounums{display:grid;grid-template-columns:repeat(9,1fr);gap:3px}
.rounum{height:26px;border-radius:7px;border:1px solid var(--line);background:rgba(0,0,0,.28);
  color:var(--muted);font-family:var(--num);font-weight:700;font-size:12px;
  display:grid;place-items:center;font-variant-numeric:tabular-nums}
.rounum.on{background:linear-gradient(180deg,#8cc6ff,var(--gold));color:#04122b;
  border-color:var(--gold2);box-shadow:0 0 8px rgba(47,143,255,.45)}
.rounum:active{transform:scale(.92)}
/* 轮盘加进来后再压一点,保证仍是一屏 */
.betspots.sq3 .bspot{aspect-ratio:1/.5}
.bbar{min-height:30px;padding:3px 10px}
.tablefelt{height:212px}

/* ── 矮屏(iPhone SE 一类 ≤620px 高):把牌桌和注区再压一档,尽量一屏放得下 ── */
@media (max-height:620px){
  #tableview.betmode .tablefelt{height:clamp(124px,21.5vh,168px)}
  /* 矮屏上座位卡也跟着缩,免得弧线被压扁后和荷官区打架 */
  .pod .av{width:26px;height:26px;font-size:10px}
  .pod .nm{font-size:9px}
  .pod .bt{font-size:10px;padding:1px 5px}
  .dealerzone{top:6px}
  .davatar{width:36px;height:36px}
  .statusbar{padding:4px 12px;margin-top:6px}
  .tsec{font-size:17px}
  .myzone{padding-top:4px}
  .betpanel{padding:6px 9px}
  .betspots.sq3{gap:4px}
  .betspots.sq3 .bspot{aspect-ratio:1/.48;padding:4px 7px}
  .betspots.sq3 .bspot .bv{font-size:15px}
  .betbars{gap:4px;margin-top:4px}
  .bbar{min-height:28px;padding:3px 9px}
  .bbar .bv2{font-size:13px}
  .rouwrap{margin-top:4px;padding:4px 8px 5px}
  .rouhead{margin-bottom:3px}
  .rounum{height:23px}
  .betfoot{margin-top:4px}
  .chiptray{gap:5px}
  .chipbtn{min-height:33px}
  .actionbar .btn{min-height:38px;padding:7px 6px}
  .hintbar{font-size:9.5px;margin-bottom:3px}
}

/* ── 注区放不下时给出「还有内容」的提示,不让人以为被切掉了 ── */
.myzone{position:relative}
.myzone.hasmore{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),rgba(0,0,0,.15) 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),rgba(0,0,0,.15) 100%);
}

/* ── 轮盘注区 v2:一眼看清「押了几号 · 押了多少 · 中了收多少」 ── */
.rouwrap.live{border-color:var(--gold2);background:rgba(47,143,255,.10)}
.rouhead .rst{flex:1;min-width:0;font-size:9.5px;font-weight:650;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rouhead .rst.wait{color:var(--push);opacity:.85}
.rouhead .rst.ok{color:var(--gold2)}
.rounum{position:relative;height:30px;padding:0;line-height:1;gap:0}
.rounum .rnn{display:block;font-size:12px;line-height:1}
.rounum.staked{height:30px}
.rounum.staked .rnn{font-size:11px;margin-top:-1px}
.rounum .rnb{display:block;font-size:8px;font-weight:800;line-height:1.1;margin-top:1px;
  color:#04122b;font-variant-numeric:tabular-nums}
.roufoot{display:flex;align-items:center;gap:8px;margin-top:4px;min-height:15px}
.roufoot .rwin{flex:1;min-width:0;font-size:9.5px;font-weight:700;color:var(--win,#5ddc9a);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roufoot .rtip{flex:1;min-width:0;font-size:9px;color:var(--push);opacity:.75;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roufoot .rouclr{flex:0 0 auto;font-size:9px;font-weight:700;color:var(--muted);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;
  padding:2px 8px;line-height:1.4}
.roufoot .rouclr:active{transform:scale(.94)}
@media (max-height:620px){
  .rounum{height:26px}
  .rounum .rnn{font-size:11px}
  .roufoot{margin-top:3px;min-height:13px}
}

/* ── 下注阶段桌面上没有牌:牌桌和座位卡一起收窄,把空间让给注区 ── */
#tableview.betmode .tablefelt{height:clamp(148px,22vh,200px)}
#tableview.betmode .pod .av{width:28px;height:28px;font-size:10.5px}
#tableview.betmode .pod .nm{font-size:9.5px}
#tableview.betmode .pod .bt{font-size:10px;padding:1px 6px}
#tableview.betmode .dealerzone{top:6px}
#tableview.betmode .davatar{width:38px;height:38px}
@media (max-height:620px){
  #tableview.betmode .tablefelt{height:clamp(120px,20vh,168px)}
  #tableview.betmode .davatar{width:32px;height:32px}
}

/* ── 最后 4px:让 iPhone 13 一类的机型完全不出现滚动 ── */
.betpanel{padding:6px 10px}
.betfoot{margin-top:3px}
.roufoot{margin-top:3px}
@media (max-height:620px){
  .betpanel{padding:5px 9px}
  .betspots.sq3 .bspot{aspect-ratio:1/.44}
  .bbar{min-height:26px}
  .betfoot .btn{min-height:28px;padding:4px 10px;font-size:11px}
}

/* ── 注区副标题固定一行,限额永远看得见 ── */
.bspot .bd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bspot .bd b{color:var(--gold2)}
.bbar .bd2 b{color:var(--gold2)}
.outwarn.ok{color:var(--push);opacity:.9}

/* ── 逐个游戏的输赢明细(玩家自己看的)── */
.bkbox{background:var(--panel2,rgba(255,255,255,.03));border:1px solid var(--line);
  border-radius:12px;padding:8px 10px;margin-bottom:8px}
.bkhd{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:750;
  color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.bkchk{margin-left:auto;font-size:9.5px;font-weight:700;text-transform:none;letter-spacing:0}
.bkchk.ok{color:var(--win,#5ddc9a)} .bkchk.bad{color:var(--lose,#ff6b7a)}
.bkwheel{flex:0 0 auto;font-size:9.5px;font-weight:800;color:#04122b;text-transform:none;
  background:linear-gradient(180deg,#8cc6ff,#2f8fff);border-radius:6px;padding:2px 7px}
.bktbl{width:100%;border-collapse:collapse;font-size:11.5px;table-layout:fixed}
.bktbl th{font-size:9px;font-weight:650;color:var(--dim,var(--push));text-align:left;
  padding:3px 4px;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.03em}
.bktbl th.n,.bktbl td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;width:19%}
.bktbl td{padding:4px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}
.bktbl td.g{font-weight:700;color:var(--ink);width:26%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 「发生了什么」允许换行 —— 庄家点数、押号列表这些关键信息不许被 … 吃掉 */
.bktbl td.d{color:var(--muted);font-size:10.5px;line-height:1.45;
  white-space:normal;overflow-wrap:anywhere}
.bktbl td.p{color:var(--win,#5ddc9a);font-weight:750}
.bktbl td.nn{color:var(--lose,#ff6b7a);font-weight:750}
.bktbl tfoot td{border-top:1px solid var(--line);border-bottom:none;font-weight:800;padding-top:6px}

/* ── 我的每局明细(抽屉 · 记录页)── */
.subsec{font-size:10.5px;color:var(--dim,var(--push));margin:-4px 0 8px;line-height:1.5}
.mbrow{border:1px solid var(--line);border-radius:11px;margin-bottom:6px;overflow:hidden;
  background:rgba(255,255,255,.02)}
.mbhead{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;
  background:none;border:0;color:inherit;text-align:left;font:inherit;cursor:pointer}
.mbhead .mbn{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.mbhead .mbg{font-size:10px;color:var(--dim,var(--push));margin-left:2px}
.mbhead .netline{margin-left:auto;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.mbhead .netline.p{color:var(--win,#5ddc9a)} .mbhead .netline.n{color:var(--lose,#ff6b7a)}
.mbhead .netline.z{color:var(--push)}
.mbhead .mbcar{font-size:10px;color:var(--dim,var(--push));transition:transform .15s}
.mbrow.open .mbcar{transform:rotate(180deg)}
.mbbody{display:none;padding:0 10px 9px}
.mbrow.open .mbbody{display:block}
.mbbody .bkbox{margin-bottom:6px;padding:0;border:0;background:none}
.mbfoot{display:flex;align-items:center;gap:8px}
.mbfair{flex:1;min-width:0;font-size:10px;color:var(--dim,var(--push));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bkhd.bare{margin-bottom:3px;min-height:0}

/* ── 「上一局」入口:输赢不会一闪就没 ── */
.lastline{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:5px;
  padding:4px 8px;border-radius:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:inherit;font:inherit;cursor:pointer}
.lastline .ll1{font-size:9.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em}
.lastline .ll2{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.lastline .ll2.p{color:var(--win,#5ddc9a)} .lastline .ll2.n{color:var(--lose,#ff6b7a)}
.lastline .ll2.z{color:var(--push)}
.lastline .ll3{margin-left:auto;font-size:9.5px;font-weight:650;color:var(--gold2)}
.lastline:active{transform:scale(.99)}

/* ══════════ 一排四格的注区:三个方格 + 一个装着两条横长方的方格 ══════════ */
.betspots.sq4{display:grid;gap:5px;align-items:stretch;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.14fr) minmax(0,1.3fr)}
.betspots.sq4>*{min-width:0}
.betspots.sq4 .bspot{aspect-ratio:auto;min-height:60px;display:flex;flex-direction:column;
  justify-content:center;gap:1px;padding:6px 7px}
.betspots.sq4 .bspot .bn2{font-size:8.5px;line-height:1.2}
.betspots.sq4 .bspot .bv{font-size:17px;margin:0}
.betspots.sq4 .bspot .bd{font-size:7.5px;line-height:1.2}

.sidebox{display:flex;flex-direction:column;gap:3px;min-height:60px;padding:4px;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}
.sidebox .sbar{flex:1;display:flex;align-items:center;justify-content:space-between;gap:3px;
  border:1px solid var(--line);border-radius:7px;background:rgba(0,0,0,.26);
  padding:1px 6px;color:inherit;font:inherit;cursor:pointer;min-height:0}
.sidebox .sbar .sbn{font-size:8px;font-weight:800;color:var(--muted);letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap}
.sidebox .sbar .sbv{font-size:12.5px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sidebox .sbar.sel{border-color:var(--gold);background:rgba(80,150,255,.16)}
.sidebox .sbar.has .sbv{color:var(--gold2)}
.sidebox .sbar:active{transform:scale(.97)}
.sbfoot{flex:0 0 auto;text-align:center;font-size:7px;line-height:1.3;color:var(--push);opacity:.85}
.sbfoot b{color:var(--gold2)}

/* ── 红黑:第三格,看庄家明牌 —— 红/黑两条 + 走势点 ── */
.rbbox{display:flex;flex-direction:column;gap:3px;min-height:60px;padding:4px;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}
.rbbox .rbar{flex:1;display:flex;align-items:center;justify-content:space-between;gap:3px;
  border-radius:7px;padding:1px 6px;color:inherit;font:inherit;cursor:pointer;min-height:0}
.rbbox .rbar.red{border:1px solid rgba(255,120,130,.45);
  background:linear-gradient(160deg,#7a1220,#3d0a12)}
.rbbox .rbar.black{border:1px solid rgba(150,160,185,.4);
  background:linear-gradient(160deg,#20242e,#0b0e15)}
.rbbox .rbar .rbn{font-size:8.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap;color:#fff}
.rbbox .rbar.black .rbn{color:#cfd6e6}
.rbbox .rbar .rbpay{font-size:7px;font-weight:700;color:rgba(255,255,255,.55);white-space:nowrap}
.rbbox .rbar .rbv{font-size:12.5px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rbbox .rbar.sel{outline:2px solid var(--gold);outline-offset:-1px;
  box-shadow:0 0 10px rgba(240,192,90,.35)}
.rbbox .rbar.has .rbv{color:var(--gold2)}
.rbbox .rbar:active{transform:scale(.97)}
/* 走势:最近 10 局庄家明牌颜色;金点 = A♠/A♥ 通杀 */
.rbbox .rbhist{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:3px;
  min-height:9px;padding:0 2px}
.rbbox .rbhist i{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.rbbox .rbhist i.r{background:#e5484d}
.rbbox .rbhist i.b{background:#3a4256;border:1px solid rgba(160,170,195,.5)}
.rbbox .rbhist i.a{background:var(--gold2);box-shadow:0 0 4px rgba(240,192,90,.7)}
.rbbox .rbhist .rbtip{font-size:6.5px;color:var(--push);opacity:.85;white-space:nowrap}

/* 少了一整排,把省下来的高度还给牌桌 —— 桌面看起来更宽敞 */
#tableview.betmode .tablefelt{height:clamp(196px,30vh,262px)}
.tablefelt{height:clamp(206px,32vh,268px)}
#tableview.betmode .pod .av{width:32px;height:32px;font-size:11.5px}
#tableview.betmode .pod .nm{font-size:10px}
#tableview.betmode .davatar{width:46px;height:46px}
#tableview.betmode .dealerzone{top:10px}
@media (max-height:620px){
  #tableview.betmode .tablefelt{height:clamp(150px,25vh,196px)}
  .tablefelt{height:clamp(156px,26vh,206px)}
  .betspots.sq4 .bspot{min-height:52px}
  .sidebox{min-height:52px}
  .rbbox{min-height:52px}
  .sidebox .sbar .sbn{font-size:7px}
  .rbbox .rbar .rbn{font-size:7.5px}
  .rbbox .rbar{padding:1px 4px}
  .sidebox .sbar{padding:1px 4px}
}

/* 筹码一排放得下,不换行(高额场有 5 档筹码) */
.chiptray{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:5px}
.chipbtn{min-width:0;padding-left:2px;padding-right:2px;font-size:13px}
.chipbtn::after{inset:3px 4px}
.ruleslink.sm{width:100%;margin:0 0 12px;padding:8px 12px;font-size:11.5px}
.ruleslink.sm svg{width:14px;height:14px}

/* ── 注区分组标签:左边是主注,右边是边注 ── */
.grouplbl{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.14fr) minmax(0,1.3fr); gap:5px;
  font-size:7.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:3px; line-height:1.3;
}
.grouplbl .gmain{grid-column:1 / span 2; color:var(--gold2)}
.grouplbl .gside{grid-column:3 / span 2; color:var(--push); opacity:.85; text-align:right}
/* 边注格子:虚线边 + 角标,和主注一眼分得开 */
.betspots.sq4 .bspot.side{border-style:dashed; background:rgba(255,255,255,.015)}
.betspots.sq4 .bspot.side.sel{border-style:solid}
.bspot .bn2 .sidetag{
  display:inline-block; margin-left:4px; font-style:normal; font-size:6.5px; font-weight:800;
  letter-spacing:.04em; padding:0 3px; border-radius:3px; vertical-align:1px;
  color:var(--push); border:1px solid var(--line);
}

/* ── 登录/注册切换:滑动的胶囊 ── */
.authtabs{position:relative;display:flex;gap:0;margin-bottom:14px;background:rgba(2,6,16,.6);
  border:1px solid rgba(120,170,255,.14);border-radius:12px;padding:4px;isolation:isolate}
.authtabs::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9px;
  background:linear-gradient(180deg,#3d9bff,#1d63c8);box-shadow:0 6px 16px rgba(47,143,255,.35),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .22s cubic-bezier(.2,.8,.2,1);z-index:-1}
.authtabs:has(#tabReg.on)::before{transform:translateX(100%)}
.atab{flex:1;padding:9px 4px;border:0;border-radius:9px;background:none;color:var(--muted);
  font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;transition:color .2s}
.atab.on{color:#fff}
@supports not selector(:has(a)){.atab.on{background:linear-gradient(180deg,#3d9bff,#1d63c8)}.authtabs::before{display:none}}
.lfopt{font-weight:400;color:var(--push);opacity:.8;font-size:.85em}
#regPane.hide,#loginPane.hide{display:none}
#agentHint{min-height:14px}
#agentHint.ok{color:var(--win,#5ddc9a)}
#agentHint.bad{color:var(--lose,#ff6b7a)}

/* 扫代理码进来的 Agent Code:锁定态 */
.tin.locked{background:rgba(255,201,74,.07);border-color:rgba(255,201,74,.4);
  color:var(--gold2);pointer-events:none}

/* ── 登录/注册页签内的表单:恢复纵向排版(标签一行、输入框一行,全宽) ── */
#loginPane,#regPane{display:flex;flex-direction:column;gap:9px}
#loginPane .lf,#regPane .lf{display:block;margin-top:6px}
#loginPane .tin,#regPane .tin{width:100%;flex:none}
#regPane .avrow{margin-top:2px}
#regPane .sub{margin-top:-2px}

/* ── 充值弹窗:银行转账块 ── */
.tubank{margin-top:10px}
.tubank .bktoggle{width:100%;text-align:left;padding:9px 12px;border:1px dashed var(--line);
  border-radius:10px;background:rgba(255,255,255,.02);color:var(--muted);font-size:12.5px;cursor:pointer}
.tubank .bktoggle.on{border-style:solid;border-color:var(--gold);color:var(--gold2)}
.tubank .bkbody{display:none;border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;
  padding:10px 12px;background:rgba(0,0,0,.22)}
.tubank.open .bktoggle{border-radius:10px 10px 0 0}
.tubank.open .bkbody{display:block}
.tubank .bkinfo{white-space:pre-wrap;font-size:12px;color:var(--ink);background:rgba(240,192,90,.07);
  border:1px dashed rgba(240,192,90,.4);border-radius:8px;padding:8px 10px;margin-bottom:9px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.tubank input{width:100%;margin-bottom:8px;background:#0b0e14;border:1px solid var(--line);
  color:var(--ink);border-radius:7px;padding:8px 10px;font-size:13px}
.tubank input:focus{outline:none;border-color:var(--gold)}
.tubank .bksubmit{width:100%;padding:10px;border-radius:8px;font-weight:700;font-size:13.5px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2b1c04;border:0;cursor:pointer}
.tubank .bksubmit:disabled{opacity:.45;cursor:not-allowed}
.tubank .bkhint{font-size:11px;color:var(--dim);margin-top:6px;line-height:1.5}