/* BUILD 229(老板:「成品没有参考图那么好看,左右都空空,闪电没有电劈下来」):
   照参考图补齐 —— 左「最近结果」/ 右「我的注」两块深蓝玻璃金边面板、托盘上方紫色龙纹骰盅;
   闪电鱼虾蟹:一道真闪电从画面顶劈到格子 + 落点爆光 + 格子四周电流 + 两边天上偶尔打闪。素材都是 GPT 画的(fs-dome / lf-bolt / lf-burst / lf-arc)。 */
#app .fswrap .fbx.v4{container-type:inline-size;gap:1.4%;align-items:stretch;justify-content:center}
#app .fswrap .fb4wrap{flex:1 1 auto;min-width:0;min-height:0;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-top:5.2vh}
#app .fswrap .fb4wrap .fb4{height:100%}
#app .fswrap .fb4dome{position:absolute;top:0;left:50%;transform:translateX(-50%);height:12.5vh;width:auto;z-index:4;pointer-events:none;filter:drop-shadow(0 1.2vh 1.4vh rgba(0,0,0,.65))}

/* 两边面板 */
#app .fswrap .fb4side{flex:0 0 clamp(128px,15.5%,260px);display:flex;flex-direction:column;min-height:0;overflow:hidden;margin:5.2vh 0 .4vh;padding:1.4vh 1.2vh;
  background:linear-gradient(180deg,rgba(16,26,58,.94),rgba(7,11,30,.94));border:1.5px solid #b98a3a;border-radius:1.8vh;
  box-shadow:inset 0 0 0 1px rgba(255,222,150,.14),inset 0 2vh 3vh rgba(120,150,255,.07),0 1.2vh 2.6vh rgba(0,0,0,.55);color:#e9eefc}
#app .fswrap .fb4side h4{margin:0 0 1.1vh;display:flex;align-items:baseline;justify-content:space-between;gap:6px;font:800 clamp(10px,1.9vh,15px)/1.2 var(--display);letter-spacing:.14em;color:#e8c77a;text-transform:uppercase}
#app .fswrap .fb4side h4 .n{font-style:normal;font-family:var(--num);letter-spacing:0;color:#fff3cf}
#app .fswrap .fb4hist{flex:1;min-height:0;display:flex;flex-direction:column;gap:.7vh;overflow:hidden}
#app .fswrap .fb4hist .hr{position:relative;display:flex;align-items:center;gap:.6vh;padding:.45vh;border-radius:1vh;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
#app .fswrap .fb4hist .hr:first-child{border-color:rgba(232,199,122,.55);background:rgba(232,199,122,.08)}
#app .fswrap .fb4hist .hr span{flex:1;height:4.4vh;display:grid;place-items:center;border-radius:.7vh;background:rgba(255,248,232,.07)}
#app .fswrap .fb4hist img.cut{height:3.3vh!important;width:auto!important;max-width:100%!important;object-fit:contain}
#app .fswrap .fb4hist .hr.tri span{background:rgba(255,200,80,.16)}
#app .fswrap .fb4hist .hr span.zap{background:rgba(90,150,255,.32);box-shadow:inset 0 0 0 1px #8cc0ff,0 0 1.2vh rgba(90,160,255,.8)}
#app .fswrap .fb4hist .hr em{position:absolute;right:.4vh;top:-.6vh;font:900 clamp(8px,1.4vh,11px)/1.3 var(--num);font-style:normal;color:#fff;padding:0 .5vh;border-radius:99px;background:linear-gradient(135deg,#3b6cff,#8a3bff)}
#app .fswrap .fb4hist .hr.none{justify-content:center;color:#6b7896}
#app .fswrap .fb4mine{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:.6vh}
#app .fswrap .fb4mine .mr{display:flex;align-items:center;gap:1vh;padding:.35vh .5vh;border-radius:1vh;background:rgba(255,255,255,.03)}
#app .fswrap .fb4mine .mr img.cut{height:4.3vh!important;width:4.6vh!important;object-fit:contain;flex:0 0 auto}
#app .fswrap .fb4mine .mr b{flex:1;text-align:center;padding:.6vh .4vh;border-radius:.8vh;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.12);font:800 clamp(11px,2.1vh,16px)/1.1 var(--num);color:#8f9bb8}
#app .fswrap .fb4mine .mr.on b{color:#2b1a00;background:linear-gradient(180deg,#ffe48a,#e3a21a);border-color:#fff3c0;box-shadow:0 0 1.2vh rgba(255,200,80,.45)}
#app .fswrap .fb4pairs{margin-top:1vh;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:.7vh .8vh;border-radius:1vh;border:1px dashed rgba(232,199,122,.45);font:700 clamp(9px,1.6vh,12px)/1.2 var(--display);color:#e8c77a}
#app .fswrap .fb4pairs b{font-family:var(--num);color:#fff3cf}
@container (max-width:980px){#app .fswrap .fb4side{display:none}#app .fswrap .fb4dome{height:9vh}#app .fswrap .fb4wrap{padding-top:3.6vh}}

/* ⚡ 闪电鱼虾蟹 */
#app #lfishview .fb4{box-shadow:0 0 0 1px rgba(140,190,255,.45),0 0 5vh rgba(70,120,255,.45),0 1.6vh 3.5vh rgba(0,0,0,.55)}
#app #lfishview .fb4side{border-color:#6f8fe0;box-shadow:inset 0 0 0 1px rgba(150,190,255,.18),0 0 2.4vh rgba(70,120,255,.25),0 1.2vh 2.6vh rgba(0,0,0,.55)}
#app #lfishview .fb4side h4{color:#9fc4ff}
.lfbolt{position:absolute;top:0;transform:translateX(-50%);width:auto;max-width:none;pointer-events:none;z-index:60;animation:lfboltA 1s linear both}
@keyframes lfboltA{0%{opacity:0;clip-path:inset(0 0 100% 0)}7%{opacity:1;clip-path:inset(0 0 0 0)}13%{opacity:.3}19%{opacity:1}27%{opacity:.45}34%{opacity:1}100%{opacity:0;clip-path:inset(0 0 0 0)}}
.lfburst{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:61;animation:lfburstA 1.1s ease-out both}
@keyframes lfburstA{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}10%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
.lfstrike{background:radial-gradient(circle at 50% 30%,rgba(215,232,255,.7),rgba(80,120,255,.18) 45%,transparent 72%)!important}
/* 被劈的格子:四周电流一直跑 + 发蓝光;倍数大大的 */
#app .fswrap .fbx.v4 .struck::before{content:"";position:absolute;inset:-10% -5%;border-radius:inherit;pointer-events:none;z-index:8;
  background:url("lf-arc.webp?v=984fb00d") repeat-x 0 0/auto 36%,url("lf-arc.webp?v=984fb00d") repeat-x 0 100%/auto 36%;opacity:1;filter:none;animation:lfarc 1.1s linear infinite}
@keyframes lfarc{to{background-position:-420px 0,420px 100%}}
#app .fswrap .fbx.v4 .fs4t.struck{box-shadow:0 0 0 .45vh #8cc0ff,0 0 4vh rgba(90,160,255,.95),0 .5vh 0 #2a2a6b!important}
#app .fswrap .fbx.v4 .fs4t .bolt{font-size:clamp(14px,3.6vh,28px);padding:.5vh 1.3vh;top:6%;left:6%;letter-spacing:.02em;
  background:linear-gradient(135deg,#2f6bff,#8a3bff 60%,#d14bff);box-shadow:0 0 0 2px #cfe4ff,0 0 2.4vh #6aa8ff,0 0 5vh rgba(120,90,255,.6);text-shadow:0 0 .8vh #fff}
#app .fswrap .fbx.v4 .fs4b .bolt{font-size:clamp(10px,2.1vh,15px);top:-2.8vh}
#app .fswrap .fbx.v4 .fs4t.zapnow{animation:lfshakeT .55s ease-out}
#app .fswrap .fbx.v4 .fs4b.zapnow{animation:lfshakeB .55s ease-out}
@keyframes lfshakeT{0%,100%{transform:none;filter:none}10%{transform:translate(-.6vh,.3vh);filter:brightness(2.2)}25%{transform:translate(.6vh,-.3vh)}40%{transform:translate(-.4vh,.2vh);filter:brightness(1.4)}60%{transform:translate(.3vh,0)}}
@keyframes lfshakeB{0%,100%{transform:translate(-50%,-50%);filter:none}10%{transform:translate(-56%,-46%);filter:brightness(2.2)}25%{transform:translate(-44%,-54%)}40%{transform:translate(-53%,-48%);filter:brightness(1.4)}60%{transform:translate(-48%,-50%)}}
/* 两边天上偶尔打一下闪电(一直有,下注时也看得到) */
#app #lfishview .lfamb{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#app #lfishview .lfamb img{position:absolute;top:-6%;height:68%;width:auto;opacity:0}
#app #lfishview .lfamb .a1{left:4%;animation:lfamb 7s linear 1.2s infinite}
#app #lfishview .lfamb .a2{right:3%;transform:scaleX(-1);animation:lfamb 9.5s linear 4.5s infinite}
@keyframes lfamb{0%,90%{opacity:0}91%{opacity:.9}92.5%{opacity:.15}94%{opacity:.75}96%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){.lfbolt,.lfburst,#app .fswrap .fbx.v4 .struck::before,#app #lfishview .lfamb img,#app .fswrap .fbx.v4 .zapnow{animation:none!important}#app #lfishview .lfamb{display:none}}
#app #lfishview{display:flex;flex-direction:column;min-height:0}
#app .fswrap .fb4mine{justify-content:flex-start;gap:1.1vh}
#app .fswrap .lfzapbox{position:absolute;inset:0;overflow:hidden;pointer-events:none}