/* BUILD 228:鱼虾蟹新台面(老板选的方案 A2)+ 闪电鱼虾蟹 —— 木托盘 + 2 × 3 白瓷砖 + 15 个双图案小牌(压在真台子的位置)。
   素材:fs-a2-bg / fs-a2-tray / fs-a2-tile(GPT 画)· lf-bg(闪电版背景)。只管 .fbx.v4,旧的 v3 规则不动。 */
#app #fishview .fswrap{background:#120609 url("fs-a2-bg.webp?v=b52b7643") center/cover no-repeat}
#app #lfishview .fswrap{background:#0a0820 url("lf-bg.webp?v=c8cc64de") center/cover no-repeat}

#app .fswrap .fbx.v4{display:flex;align-items:center;justify-content:center;padding:0!important;margin:0;background:none!important;border:0!important;box-shadow:none!important;border-radius:0;overflow:visible}
#app .fswrap .fbx.v4::before,#app .fswrap .fbx.v4::after{display:none!important}
#app .fswrap .fb4{position:relative;height:100%;max-height:100%;aspect-ratio:17/10;max-width:100%;
  background:url("fs-a2-tray.webp?v=33e1067c") center/100% 100% no-repeat;border-radius:2.2vh;
  box-shadow:0 1.6vh 3.5vh rgba(0,0,0,.55),0 0 0 1px rgba(255,214,140,.15);padding:7.2% 7% 7.2%}
#app .fswrap .fb4g{position:relative;width:100%;height:100%;container-type:size;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:2.6%}

/* 六块白瓷砖 */
#app .fswrap .fbx.v4 .fs4t{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0;margin:0;min-width:0;min-height:0;
  border:0!important;border-radius:1.4vh;background:url("fs-a2-tile.webp?v=ea4ecf5d") center/100% 100% no-repeat!important;
  box-shadow:0 .5vh 0 #6b4a22,0 1vh 1.6vh rgba(0,0,0,.45)!important;color:#3a2410;cursor:pointer;transition:transform .12s,box-shadow .2s,filter .2s;overflow:visible;outline:0}
#app .fswrap .fbx.v4 .fs4t:active:not(:disabled){transform:translateY(.3vh)}
#app .fswrap .fbx.v4 .fs4t .art{height:auto!important;width:auto!important;flex:0 0 auto!important;padding:0!important;display:grid;place-items:center;margin-top:-8%;overflow:visible!important}
#app .fswrap .fbx.v4 .fs4t .art img.cut{width:auto;height:min(15vh,11vw);max-width:72%;object-fit:contain;filter:drop-shadow(0 .25vh 0 rgba(0,0,0,.18))}
#app .fswrap .fbx.v4 .fs4t .nm{position:absolute;bottom:8%;left:0;right:0;font-family:var(--display);font-weight:900;font-size:clamp(11px,2.5vh,17px);letter-spacing:.08em;color:#4a2c10;text-align:center;text-shadow:none}
#app .fswrap .fbx.v4 .fs4t .pool{display:none;position:absolute;top:7%;left:9%;font-family:var(--num);font-size:clamp(8px,1.5vh,10.5px);color:#8a6a3a;max-width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#app .fswrap .fbx.v4 .fs4t .my{--chip:clamp(22px,5vh,34px);left:84%;top:17%}
#app .fswrap .fbx.v4 .fs4t .my:empty,#app .fswrap .fbx.v4 .fs4b .my:empty{display:none}
#app .fswrap .fbx.v4 .fs4t .hit{position:absolute;inset:auto auto 6% 6%!important;width:auto!important;height:auto!important;writing-mode:horizontal-tb;padding:1px 8px;border-radius:99px;font:900 clamp(10px,1.9vh,13px)/1.3 var(--num);color:#fff;background:#1f9a5a;box-shadow:0 0 0 1.5px #fff}
#app .fswrap .fbx.v4 .fs4t .hit:empty,#app .fswrap .fbx.v4 .fs4b .hit:empty{display:none}
#app .fswrap .fbx.v4 .fs4t.mine{box-shadow:0 0 0 .35vh #e3a21a,0 .5vh 0 #6b4a22,0 1vh 1.6vh rgba(0,0,0,.45)!important}
#app .fswrap .fbx.v4 .fs4t.won,#app .fswrap .fbx.v4 .fs4t.hitnow{box-shadow:0 0 0 .5vh #ffd54a,0 0 3vh rgba(255,213,74,.85),0 .5vh 0 #6b4a22!important;animation:fb4glow 1.1s ease-in-out infinite;animation-delay:var(--hd,0s)}
#app .fswrap .fbx.v4 .fs4t.lost{filter:saturate(.5) brightness(.72)}
@keyframes fb4glow{50%{transform:translateY(-.4vh)}}

/* 15 块双图案小牌:压在格线 / 交叉点 / 角 / 边上 */
#app .fswrap .fbx.v4 .fs4b{position:absolute;z-index:5;transform:translate(-50%,-50%);display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;justify-content:center;gap:.4vh;
  width:clamp(44px,14.5cqw,88px);height:clamp(24px,10.5cqh,42px);min-width:0;min-height:0;padding:0 .5vh;margin:0;border-radius:1.1vh;
  background:linear-gradient(180deg,#fffdf6,#f1e4c6)!important;border:1.5px solid #c9a24a!important;box-shadow:0 .35vh 0 #7a5524,0 .6vh 1.2vh rgba(0,0,0,.45)!important;cursor:pointer;transition:transform .12s,box-shadow .2s,filter .2s;outline:0}
#app .fswrap .fbx.v4 .fs4b:active:not(:disabled){transform:translate(-50%,-46%)}
#app .fswrap .fbx.v4 .fs4b .pa,#app .fswrap .fbx.v4 .fs4b .pb{position:static!important;width:42%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;display:grid!important;place-items:center;transform:none!important;margin:0!important}
#app .fswrap .fbx.v4 .fs4b img.cut{height:76%!important;width:auto!important;max-width:100%!important;max-height:none!important;object-fit:contain;position:static!important;transform:none!important}
#app .fswrap .fbx.v4 .fs4b .p5{display:none}
#app .fswrap .fbx.v4 .fs4b .my{--chip:clamp(18px,3.8vh,26px);left:96%;top:4%}
#app .fswrap .fbx.v4 .fs4b .hit{position:absolute;inset:auto auto -1.6vh 50%!important;width:auto!important;height:auto!important;transform:translateX(-50%);padding:0 6px;border-radius:99px;font:900 clamp(8px,1.5vh,10.5px)/1.4 var(--num);color:#fff;background:#1f9a5a;box-shadow:0 0 0 1.2px #fff}
#app .fswrap .fbx.v4 .fs4b.mine{box-shadow:0 0 0 .3vh #e3a21a,0 .35vh 0 #7a5524!important}
#app .fswrap .fbx.v4 .fs4b.won,#app .fswrap .fbx.v4 .fs4b.hitnow{background:linear-gradient(180deg,#fff7d0,#ffd970)!important;box-shadow:0 0 0 .35vh #ffd54a,0 0 2.4vh rgba(255,213,74,.9)!important;z-index:7}
#app .fswrap .fbx.v4 .fs4b.lost{filter:saturate(.45) brightness(.7)}
#app .fswrap .fbx.v4 .fs4b:disabled,#app .fswrap .fbx.v4 .fs4t:disabled{cursor:default;opacity:1}
#app .fswrap .fbx.v4 [data-net]::after{content:attr(data-net);position:absolute;left:50%;top:-2.2vh;transform:translateX(-50%);padding:0 6px;border-radius:99px;font:800 clamp(8px,1.5vh,10.5px)/1.5 var(--num);white-space:nowrap;z-index:8;background:#111;color:#ffe48a}
#app .fswrap .fbx.v4 [data-netk="w"]::after{background:#1f9a5a;color:#fff}
#app .fswrap .fbx.v4 [data-netk="l"]::after{background:#7a1e1e;color:#fff}

/* ⚡ 闪电鱼虾蟹:被劈的图案 / 小牌 */
#app .fswrap .fbx.v4 .bolt{position:absolute;z-index:9;pointer-events:none;font:900 clamp(10px,2.1vh,15px)/1 var(--num);color:#fff;padding:.4vh .9vh;border-radius:99px;
  background:linear-gradient(135deg,#3b6cff,#8a3bff);box-shadow:0 0 0 1.5px #bfe0ff,0 0 1.8vh #5aa0ff;white-space:nowrap;animation:lfzap .7s ease-out both}
#app .fswrap .fbx.v4 .fs4t .bolt{top:7%;left:7%;transform:none;animation-name:lfzap2}
@keyframes lfzap2{0%{transform:scale(2.2);opacity:0;filter:brightness(3)}60%{transform:scale(.92);opacity:1}100%{transform:none}}
#app .fswrap .fbx.v4 .fs4b .bolt{top:-2.3vh;left:50%;transform:translateX(-50%);font-size:clamp(8px,1.6vh,11px);padding:.25vh .6vh}
#app .fswrap .fbx.v4 .struck{box-shadow:0 0 0 .4vh #7fb6ff,0 0 3.4vh rgba(90,160,255,.95),0 .5vh 0 #2a2a6b!important}
#app .fswrap .fbx.v4 .fs4b.struck{background:linear-gradient(180deg,#f2f7ff,#cfe0ff)!important}
#app .fswrap .fbx.v4 .struck::before{content:"";position:absolute;inset:-6%;border-radius:inherit;pointer-events:none;z-index:8;
  background:radial-gradient(circle at 50% 40%,rgba(160,210,255,.55),rgba(90,140,255,0) 60%);animation:lfflash 1.6s ease-out both}
@keyframes lfzap{0%{transform:translateX(-50%) scale(2.2);opacity:0;filter:brightness(3)}60%{transform:translateX(-50%) scale(.92);opacity:1}100%{transform:translateX(-50%) scale(1)}}
@keyframes lfflash{0%{opacity:1;filter:brightness(2.5)}100%{opacity:.35}}
.lfstrike{position:fixed;inset:0;pointer-events:none;z-index:60;background:radial-gradient(circle at 50% 30%,rgba(200,225,255,.55),rgba(80,120,255,.12) 45%,transparent 70%);animation:lfscreen .55s ease-out both}
@keyframes lfscreen{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#app .fswrap .fbx.v4 .fs4t.won,#app .fswrap .fbx.v4 .fs4t.hitnow,#app .fswrap .fbx.v4 .bolt,#app .fswrap .fbx.v4 .struck::before,.lfstrike{animation:none}}

.cart-lf{background:#0d0a20}
.lrx-lfish{--a:#5aa8ff;--a2:#d9ecff;--bg1:#0b1638;--bg2:#03060f}