/* ════════════════════════════════════════════════════════════════════
 * BUILD 127 · 鱼虾蟹台面照老板那张街机台面图重做
 *   木框 + 白瓷砖 + 红格线;中间 2 × 3 六个大格,外面一圈 15 个双图案格(左 3 · 右 3 · 底 9);
 *   图案是木版印(单色油墨、三阶浓淡);骰盅是白瓷碗。
 * ════════════════════════════════════════════════════════════════════ */
#app .fswrap{--fk-red:#b3201e;--fk-tile:#f7f2e6;--fk-tile2:#ece4d0;--fk-wood1:#8a5325;--fk-wood2:#5a3212;--fk-wood3:#c08a4c}

/* ── 右栏整块:木框 ─────────────────────────────────────────── */
#app .fswrap .fsboard{display:flex;padding:0;gap:0;border:0;border-radius:14px;background:none;box-shadow:none;align-items:stretch;justify-content:stretch}
#app .fbx{flex:1 1 auto;min-width:0;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,3.9fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto auto;
  grid-template-areas:"l m r" "b b b" "c c c";
  gap:0;padding:clamp(6px,1.6vh,11px);border-radius:14px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),
    repeating-linear-gradient(91deg,rgba(0,0,0,.08) 0 1px,transparent 1px 13px),
    linear-gradient(180deg,var(--fk-wood3),var(--fk-wood1) 18%,var(--fk-wood2) 82%,#3c200a);
  box-shadow:inset 0 1px 0 rgba(255,230,190,.45),inset 0 -2px 0 rgba(0,0,0,.4),0 0 0 1px #2a1606,0 10px 24px rgba(0,0,0,.55)}
/* 里面那块白瓷砖面(红格线用 gap 露出红底画) */
#app .fbx > .fbx-side,#app .fbx > .fbx-mid,#app .fbx > .fbx-bot{background:var(--fk-red)}
#app .fbx-side{grid-area:l;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:2px;padding:2px 0 0 2px;border-radius:6px 0 0 0}
#app .fbx-side.r{grid-area:r;padding:2px 2px 0 0;border-radius:0 6px 0 0}
#app .fbx-mid{grid-area:m;display:flex;flex-direction:column;gap:0;padding:2px 2px 0;min-height:0}
#app .fbx-six{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px}
#app .fbx-bot{grid-area:b;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:2px;padding:2px;height:clamp(40px,12.5vh,60px);border-radius:0 0 6px 6px}
/* 两条赔率字带(照参考图:大格下面一条、底排下面一条) */
#app .fbx-cap{flex:0 0 auto;text-align:center;font-family:var(--display);font-weight:700;letter-spacing:.14em;
  font-size:clamp(8px,1.9vh,10.5px);line-height:1;padding:3px 4px;background:var(--fk-tile2);color:#5a2a14;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .fbx-cap.bot{grid-area:c;margin:0;background:transparent;color:#ffe6bf;padding:4px 4px 0;text-shadow:0 1px 0 rgba(0,0,0,.6)}

/* ── 瓷砖格(大格 / 双图案格共用)──────────────────────────── */
#app .fswrap .fscell,#app .fswrap .fspair{all:unset;box-sizing:border-box;position:relative;cursor:pointer;
  display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;
  background:
    radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.9),transparent 60%),
    linear-gradient(180deg,var(--fk-tile),var(--fk-tile2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -2px 3px rgba(120,90,40,.18);
  transition:transform .12s ease,filter .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
#app .fswrap .fscell:focus-visible,#app .fswrap .fspair:focus-visible{outline:2px solid #ffd166;outline-offset:-3px}
#app .fswrap .fscell:active:not(:disabled),#app .fswrap .fspair:active:not(:disabled){transform:scale(.965)}
#app .fswrap .fscell:disabled,#app .fswrap .fspair:disabled{cursor:default}

/* 大格:图案占满,左下角小字名字 */
#app .fswrap .fscell{flex-direction:column;padding:2px}
#app .fswrap .fscell .art{flex:1 1 auto;min-height:0;width:100%;display:grid;place-items:center;height:auto}
#app .fswrap .fscell .art svg{width:auto;height:min(92%,78px);max-width:92%;aspect-ratio:1;display:block}
#app .fswrap .fscell .nm{position:absolute;left:5px;bottom:3px;font-family:var(--display);font-weight:700;font-size:clamp(9px,2.1vh,12px);
  letter-spacing:.04em;color:#6b3a1a;opacity:.8;line-height:1}
#app .fswrap .fscell .nm i{display:none}
#app .fswrap .fscell .pool{position:absolute;right:5px;bottom:3px;font-family:var(--num);font-size:8.5px;color:#8a6a4a;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 双图案格:两个小图案一上一下错开(像参考图) */
#app .fswrap .fspair{padding:0;flex-direction:row}
#app .fswrap .fspair .pa,#app .fswrap .fspair .pb{display:grid;place-items:center;width:58%;aspect-ratio:1;max-height:88%}
#app .fswrap .fspair .pa{transform:translate(12%,-14%)}
#app .fswrap .fspair .pb{transform:translate(-12%,14%)}
#app .fswrap .fspair svg{width:100%;height:100%;display:block}
#app .fbx-bot .fspair .pa,#app .fbx-bot .fspair .pb{width:50%}
#app .fswrap .fspair .pool{display:none}

/* 中奖标 / 我押的筹码 */
#app .fswrap .fscell .hit,#app .fswrap .fspair .hit{position:absolute;left:3px;right:auto;top:3px;width:auto;padding:1px 6px;border-radius:99px;font-family:var(--num);font-weight:800;font-size:10px;
  color:#fff;background:#c3202b;box-shadow:0 1px 3px rgba(0,0,0,.35);line-height:1.3;z-index:5}
#app .fswrap .fscell .hit:empty,#app .fswrap .fspair .hit:empty{display:none}
#app .fswrap .fscell .my,#app .fswrap .fspair .my{position:absolute;right:3px;top:3px;left:auto;min-width:22px;padding:2px 5px;border-radius:99px;
  font-family:var(--num);font-weight:800;font-size:10px;line-height:1.2;text-align:center;color:#2a1d05;
  background:radial-gradient(circle at 40% 35%,#ffe9a6,#e0a92a 70%);border:1.5px solid #fff4cf;box-shadow:0 2px 5px rgba(0,0,0,.4);z-index:6;transform:none}
#app .fswrap .fspair .my{font-size:9px;min-width:18px;padding:1px 4px;right:1px;top:1px}
#app .fswrap .fscell .my:empty,#app .fswrap .fspair .my:empty{display:none}

/* 状态:押了(金边)· 摆着还没确认(虚线金边)· 中了(绿光)· 没中(变淡)*/
#app .fswrap .fscell.mine,#app .fswrap .fspair.mine{box-shadow:inset 0 0 0 2px #e0a92a,inset 0 0 14px rgba(224,169,42,.35)}
#app .fswrap .fscell.staged,#app .fswrap .fspair.staged{border:0 !important;box-shadow:inset 0 0 0 2px rgba(224,169,42,.95),inset 0 0 0 4px rgba(255,255,255,.7),inset 0 0 16px rgba(224,169,42,.35) !important}
#app .fswrap .fscell.won,#app .fswrap .fspair.won{box-shadow:inset 0 0 0 3px #1fae5b,inset 0 0 22px rgba(31,174,91,.45);animation:fkwon 1s ease-out both}
#app .fswrap .fscell.lost,#app .fswrap .fspair.lost,#app .fswrap .fbx .fscell.lost:disabled:disabled,#app .fswrap .fbx .fspair.lost:disabled{opacity:1;filter:saturate(.55) brightness(.9) contrast(.9)}
@keyframes fkwon{0%{filter:brightness(1.35)}100%{filter:none}}
#app .fswrap[data-phase="rolling"] .fbx .fscell,#app .fswrap[data-phase="rolling"] .fbx .fspair{filter:brightness(.93)}

/* ── 左栏:木桌上一个白瓷骰盅 ──────────────────────────────── */
#app .fswrap .fsstage{background:
    radial-gradient(70% 55% at 50% 45%,rgba(255,236,200,.16),transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 8px),
    linear-gradient(180deg,#6d3d18,#3e200a);
  border:1px solid #2a1606;box-shadow:inset 0 1px 0 rgba(255,230,190,.3),0 8px 18px rgba(0,0,0,.5)}

#app .fswrap .fsdie{background:linear-gradient(180deg,#fffdf6,#efe6cf);border-radius:9px;position:relative}
#app .fswrap .fsdie svg{width:86%;height:86%}
#app .fswrap .fsdie .pip{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:#c3202b;color:#fff;
  font:700 8.5px/14px var(--num);text-align:center;text-decoration:none;box-shadow:0 0 0 1.5px #fff}
/* 顶栏最近结果:三颗小木版图 */
#app .lstop .fshist b{display:inline-flex;gap:0;padding:2px 3px;border-radius:6px;background:var(--fk-tile);box-shadow:inset 0 0 0 1px rgba(179,32,30,.5)}
#app .lstop .fshist b svg{width:15px;height:15px}
#app .lstop .fshist b u{display:none}
#app .fswrap .fsstats span svg{background:var(--fk-tile);border-radius:4px}

@media(prefers-reduced-motion:reduce){#app .fswrap .fscell.won,#app .fswrap .fspair.won{animation:none}}
/* 摆着还没确认的筹码:虚线金圈(压过上面那条金色实心的) */
#app .fswrap .fscell .my.pend,#app .fswrap .fspair .my.pend{background:rgba(255,250,235,.95);color:#8a5a00;border:1.5px dashed #c98a00;box-shadow:0 0 8px rgba(224,169,42,.45)}
/* 结算横幅:标签不被挤掉(「中了一部分」字多一点) */
#app .fswrap .fsres em{flex:0 0 auto;white-space:nowrap}
#app .fswrap .fsres i{flex:1 1 auto}

/* ════════════════════════════════════════════════════════════════════
 * BUILD 127 · 轮盘:照老板参考图的真台面 —— 绿绒台呢 + 白线格;号码是红 / 黑椭圆徽章(字朝上,不像参考图那样侧躺)
 *   筹码放在格子右下角,号码不再被挤到一边(以前押了 17 号,「17」会被推到左边和 14 挨在一起,看成「1417」)
 * ════════════════════════════════════════════════════════════════════ */
#app .rlwrap{--felt1:#1f7a45;--felt2:#0f4d2a;--felt3:#0a3a1f;--fline:rgba(255,255,255,.82)}
#app .rlwrap .rlboard{background:
    radial-gradient(90% 80% at 45% 35%,rgba(255,255,255,.07),transparent 60%),
    repeating-linear-gradient(45deg,rgba(0,0,0,.035) 0 2px,transparent 2px 4px),
    radial-gradient(130% 120% at 50% 40%,var(--felt1),var(--felt2) 65%,var(--felt3));
  border:0;box-shadow:inset 0 0 0 2px #6b4520,inset 0 0 0 5px #3e2410,inset 0 0 0 6px rgba(230,190,110,.55),inset 0 0 40px rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.5);
  padding:10px}
/* 所有台面格:透明底 + 白线框 */
#app .rlwrap .rls:not(.in){background:transparent;border:1.5px solid var(--fline);border-radius:3px;box-shadow:none;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45)}
#app .rlwrap .rlgrid,#app .rlwrap .rlcols,#app .rlwrap .rldoz,#app .rlwrap .rleven{gap:0}
#app .rlwrap .rlgrid .rls:not(.in){border-radius:0;margin:0 -0.75px -1.5px 0}
/* 号码:红 / 黑椭圆徽章,字朝上 */
#app .rlwrap .rlgrid .rls > span,#app .rlwrap .rlzero .rls > span{display:grid;place-items:center;width:min(78%,34px);height:min(74%,30px);
  border-radius:50%;font-family:var(--num);font-weight:800;font-size:clamp(11px,3.2vh,15px);letter-spacing:-.02em;transform:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4)}
#app .rlwrap .rlgrid .rls.r > span{background:radial-gradient(80% 70% at 40% 30%,#ff4d5c,#c8102e 60%,#8a0718)}
#app .rlwrap .rlgrid .rls.b > span{background:radial-gradient(80% 70% at 40% 30%,#4a4d5a,#16171d 60%,#050507)}
#app .rlwrap .rlgrid .rls{display:grid;place-items:center}
/* 0:绿底白框,椭圆里写 0(竖着的那一条,字还是正的) */
#app .rlwrap .rlzero .rls{writing-mode:horizontal-tb;background:linear-gradient(180deg,#1faa5f,#0d6b37) !important;border-radius:40px 0 0 40px !important;display:grid;place-items:center}
#app .rlwrap .rlzero .rls > span{background:transparent;box-shadow:none;border:1.5px solid rgba(255,255,255,.85);width:26px;height:40px;font-size:15px}
/* 外围:白字,红 / 黑用菱形色块(参考图) */
#app .rlwrap .rls.o{color:#fff;font-family:var(--display);font-weight:800;letter-spacing:.04em;background:transparent !important}
#app .rlwrap .rls.o .rlback{color:rgba(255,255,255,.7)}
#app .rlwrap .rls.o.r > span,#app .rlwrap .rls.o.b > span{display:inline-grid;place-items:center;width:34px;height:22px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  font-size:0;background:#c8102e}
#app .rlwrap .rls.o.b > span{background:#111217}
#app .rlwrap .rls.o.r > span .rlback,#app .rlwrap .rls.o.b > span .rlback{display:none}
/* 押了 / 摆着 / 中了 / 开出的号:在白线格上加亮框 */
#app .rlwrap .rls.has:not(.in){box-shadow:inset 0 0 0 2px #ffd166,0 0 10px rgba(255,209,102,.45);z-index:1}
#app .rlwrap .rls.hit:not(.in){box-shadow:inset 0 0 0 3px #fff,0 0 18px rgba(255,255,255,.8);z-index:2}
#app .rlwrap .rls.won:not(.in){box-shadow:inset 0 0 0 3px #5ff5b1,0 0 16px rgba(95,245,177,.65);z-index:2}
#app .rlwrap .rls:disabled:not(.in){opacity:1}
/* 号码格上的筹码:缩到右下角,不挡号码 */
#app .rlwrap .rlgrid .rls .rlchip,#app .rlwrap .rlzero .rls .rlchip{left:auto;top:auto;right:1px;bottom:1px;width:19px;height:19px;font-size:7.5px;transform:scale(0)}
#app .rlwrap .rlgrid .rls.has .rlchip,#app .rlwrap .rlzero .rls.has .rlchip,
#app .rlwrap .rlgrid .rls.staged .rlchip,#app .rlwrap .rlzero .rls.staged .rlchip{transform:scale(1)}
/* 内围小圆点在绿绒上换成白色虚圈 */
#app .rlwrap .rls.in{background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.5)}
#app .rlwrap .rls.in.t,#app .rlwrap .rls.in.x,#app .rlwrap .rls.in.q{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08)}
#app .rlwrap .rls.in::after{color:rgba(255,255,255,.8)}
#app .rlwrap .rlhint{color:rgba(220,235,225,.6)}

/* 左栏的盘:整块暗绿台呢当背景,椭圆盘贴着上面放 */
#app .rlwrap .rlscene{background:radial-gradient(90% 70% at 50% 45%,#16553a,#0b3020 70%,#07231a);border:1px solid rgba(230,190,110,.35)}
#app .rlwrap .rlscene canvas{position:absolute;inset:0}
/* 结果牌:改成贴着木锥的椭圆(和盘同一个透视),只写号码 + 红 / 黑 + 输赢;细账在下面的结果行 */
#app .rlwrap .rlmid.plq{width:var(--hub,120px);height:calc(var(--hub,120px) * .62);border-radius:50%;padding:2px;transform:translate(-50%,-50%)}
#app .rlwrap .rlmid.plq em,#app .rlwrap .rlmid.plq small{display:none}
#app .rlwrap .rlmid.plq b{font-size:calc(var(--hub,120px) * .26)}
#app .rlwrap .rlmid.plq strong{font-size:calc(var(--hub,120px) * .13)}
#app .rlwrap .rlmid.plq s{font-size:9px}
#app .rlwrap .rlmid:not(.plq){display:none}   /* 下注时中间那条「—」不要(看起来像木锥上一道白杠) */
/* 内围小圆点在台呢上淡一点,押了才亮 —— 不然满台都是虚线圈 */
#app .rlwrap .rls.in:not(.has):not(.staged):not(.won){opacity:.45}
#app .rlwrap .rls.in:not(.has):not(.staged):hover{opacity:1}

/* ── 轮盘整块照参考图:一整张绿台呢,左边轮盘、右边下注盘,两边等高、上下对齐;别的东西都不挤它们 ── */
#app .lsgrid.rlg{grid-template-columns:minmax(0,36%) minmax(0,1fr);gap:0;align-items:stretch;border-radius:16px;padding:8px 10px 8px 6px;
  background:
    radial-gradient(60% 90% at 20% 50%,rgba(255,255,255,.08),transparent 60%),
    repeating-linear-gradient(45deg,rgba(0,0,0,.03) 0 2px,transparent 2px 4px),
    radial-gradient(140% 120% at 50% 45%,#1f7a45,#0f4d2a 65%,#0a3a1f);
  box-shadow:inset 0 0 0 2px #6b4520,inset 0 0 0 5px #3e2410,inset 0 0 0 6px rgba(230,190,110,.55),inset 0 0 50px rgba(0,0,0,.45),0 10px 24px rgba(0,0,0,.5)}
#app .rlwrap .lsside{position:relative;display:flex;flex-direction:column;min-height:0;gap:0}
#app .rlwrap .rlscene{flex:1 1 auto;background:none !important;border:0 !important;box-shadow:none !important;border-radius:0}
#app .rlwrap .rlscene::after{display:none}
#app .rlwrap .rlright{justify-content:stretch}
#app .rlwrap .rlboard{background:none !important;box-shadow:none !important;padding:4px 0 4px 4px;
  grid-template-columns:clamp(34px,6.5%,48px) minmax(0,1fr) clamp(38px,7.5%,54px);
  grid-template-rows:minmax(0,3.2fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"zero grid cols" ". doz ." ". even .";gap:0}
#app .rlwrap .rlzero{margin-right:-1.5px}
#app .rlwrap .rlcols{margin-left:-1.5px}
#app .rlwrap .rldoz{margin-top:-1.5px}#app .rlwrap .rleven{margin-top:-1.5px}
#app .rlwrap .rldoz .rls,#app .rlwrap .rleven .rls,#app .rlwrap .rlcols .rls{border-radius:0;margin:0 -1.5px 0 0}
#app .rlwrap .rlcols .rls{margin:0 0 -1.5px 0}
#app .rlwrap .rlzero .rls{border-radius:50% 0 0 50% / 18% 0 0 18% !important}
/* 整列那三格照参考图写「2:1」,小字说明藏起来(读屏 / 文字还在) */
#app .rlwrap .rlcols .rls > span{font-size:0}
#app .rlwrap .rlcols .rls > span::before{content:'2:1';font-family:var(--num);font-weight:800;font-size:clamp(11px,3vh,14px);letter-spacing:.02em}
#app .rlwrap .rldoz .rls,#app .rlwrap .rleven .rls{font-size:clamp(11px,3.2vh,15px)}
#app .rlwrap .rls.o .rlback{font-size:8px}
/* 结果行:不占位置,浮在轮盘下沿;没结果时不显示那条虚线空行 */
#app .rlwrap .lsside .resdock{position:absolute;left:4px;right:4px;bottom:2px;z-index:6;margin:0}
#app .rlwrap .lsside .resdock .resbig:not(.on){display:none}
/* 冷热号搬到下面筹码槽那一行 */
#app .rlwrap .lsrailbot .rlstats{flex:0 1 auto;min-width:0;margin:0;padding:0;background:none;border:0;box-shadow:none;display:flex;gap:8px;overflow:hidden;white-space:nowrap}
#app .rlwrap .lsrailbot .rlstats .rlsrow{display:flex;gap:2px;align-items:center}
#app .rlwrap .lsrailbot .rlstats .rlsrow b{min-width:17px;height:17px;font-size:9px;line-height:17px;padding:0 2px}
#app .rlwrap .lsrailbot .rlstats .rlsrow b u{display:none}
#app .rlwrap .lsrailbot .rlstats .rlsrow i{font-size:9px}
#app .rlwrap .lsrailbot .dkfeed{display:none}
#app .rlwrap .rlscene .dkclock{left:6px;right:auto;top:4px}
/* 号码区右边以前给街注圆点留了 26px 空位 —— 圆点拿走了,空位也拿走,0 / 号码 / 2:1 / 一打 / 红黑 全部对齐成一张台 */
#app .rlwrap .rlgrid,#app .rlwrap .rlzero{padding:0}
#app .rlwrap .rlscene .dkclock{display:none}   /* 倒计时顶栏已经有了,盘上不再压一个 */
/* 老板:「公平性如果很卡位置就拿走」—— 横屏几款的筹码槽里那行承诺码 + 公平性不放了(规则页里照样写着) */
#app .lsrailbot .scfair{display:none}
/* 结果:盘中间那块椭圆牌已经写了「开出几号 · 红黑 · 输赢」,下面那条结果行就不再盖在轮盘上 */
#app .rlwrap .lsside .resdock{display:none}

/* ════════════════════════════════════════════════════════════════════
 * BUILD 127 · 百家乐发牌:不掉帧、一张一张慢慢派
 *   每张牌只建一次 DOM;从牌靴(右上方)滑进来只动 transform / opacity,到位后 3D 翻开并轻轻抬起一下
 * ════════════════════════════════════════════════════════════════════ */
#app .bcside.p .bccards{--fx:230px;--fy:-120px}
#app .bcside.b .bccards{--fx:110px;--fy:-120px}
#app .bccard{transition:transform .62s cubic-bezier(.16,.84,.24,1),opacity .28s ease-out;will-change:transform;backface-visibility:hidden}
#app .bccard.in{animation:none}
#app .bccard.slide{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(-26deg) scale(.8);transition:none}
#app .bcflip{transition:transform .62s cubic-bezier(.35,.1,.2,1);will-change:transform}
#app .bccard.now .bcflip{transition:none}
#app .bccard.lift{animation:bclift .64s cubic-bezier(.3,.6,.3,1)}
@keyframes bclift{0%{transform:none}45%{transform:translateY(-9px) scale(1.1)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){#app .bccard,#app .bcflip{transition:none}#app .bccard.lift{animation:none}}

/* ════════════════════════════════════════════════════════════════════
 * BUILD 127 · 飞机:照 Aviator 的版式(历史倍数条 · 暗色放射光场景 · 等待进度条 · 两块下注板 · 本局投注表)
 *   颜色:场景纯黑 + 红曲线;按钮 绿下注 / 红取消 / 橙收钱;历史倍数 蓝(<2)· 紫(2–10)· 粉(≥10)
 * ════════════════════════════════════════════════════════════════════ */
#app .crwrap{--av-bg:#0b0b0d;--av-panel:#1b1c1f;--av-line:#2c2d31;--av-green:#28a909;--av-red:#cb011a;--av-orange:#d07206;
  display:flex;flex-direction:column;gap:8px;padding:6px 8px 18px;max-width:560px;margin:0 auto;width:100%;box-sizing:border-box}
#app .avhist{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 1px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
#app .avhist::-webkit-scrollbar{display:none}
#app .avhist b{flex:0 0 auto;padding:3px 9px;border-radius:12px;background:#000;font:700 12px/1.25 var(--num);letter-spacing:.01em}
#app .x1{color:#34b4ff}#app .x2{color:#a45cff}#app .x3{color:#e22bd0}
#app .avbar{display:flex;justify-content:space-between;align-items:center;padding:3px 12px;border-radius:10px 10px 0 0;margin-bottom:-8px;
  background:linear-gradient(180deg,#e59a12,#b36f06);color:#231400;font:700 11px/1.3 var(--display);letter-spacing:.06em}
#app .avscene{position:relative;height:min(64vw,300px);border-radius:0 0 18px 18px;overflow:hidden;background:#000;border:1px solid var(--av-line);border-top:0}
#app .avscene canvas{position:absolute;inset:0;display:block}
#app .avplane{position:absolute;left:0;top:0;width:96px;height:46px;opacity:0;pointer-events:none;will-change:transform;filter:drop-shadow(0 4px 8px rgba(227,22,47,.35))}
#app .avplane svg{width:100%;height:100%}
#app .avplane .avprop{animation:avspin .09s linear infinite;transform-origin:136px 36px}
@keyframes avspin{0%{transform:scaleY(1)}50%{transform:scaleY(.35)}100%{transform:scaleY(1)}}
#app .avmult{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:800 clamp(44px,15vw,74px)/1 var(--num);color:#fff;letter-spacing:-.02em;
  text-shadow:0 4px 24px rgba(0,0,0,.6);pointer-events:none;font-variant-numeric:tabular-nums}
#app .avflew{position:absolute;left:0;right:0;top:calc(50% - clamp(52px,16vw,78px));text-align:center;font:800 clamp(16px,5vw,22px)/1 var(--display);letter-spacing:.08em;color:#fff;opacity:0;pointer-events:none}
#app .avscene[data-phase="crashed"] .avmult{color:#e3162f}
#app .avscene[data-phase="crashed"] .avflew{opacity:1}
#app .avscene[data-phase="betting"] .avmult{opacity:0}
#app .avwait{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}
#app .avscene[data-phase="betting"] .avwait{display:flex}
#app .avwait .avprop{width:62px;height:62px;animation:avrot 1.1s linear infinite}
#app .avwait .avprop svg{width:100%;height:100%}
@keyframes avrot{to{transform:rotate(360deg)}}
#app .avwait b{font:700 clamp(14px,4.4vw,19px)/1.2 var(--display);color:#fff;letter-spacing:.04em;text-align:center}
#app .avwait i{display:block;width:min(46%,200px);height:6px;border-radius:4px;background:#2c2d31;overflow:hidden}
#app .avwait u{display:block;height:100%;background:#e3162f;transform-origin:left center;text-decoration:none}
#app .avtoast{position:absolute;left:50%;top:10px;transform:translate(-50%,-140%);display:flex;align-items:center;gap:12px;padding:6px 8px 6px 14px;border-radius:24px;
  background:linear-gradient(180deg,#1a7a2e,#0f5a1f);border:1px solid #3fd35e;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.5);transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .25s;z-index:5;white-space:nowrap;opacity:0}
#app .avtoast.on{transform:translate(-50%,0);opacity:1}
#app .avtoast i{display:block;font:600 10px/1.2 var(--display);opacity:.85;font-style:normal}
#app .avtoast b{font:800 16px/1.1 var(--num)}
#app .avtoast .w{background:#3fd35e;color:#07300f;border-radius:18px;padding:3px 12px;text-align:center}
/* 两块下注板 */
#app .avpanels{display:flex;flex-direction:column;gap:8px}
#app .avpanel{position:relative;background:var(--av-panel);border:1px solid var(--av-line);border-radius:14px;padding:8px 10px 10px;transition:border-color .2s,box-shadow .2s}
#app .avpanel.hide{display:none}
#app .avpanel.armed{border-color:rgba(203,1,26,.85);box-shadow:inset 0 0 0 1px rgba(203,1,26,.35)}
#app .avpanel.flying{border-color:rgba(208,114,6,.9);box-shadow:inset 0 0 0 1px rgba(208,114,6,.35)}
#app .avtabs{display:flex;justify-content:center;margin:0 auto 8px;width:max-content;background:#141518;border-radius:14px;padding:2px}
#app .avtabs button{all:unset;cursor:pointer;min-width:84px;text-align:center;padding:4px 10px;border-radius:12px;font:600 12px/1.3 var(--display);color:#9ea0a6}
#app .avtabs button.on{background:#2c2d33;color:#fff}
#app .avpm{all:unset;cursor:pointer;position:absolute;right:10px;top:8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#9ea0a6;background:#141518;font:700 15px/1 var(--num)}
#app .avpm.hide{display:none}
#app .avrow{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:10px;align-items:stretch}
#app .avamt{display:flex;flex-direction:column;gap:6px}
#app .avstep{display:flex;align-items:center;justify-content:space-between;background:#000;border-radius:18px;padding:3px 5px}
#app .avstep button{all:unset;cursor:pointer;width:24px;height:24px;border-radius:50%;border:1.5px solid #5d5f66;color:#9ea0a6;display:grid;place-items:center;font:700 15px/1 var(--num)}
#app .avstep b{font:800 17px/1 var(--num);color:#fff;font-variant-numeric:tabular-nums}
#app .avquick{display:grid;grid-template-columns:1fr 1fr;gap:5px}
#app .avquick button{all:unset;cursor:pointer;text-align:center;padding:4px 0;border-radius:10px;background:#141518;color:#8d8f95;font:600 12px/1.2 var(--num)}
#app .avquick button:active,#app .avstep button:active{filter:brightness(1.4)}
#app .armed .avstep,#app .armed .avquick{opacity:.45;pointer-events:none}
#app .avbtn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:18px;min-height:78px;
  color:#fff;text-align:center;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 4px 12px rgba(0,0,0,.35);transition:filter .15s,transform .1s}
#app .avbtn span{font:600 clamp(15px,4.6vw,20px)/1.1 var(--display);letter-spacing:.04em}
#app .avbtn b{font:700 clamp(17px,5.2vw,23px)/1.1 var(--num);font-variant-numeric:tabular-nums}
#app .avbtn small{font:500 11px/1.2 var(--display);opacity:.8}
#app .avbtn.bet{background:linear-gradient(180deg,#3cc51a,var(--av-green) 60%,#1f8a06)}
#app .avbtn.cancel{background:linear-gradient(180deg,#e61a33,var(--av-red) 60%,#a00015)}
#app .avbtn.cash{background:linear-gradient(180deg,#f0901a,var(--av-orange) 60%,#a85a02)}
#app .avbtn:active{transform:scale(.97)}
#app .avbtn:disabled{filter:grayscale(.3) brightness(.8)}
#app .avauto{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:9px;padding-top:8px;border-top:1px solid var(--av-line)}
#app .avauto.hide{display:none}
#app .avsw{display:flex;align-items:center;gap:6px;font:600 12px/1.2 var(--display);color:#c9cbd1;cursor:pointer}
#app .avsw input{position:absolute;opacity:0;pointer-events:none}
#app .avsw i{width:32px;height:18px;border-radius:10px;background:#3a3b40;position:relative;transition:background .2s}
#app .avsw i::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
#app .avsw input:checked + i{background:var(--av-green)}
#app .avsw input:checked + i::after{transform:translateX(14px)}
#app .avx{display:flex;align-items:center;gap:4px;background:#000;border-radius:14px;padding:3px 10px}
#app .avx input{all:unset;width:52px;font:700 14px/1.2 var(--num);color:#fff;text-align:right}
#app .avx span{color:#8d8f95;font:700 13px/1 var(--num)}
/* 本局投注 */
#app .avbets{background:var(--av-panel);border:1px solid var(--av-line);border-radius:14px;padding:8px 10px}
#app .avbh{display:flex;justify-content:space-between;align-items:center;font:700 13px/1.3 var(--display);color:#fff;margin-bottom:6px}
#app .avbh span{font:700 12px/1 var(--num);color:#9ea0a6}
#app .avbt,#app .avbr{display:grid;grid-template-columns:1.3fr 1fr .8fr 1fr;gap:6px;align-items:center}
#app .avbt{font:600 10px/1.3 var(--display);color:#6f7178;padding:0 8px 4px}
#app .avbl{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto}
#app .avbr{padding:6px 8px;border-radius:10px;background:#101114;font:600 12px/1.2 var(--num);color:#d9dbe0}
#app .avbr.won{background:rgba(40,169,9,.18);box-shadow:inset 0 0 0 1px rgba(63,211,94,.45)}
#app .avbr i{font-style:normal;padding:1px 6px;border-radius:9px;background:#000;font-size:11px}
#app .avbe{padding:10px;text-align:center;color:#6f7178;font:500 12px/1.4 var(--display)}
#app .crwrap .scfair{text-align:center}
@media(prefers-reduced-motion:reduce){#app .avwait .avprop,#app .avplane .avprop{animation:none}}
#app .crwrap{align-items:stretch}
#app .crwrap > *{width:auto}

/* ════════════════════════════════════════════════════════════════════
 * BUILD 127 · 企鹅冲刺:照 Penguin Rush 参考图 —— 亮蓝冰川、冰柱隔开一条条冰道、虚线圈写着跳过去值多少、
 *   企鹅脚下一块价牌、右上连胜火苗、下面一条进度条;下注板 −/+/最大、「收钱」蓝 /「继续」绿
 * ════════════════════════════════════════════════════════════════════ */
#app .pgwrap{align-items:stretch}
#app .pgscene.pq{width:auto;height:min(98vw,430px);border:0;border-radius:16px;
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.35),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 3px,transparent 3px 22px),
    linear-gradient(180deg,#5cc6f2 0%,#39a7e0 45%,#2b8fce 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 10px 24px rgba(0,0,0,.45)}
#app .pq .pqlogo{position:absolute;left:12px;top:10px;z-index:6;display:flex;flex-direction:column;line-height:.9;pointer-events:none;transform:rotate(-4deg)}
#app .pq .pqlogo b{font-family:var(--toon,var(--display));font-size:clamp(22px,7vw,32px);letter-spacing:.02em;color:#fff;-webkit-text-stroke:2px #1b5f9e;paint-order:stroke fill;text-shadow:0 3px 0 #1b5f9e,0 6px 10px rgba(0,40,80,.35)}
#app .pq .pqlogo b + b{margin-left:18px;color:#dff4ff}
#app .pq .pqstreak{position:absolute;right:10px;top:10px;z-index:6;display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:12px;background:#fff;box-shadow:0 4px 12px rgba(0,40,80,.3)}
#app .pq .pqstreak svg{width:18px;height:22px}
#app .pq .pqstreak b{font:800 20px/1 var(--num);color:#10213a}
#app .pq .pqstreak.pop{animation:pqpop .5s cubic-bezier(.2,1.4,.3,1)}
@keyframes pqpop{0%{transform:scale(.7)}100%{transform:scale(1)}}
/* 冰道:一整片占满场景,一格一条竖道,格与格之间一根冰柱 */
#app .pq .pgroad{top:0;bottom:44px;height:auto;z-index:2}
#app .pq .pgtrack{align-items:stretch;gap:0;padding:0;height:100%}
#app .pq .lane{width:clamp(88px,26vw,116px);height:100%;display:block}
#app .pq .lane .pgice,#app .pq .lane .hole,#app .pq .lane .shards{display:none}
#app .pq .lane .pillar{position:absolute;left:-9px;top:12%;bottom:-6px;width:18px;border-radius:9px 9px 4px 4px;z-index:1;
  background:linear-gradient(90deg,#b8e6fb,#ffffff 45%,#d4f0ff 70%,#9dd8f3);box-shadow:0 0 0 1px rgba(80,160,210,.35),2px 0 6px rgba(0,50,90,.2)}
#app .pq .lane .pillar::before{content:'';position:absolute;left:-6px;right:-6px;top:-10px;height:18px;border-radius:12px 12px 8px 8px;background:linear-gradient(180deg,#fff,#e8f7ff);box-shadow:0 2px 3px rgba(0,50,90,.15)}
#app .pq .lane .pillar::after{content:'';position:absolute;left:3px;right:3px;top:30%;height:40%;border-radius:4px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.7) 0 6px,transparent 6px 14px);opacity:.5}
#app .pq .lane .spot{position:absolute;left:50%;top:52%;width:72%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:2;display:grid;place-items:center;
  border:2.5px dashed rgba(255,255,255,.92);background:radial-gradient(circle at 45% 40%,rgba(80,180,240,.55),rgba(30,120,200,.55));box-shadow:inset 0 0 18px rgba(255,255,255,.18)}
#app .pq .lane .spot b{font:700 clamp(10px,3.1vw,13px)/1.1 var(--num);color:#fff;text-shadow:0 1px 2px rgba(0,40,80,.6);white-space:nowrap}
#app .pq .lane .mult{position:absolute;left:0;right:0;bottom:12%;margin:0;text-align:center;z-index:2;font:700 11px/1 var(--num);color:rgba(255,255,255,.75)}
#app .pq .lane .no{top:auto;bottom:4%;color:rgba(255,255,255,.55)}
#app .pq .lane.next .spot{animation:pqnext 1.1s ease-in-out infinite alternate;border-color:#fff}
@keyframes pqnext{from{box-shadow:inset 0 0 18px rgba(255,255,255,.18),0 0 0 0 rgba(255,255,255,.4)}to{box-shadow:inset 0 0 18px rgba(255,255,255,.3),0 0 0 8px rgba(255,255,255,0)}}
#app .pq .lane.passed .spot,#app .pq .lane.here .spot{border-style:solid;border-color:#fff;background:radial-gradient(circle at 45% 35%,#ffffff,#d8f2ff 55%,#9fd8f2)}
#app .pq .lane.passed .spot b,#app .pq .lane.here .spot b{color:#1b5f9e;text-shadow:none;opacity:0}
#app .pq .lane.passed::after{content:none}
#app .pq .lane.passed .mult{color:#fff}
#app .pq .lane.trap:not(.boom) .spot{background:radial-gradient(circle,rgba(20,60,110,.6),rgba(10,40,80,.6));border-style:solid;border-color:rgba(255,255,255,.5)}
#app .pq .lane.trap:not(.boom) .spot b{text-decoration:line-through;opacity:.6}
#app .pq .lane.trap:not(.boom) .mult{text-decoration:line-through;color:rgba(255,255,255,.5)}
#app .pq .lane .cracks{left:14%;right:14%;top:calc(52% - 36%);bottom:auto;height:auto;aspect-ratio:1;z-index:3}
#app .pq .lane.boom .spot{background:radial-gradient(circle at 50% 55%,#06243f,#0b3a63 60%,#1c6aa6);border-style:solid;border-color:#bfe6f7;animation:pqhole .6s ease-out .3s both}
@keyframes pqhole{from{transform:translate(-50%,-50%) scale(.6)}to{transform:translate(-50%,-50%) scale(1)}}
#app .pq .lane.boom .mult{animation:none}
#app .pq .lane.boom .splash i{top:52%}
/* 起点冰台 / 终点冰屋 */
#app .pq .lane.shore,#app .pq .lane.goal{width:clamp(96px,28vw,124px);height:100%;border-radius:0;background:none;box-shadow:none}
#app .pq .lane.shore .ledge{position:absolute;left:-10px;right:8px;top:62%;height:30%;border-radius:0 18px 10px 0;
  background:linear-gradient(180deg,#ffffff,#d9f2ff 40%,#9fd3ef);box-shadow:inset 0 3px 0 #fff,0 6px 12px rgba(0,50,90,.3)}
#app .pq .lane.shore .lbl,#app .pq .lane.goal .lbl{position:absolute;left:0;right:0;bottom:4%;text-align:center;color:rgba(255,255,255,.8);font-size:10px}
#app .pq .lane.goal .igloo{position:absolute;left:12%;right:12%;top:40%;aspect-ratio:1.4;border-radius:50% 50% 6px 6px/80% 80% 6px 6px;
  background:repeating-linear-gradient(180deg,#fff 0 16%,#cfe9f7 16% 18%),#fff;box-shadow:inset -6px -4px 0 rgba(150,200,230,.5),0 6px 14px rgba(0,50,90,.3)}
#app .pq .lane.goal .igloo::after{content:'';position:absolute;left:36%;right:36%;bottom:0;height:46%;border-radius:40px 40px 0 0;background:#12436e}
#app .pq .lane.goal.passed .igloo{box-shadow:0 0 0 3px #ffd23f,0 0 24px rgba(255,210,63,.8)}
/* 企鹅 + 脚下价牌 */
#app .pq .penguin{bottom:auto;top:calc(52% - 64px);width:74px;height:83px;margin-left:-37px;z-index:5;transition:left .42s cubic-bezier(.3,.8,.3,1)}
#app .pq .pqval{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);padding:4px 10px;border-radius:8px;background:#fff;color:#10213a;
  font:800 14px/1.1 var(--num);white-space:nowrap;box-shadow:0 3px 8px rgba(0,40,80,.35)}
#app .pq .penguin.crash .pqval{opacity:0;transition:opacity .3s .4s}
/* 进度条 */
#app .pq .pqprog{position:absolute;left:12px;right:12px;bottom:10px;height:24px;z-index:6;border-radius:12px;background:rgba(255,255,255,.92);box-shadow:0 3px 8px rgba(0,40,80,.3)}
#app .pq .pqprog i{position:absolute;left:14px;right:14px;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:repeating-linear-gradient(90deg,#b9c4d0 0 4px,transparent 4px 9px)}
#app .pq .pqprog i::after{content:'';position:absolute;left:0;top:0;bottom:0;width:calc(var(--k,0) * 100%);border-radius:2px;background:#2b8fce;transition:width .42s}
#app .pq .pqprog u{position:absolute;top:-4px;width:26px;height:30px;margin-left:-13px;transform:translateX(14px);transition:left .42s cubic-bezier(.3,.8,.3,1)}
#app .pq .pqprog u .pgsvg{width:100%;height:100%;animation:none}
#app .pq .pqprog{--pad:14px}
#app .pq .pqprog u{left:0}
/* 下注板(暗色,照参考图) */
#app .pqpanel{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;background:#15171c;border:1px solid #262a32}
#app .pqlbl{font:700 13px/1.2 var(--display);color:#fff;letter-spacing:.04em}
#app .pqbet{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;border-radius:12px;background:#0c0d10;border:1px solid #262a32}
#app .pqbet .cur{width:20px;height:20px;flex:0 0 auto;padding-right:10px;border-right:1px solid #2c3038;box-sizing:content-box}
#app .pqbet .cur svg{width:20px;height:20px;display:block}
#app .pqbet > b{flex:1 1 auto;font:700 18px/1 var(--num);color:#fff;font-variant-numeric:tabular-nums}
#app .pqbtns{display:flex;background:#2a2d35;border-radius:10px;overflow:hidden}
#app .pqbtns button{all:unset;cursor:pointer;min-width:42px;padding:9px 10px;text-align:center;color:#fff;font:800 17px/1 var(--num)}
#app .pqbtns button#pgMax{font:800 13px/1 var(--display);min-width:48px}
#app .pqbtns button + button{border-left:1px solid #3a3e48}
#app .pqbtns button:disabled{opacity:.35;cursor:default}
#app .pqact{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#app .pqact .scbtn{margin:0;border-radius:10px;min-height:52px;font-family:var(--display);font-weight:800;font-size:17px;color:#fff;text-shadow:none;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
#app .pqact .scbtn.cash{background:linear-gradient(180deg,#34b6ff,#1a8fe0);display:block !important}
#app .pqact .scbtn.cash.hide{display:block !important}
#app .pqact .scbtn#pgHop{background:linear-gradient(180deg,#4fd13a,#2ea81d)}
#app .pqact .scbtn small{display:block;font:600 10.5px/1.3 var(--num);opacity:.85;margin-top:2px}
#app .pqact .scbtn:disabled{filter:grayscale(.2) brightness(.55);opacity:1}
#app .pqact .scbtn.hopping{animation:none}
#app .pgwrap .pgstat{display:none}
#app .pq .penguin .pgbody{display:block;width:100%;height:100%}
#app .pq .penguin .pgbody .pgsvg{width:100%;height:100%;display:block;animation:pgidle 2.4s ease-in-out infinite}
#app .pq .penguin.hopping .pgbody .pgsvg{animation:pghop .42s cubic-bezier(.3,.8,.3,1) both}
#app .pq .penguin.crash .pgbody .pgsvg{animation:pgcrash 1.1s cubic-bezier(.4,.1,.6,1) .35s both}
#app .pq .penguin.cheer .pgbody .pgsvg{animation:pgcheer .5s ease-in-out 4 alternate}
/* 老板:「1-12 / 13-24 / 25-36 下方可以往下压一压,留更多空间给 36 个号码」—— 号码区占大头,一打 / 1:1 两排压扁、小字说明拿掉 */
#app .rlwrap .rlboard{grid-template-rows:minmax(0,5fr) minmax(0,.95fr) minmax(0,.95fr)}
#app .rlwrap .rldoz .rls .rlback,#app .rlwrap .rleven .rls .rlback,#app .rlwrap .rlcols .rls .rlback{display:none}
#app .rlwrap .rldoz .rls,#app .rlwrap .rleven .rls{font-size:clamp(10px,2.8vh,13px);min-height:0;padding:0}
#app .rlwrap .rls.o.r > span,#app .rlwrap .rls.o.b > span{width:28px;height:16px}
#app .rlwrap .rlgrid .rls > span,#app .rlwrap .rlzero .rls > span{width:min(80%,40px);height:min(72%,36px);font-size:clamp(12px,3.6vh,17px)}