/* ══════════════════════════════════════════════════════════════════════
   21 ACE · BUILD 111 「大升级」精修层
   加载在 theme.css 之后,只做「看起来更贵、更顺手」这件事:
     1. 21 点牌桌:桌面字不再压座位、空座变成能一眼看懂的「入座」牌、座位卡玻璃化
     2. 游戏页里顶栏收薄,多出一截给游戏本体;主按钮吸底,滚到哪都按得到
     3. 所有街机场景统一「舞台框」:渐变描边 + 顶部一线高光 + 暗角,结算横幅更像一张票
     4. 大厅「最近玩过」一条
     5. 规则页折叠
   不动任何类名 / id / 测试选择器。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 21 点牌桌 ─────────────────────────────────────────────────────── */
/* 桌面字:从正中挪到荷官下面一条,座位弧整体下沉(app.js layoutArc),两者不再打架 */
#app .feltmark{top:38.5%;line-height:1;left:50%;transform:translate(-50%,0);width:auto;white-space:nowrap;display:none}
body[data-phase="idle"] #app .feltmark,body:not([data-phase]) #app .feltmark{display:block}
#tableview.betmode .feltmark{display:none!important}
/* 下注阶段桌面很矮:荷官只留头像(状态已经在下面那条「请下注」里),座位卡才放得下 */
#tableview.betmode .dtxt{display:none}
#tableview.betmode .davatar{width:34px;height:34px}
#app .feltmark span{display:none}
#app .feltmark i{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:9.5px;letter-spacing:.24em;color:rgba(255,209,102,.62);font-weight:700}
#app .feltmark i::before,#app .feltmark i::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,209,102,.5));}
#app .feltmark i::after{background:linear-gradient(90deg,rgba(255,209,102,.5),transparent)}
@media(max-height:700px){#app .feltmark i{font-size:8.5px}#app .feltmark i::before,#app .feltmark i::after{width:22px}}

/* 空座:一块「入座」牌,而不是一个虚线圈 */
#app .pod.empty{width:58px;height:74px;border-radius:14px;border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.035);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:visible;transition:border-color .15s,background .15s,transform .15s}
#app .pod.empty .podsit{width:34px;height:34px;border:1.5px solid rgba(62,242,224,.55);background:radial-gradient(circle at 50% 30%,rgba(62,242,224,.18),rgba(7,9,18,.6));color:var(--acc);box-shadow:0 0 0 3px rgba(62,242,224,.08),0 4px 10px rgba(0,0,0,.45);position:relative}
#app .pod.empty .podsit svg{width:16px;height:16px;opacity:.9}
#app .pod.empty .podsit::after{content:attr(data-l);position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);font-family:var(--display);font-size:9.5px;letter-spacing:.14em;color:var(--acc);white-space:nowrap;font-weight:700}
#app .pod.empty .podsit.nosit{opacity:.35}
#app .pod.empty .podsit.nosit::after{content:""}
#app .pod.empty:hover,#app .pod.sitting{border-color:rgba(62,242,224,.6);background:rgba(62,242,224,.08)}
#app .pod.sitting .podsit{animation:sitpulse .7s ease-in-out infinite;border-color:var(--acc)}
/* 有人的座位:玻璃牌 + 头像描边 */
#app .pod.own,#app .pod.other{border-radius:14px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.4)}
#app .pod.own{border-color:rgba(62,242,224,.42);background:linear-gradient(180deg,rgba(62,242,224,.12),rgba(62,242,224,.03))}
#app .pod .av{box-shadow:0 0 0 2px rgba(7,9,18,.9),0 0 0 3px rgba(255,255,255,.16),0 3px 8px rgba(0,0,0,.5)}
#app .pod:not(.own):not(.act) .av{border:0}
#app .pod .bt{background:rgba(7,9,18,.7);border:1px solid rgba(255,209,102,.35);border-radius:99px;padding:1px 7px;color:var(--money2)}
#app .pod.act{border-color:rgba(62,242,224,.9);box-shadow:0 0 0 3px rgba(62,242,224,.14),0 0 22px rgba(62,242,224,.35),inset 0 1px 0 rgba(255,255,255,.2)}
/* 荷官:头像下加一圈光,状态字做成小胶囊 */
#app .dealerzone .davatar{filter:drop-shadow(0 0 10px rgba(79,139,255,.45)) drop-shadow(0 2px 8px rgba(0,0,0,.5))}
#app .dtxt i:not(:empty){display:inline-block;padding:2px 9px;border-radius:99px;background:rgba(7,9,18,.7);border:1px solid rgba(255,255,255,.14);font-family:var(--display);font-size:10px;letter-spacing:.06em}
#app .dtxt i.wait{color:var(--acc);border-color:rgba(62,242,224,.4)}

/* ── 2. 游戏页壳:顶栏收薄 + 主按钮吸底 ───────────────────────────────── */
body:has(#lobby.hide):has(#login.hide) .top{height:calc(44px + var(--safet));}
body:has(#lobby.hide):has(#login.hide) .top .brand .bn{display:none}
body:has(#lobby.hide):has(#login.hide) .top .brand .bicon{width:26px;height:26px}
body:has(#lobby.hide):has(#login.hide) .top .icb{width:34px;height:34px}
body:has(#lobby.hide):has(#login.hide) .top .wallet{height:34px}
body:has(#lobby.hide):has(#login.hide) #app .gh{padding:2px 0 4px}
body:has(#lobby.hide):has(#login.hide) #app .gh .ghb,body:has(#lobby.hide):has(#login.hide) #app .gh .ghr{height:32px}
/* 主按钮一条吸在底部:内容再长,「开 / 转 / 落球」永远按得到;下面垫一层渐变遮住滚过去的内容 */
#app .scbar{position:sticky;bottom:calc(6px + var(--safeb));z-index:6}
#app .scbar::before{content:"";position:absolute;left:-16px;right:-16px;top:-12px;bottom:calc(-40px - var(--safeb));z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,9,18,0) 0%,rgba(7,9,18,.86) 34%,rgba(7,9,18,.94) 100%);border-radius:0}
#tableview .scbar{position:static}
#tableview .scbar::before{display:none}

/* ── 3. 街机舞台框 + 结算票 ───────────────────────────────────────────── */
#app .pkscene,#app .pgscene,#app .hlscene,#app .crscene,#app .mnscene,#app .rlscene,#app .fsstage {
  position:relative;border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(0,0,0,.35),inset 0 -30px 50px rgba(0,0,0,.35),0 0 0 1px rgba(62,242,224,.12),0 18px 40px rgba(0,0,0,.55)}
#app .pkscene::after,#app .pgscene::after,#app .hlscene::after,#app .crscene::after,#app .mnscene::after,#app .rlscene::after,#app .fsstage::after {
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(120% 60% at 50% -10%,rgba(62,242,224,.10),transparent 60%),radial-gradient(80% 50% at 50% 110%,rgba(124,108,255,.12),transparent 60%)}
/* 结算横幅:左边一条色带,赢的时候有一道光扫过去 */
#app .resdock .resbig{position:relative;overflow:hidden;border-left-width:4px}
#app .resdock .resbig.win{border-left-color:var(--win);background:linear-gradient(90deg,rgba(95,245,177,.16),rgba(255,255,255,.04) 60%)}
#app .resdock .resbig.lose{border-left-color:var(--lose);background:linear-gradient(90deg,rgba(255,107,138,.14),rgba(255,255,255,.03) 60%)}
#app .resdock .resbig.push{border-left-color:var(--push)}
#app .resdock .resbig.win.on::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:b111sweep 1.1s .2s ease-out both;pointer-events:none}
@keyframes b111sweep{to{left:120%}}
/* 最近一行:小圆点更像筹码 */
#app .rlhist b,#app .pkhist b {box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 4px rgba(0,0,0,.5)}
/* 筹码钮:压下去有回弹,选中的带一圈呼吸光 */
#app .chipbtn{transition:transform .12s,filter .12s}
#app .chipbtn:active:not(:disabled){transform:scale(.92)}
#app .chipbtn.on{animation:b111chip 1.8s ease-in-out infinite}
@keyframes b111chip{0%,100%{filter:drop-shadow(0 0 4px rgba(62,242,224,.35))}50%{filter:drop-shadow(0 0 12px rgba(62,242,224,.7))}}
/* 数字统一等宽,余额 / 倍数 / 赔付不再跳来跳去 */
#app .wv,#app .resbig b,#app .bt,#app .tsec,#app .pod .net,#app .scpt {font-variant-numeric:tabular-nums}

/* ── 4. 大厅「最近玩过」 ──────────────────────────────────────────────── */
#app .recentrow{display:flex;align-items:center;gap:8px;width:100%;max-width:440px;margin:0 auto 12px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;-webkit-overflow-scrolling:touch}
#app .recentrow::-webkit-scrollbar{display:none}
#app .recentrow .rl{flex:0 0 auto;font-family:var(--display);font-size:10px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;padding-right:2px}
#app .recentrow .rc{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px 0 6px;border-radius:99px;border:1px solid var(--stroke);background:rgba(255,255,255,.05);color:var(--ink);font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);cursor:pointer}
#app .recentrow .rc:active{transform:scale(.96)}
#app .recentrow .rc .ra{width:26px;height:26px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:rgba(7,9,18,.6);flex:0 0 auto}
#app .recentrow .rc .ra svg{width:100%;height:100%;display:block}
#app .recentrow .rc .ra img{width:100%;height:100%;object-fit:cover}
#app .recentrow:empty{display:none}

/* ── 5. 规则页折叠:每段标题可点,收起只留标题 ────────────────────────── */
#app #rfBody .rfsec > h3{cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none}
#app #rfBody .rfsec > h3::after{content:"−";margin-left:auto;font-family:var(--display);font-size:14px;color:var(--dim);width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto}
#app #rfBody .rfsec.fold > h3::after{content:"+"}
#app #rfBody .rfsec.fold > *:not(h3){display:none}
#app #rfBody .rfsec.fold{margin-bottom:6px}

/* ── 6. 门卡角标:去掉返还率后统一用「最高倍数」这种玩家看得懂的话 ─────── */
#app .cattag{letter-spacing:.06em}

/* ── 8. 筹码行:一行放得下(标签 + 5 颗 + 自定),窄屏收一点间距,不再折到第二行 ────────── */
#app .scprices{gap:8px}
#app .scprices .lbl{font-size:11px}
@media(max-width:400px){#app .scprices{gap:6px}#app .scprices .chipbtn{width:44px;height:44px;font-size:12.5px}}
@media(max-width:360px){#app .scprices{gap:5px}#app .scprices .chipbtn{width:40px;height:40px;font-size:12px}#app .scprices .lbl{display:none}}

/* ══════════════ BUILD 114:一局什么时候算「结束」—— 三个信号一起发:数字停 · 按钮翻 · 钱到账 ══════════════ */
/* 根因修复:BUILD 111 把横幅改成 position:relative,但 crash.css 里当年「卡片居中」的 left:50%/top:50% 还在 → 横幅被推到右下半个身位(老板说的「挪去旁边看不到」) */
#app .resdock .resbig{left:auto;top:auto;right:auto;bottom:auto}
/* R3 固定结算行:主按钮正上方永远留一行;没结果时是虚线空行(版式不跳),有结果就写进去,到下一局才换 */
#app .resdock.rsv,#app .resdock.rsv:not(:has(.resbig.on)){display:block;width:min(96vw,420px);flex:0 0 auto;margin:0 auto}
#app .resdock.rsv .resbig{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h a" "s l";align-items:center;column-gap:10px;row-gap:1px;
  min-height:50px;padding:6px 12px 6px 14px;border-radius:14px;border:1px dashed rgba(255,255,255,.14);border-left-width:1px;background:rgba(255,255,255,.03);box-shadow:none;text-align:left;opacity:1;animation:none;transition:none}
#app .resdock.rsv .resbig:not(.on)>*{display:none}
#app .resdock.rsv .resbig:not(.on)::before{content:attr(data-empty);grid-column:1/-1;text-align:center;font-family:var(--display);font-size:11.5px;letter-spacing:.06em;color:rgba(166,175,204,.42)}
#app .resdock.rsv .resbig.on{border-style:solid;border-left-width:4px;animation:rsvin .32s cubic-bezier(.2,.9,.3,1.25) both}
#app .resdock.rsv .resbig.on.late{animation:rsvin .32s cubic-bezier(.2,.9,.3,1.25) .9s both}
#app .resdock.rsv .resbig i{grid-area:h;display:block;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .resdock.rsv .resbig span{grid-area:s;display:block;flex:none;text-align:left;font-size:10.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .resdock.rsv .resbig b{grid-area:a;justify-self:end;font-size:22px;line-height:1.05}
#app .resdock.rsv .resbig em{grid-area:l;justify-self:end;padding:1px 8px;font-size:9.5px}
/* 不吸底(会盖住扫雷最后一排 / 弹珠台的格子);结算那一刻若在屏幕外,ARCADE.revealRes 把页面滚到刚好露出它 */
#app .resdock.rsv .resbig{background-color:#0d1224}
#app .resdock.rsv .resbig.on.win{background:linear-gradient(90deg,rgba(95,245,177,.16),rgba(255,255,255,.04) 60%),#0d1224}
#app .resdock.rsv .resbig.on.lose{background:linear-gradient(90deg,rgba(255,107,138,.14),rgba(255,255,255,.03) 60%),#0d1224}
#app .resdock.rsv .resbig.on.push{background:#11172b}
@keyframes rsvin{from{opacity:.2;transform:scale(.97)}to{opacity:1;transform:none}}

/* R2 主键翻成结果:盖在按钮上的一层,金条照走(防误触),1.5 秒后淡出,露出「再来一次」 */
#app .flipface{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:16px;overflow:hidden;pointer-events:none;color:#fff;
  animation:flipin .26s cubic-bezier(.2,.9,.3,1.3) both}
#app .flipface b{font-family:var(--num);font-weight:800;font-size:23px;line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(0,0,0,.25)}
#app .flipface i{font-style:normal;font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.04em;opacity:.92;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .flipface.f-win{background:linear-gradient(135deg,#43e3a0 0%,#1aa877 55%,#0d7453 100%);box-shadow:0 0 0 1px rgba(95,245,177,.55),0 8px 24px rgba(46,229,157,.35)}
#app .flipface.f-lose{background:linear-gradient(135deg,#ff7d97 0%,#d8315a 55%,#8f1636 100%);box-shadow:0 0 0 1px rgba(255,107,138,.5),0 8px 24px rgba(255,61,113,.3)}
#app .flipface.f-push{background:linear-gradient(135deg,#6b7797,#3c4560);box-shadow:0 0 0 1px rgba(255,255,255,.2)}
#app .flipface::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#b8912f,#f3dd8e);transform-origin:left;animation:scarm var(--arm,1500ms) linear both}
#app .flipface.out{animation:flipout .25s ease both}
@keyframes flipin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes flipout{to{opacity:0}}

/* 钱到账:钱包亮一下绿 */
#app .wallet.gain{animation:walletgain .9s ease-out both}
#app .wallet.gain .wv{color:#9ff5c6}
@keyframes walletgain{0%{box-shadow:0 0 0 0 rgba(95,245,177,.75),0 0 18px rgba(95,245,177,.5)}100%{box-shadow:0 0 0 12px rgba(95,245,177,0),0 0 0 rgba(95,245,177,0)}}

/* 飞机 F1:收了钱 → 大数字是「你的」(绿,前面一个对勾章),飞机的倍数缩到右上角变灰,飞走变红 */
#app .crmult.mine{color:#8ff0b4;text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 26px rgba(95,245,177,.45)}
#app .crstate{font-weight:600}
#app .crmult.mine~.crstate{color:#bff7d8}
#app .crsub{position:absolute;right:10px;top:10px;z-index:3;padding:3px 9px;border-radius:99px;font-family:var(--num);font-weight:700;font-size:11.5px;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:rgba(200,210,235,.75);background:rgba(4,8,20,.55);border:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none}
#app .crsub.on{opacity:1;transform:none}
#app .crsub.gone{color:#ff9aac;border-color:rgba(255,107,138,.45)}

@media(prefers-reduced-motion:reduce){#app .resdock.rsv .resbig.on,#app .flipface,#app .flipface::after,#app .wallet.gain{animation:none}}

/* BUILD 114:高低牌「换一张」(一局 1 次)—— 两个猜的键下面一条虚线键,用掉就消失 */
#app .hlskip{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:6px 12px;border-radius:12px;border:1px dashed rgba(255,255,255,.3);background:rgba(255,255,255,.05);
  color:#e6e9ff;font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.06em;cursor:pointer}
#app .hlskip i{font-style:normal;font-size:17px;line-height:1}
#app .hlskip small{font-weight:600;font-size:11px;letter-spacing:.02em;color:var(--muted)}
#app .hlskip:active:not(:disabled){transform:translateY(2px)}
#app .hlskip:disabled{opacity:.45;cursor:default}
#app .hlskip:focus-visible{outline:2px solid var(--gold,#f3c14e);outline-offset:2px}

/* BUILD 116:轮盘外围格第二行小字「拿回 3× / ×2」(老板:看不懂 2:1) */
#app .rls.o span{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;gap:1px}
#app .rls.o .rlback{font-family:var(--display);font-weight:600;font-size:9px;letter-spacing:.02em;color:rgba(255,233,168,.72)}
#app .rls.o.r .rlback,#app .rls.o.b .rlback{color:rgba(255,255,255,.72)}
#app .rls.o{min-height:38px}

/* BUILD 118:轮盘结果牌 —— 盖在轮盘中间的内锥上(外圈号码和球照样看得见);自动连转时外圈 3 秒倒数 */
#app .rlmid.plq{width:var(--hub,150px);height:var(--hub,150px);border-radius:50%;justify-content:center;gap:0;padding:6px;box-sizing:border-box;text-align:center;
  background:radial-gradient(circle at 50% 32%,#232a4a 0%,#0c1024 72%);box-shadow:0 0 0 2px rgba(212,175,55,.8),0 8px 22px rgba(0,0,0,.65);animation:plqin .38s cubic-bezier(.2,.9,.3,1.3) both}
#app .rlmid.plq.win{box-shadow:0 0 0 2.5px #5ff5b1,0 0 26px rgba(95,245,177,.5),0 8px 22px rgba(0,0,0,.65)}
#app .rlmid.plq.lose{box-shadow:0 0 0 2.5px #ff6b8a,0 0 22px rgba(255,61,113,.35),0 8px 22px rgba(0,0,0,.65)}
#app .rlmid.plq em{font-style:normal;font-family:var(--display);font-size:10px;letter-spacing:.14em;color:rgba(200,208,232,.7);line-height:1.1}
#app .rlmid.plq b{font-size:calc(var(--hub,150px) * .3);line-height:.95;text-shadow:0 2px 10px rgba(0,0,0,.9)}
#app .rlmid.plq s{text-decoration:none;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;line-height:1.2}
#app .rlmid.plq s.c-red{color:#ff5d6e}#app .rlmid.plq s.c-black{color:#c9cfe6}
#app .rlmid.plq strong{font-family:var(--num);font-weight:800;font-size:calc(var(--hub,150px) * .15);line-height:1.05;margin-top:2px;font-variant-numeric:tabular-nums}
#app .rlmid.plq.win strong{color:#5ff5b1;text-shadow:0 0 12px rgba(95,245,177,.55)}
#app .rlmid.plq.lose strong{color:#ff7d95}
#app .rlmid.plq.push strong{color:#e6e9ff}
#app .rlmid.plq small{font-family:var(--display);font-size:9.5px;line-height:1.2;color:rgba(200,208,232,.75);max-width:86%;margin-top:2px}
#app .rlmid .rlring{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);transform:rotate(-90deg);display:none;overflow:visible}
#app .rlmid.cd .rlring{display:block}
#app .rlmid .rlring circle{fill:none;stroke:#f3dd8e;stroke-width:3;stroke-linecap:round;stroke-dasharray:296;stroke-dashoffset:0;opacity:.9}
#app .rlmid.cd .rlring circle{animation:plqcd var(--cd,3000ms) linear forwards}
@keyframes plqin{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes plqcd{to{stroke-dashoffset:296}}
@media(prefers-reduced-motion:reduce){#app .rlmid.plq{animation:none}}

/* BUILD 119:企鹅冲刺四档难度 —— 档位键两行(名字 + 多少薄冰 · 最高几倍),手指好按 */
#app .pgtabs4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#app .pgtabs4 .sctab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:46px;padding:6px 4px;line-height:1.1}
#app .pgtabs4 .sctab b{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.04em}
#app .pgtabs4 .sctab i{font-style:normal;font-family:var(--display);font-size:8.5px;letter-spacing:.01em;opacity:.78;white-space:nowrap}
#app .pgtabs4 .sctab.on i{opacity:.9}
@media(max-width:360px){#app .pgtabs4 .sctab b{font-size:12px}#app .pgtabs4 .sctab i{font-size:8px}}