/* BUILD 218 · 闪电轮盘(GM 测试)
   画面沿用轮盘(#lrwrap 有 .rlwrap,所以 games104 / 122 / 125 的类规则全部照用),这里只补:
   1. 轮盘那几条按 id 写的规则(#rlPhase / #rlBoard)换成 #lr*;
   2. 闪电层 —— 紫色 / 洋红等离子,和闪电百家乐的蓝色电光 + 金色倍数牌刻意分开。 */
#app #lroulview{display:flex;flex-direction:column;min-height:0}
#app #lrPhase{position:sticky;top:0;z-index:20;padding:6px 0 7px;margin-bottom:2px;
  background:linear-gradient(180deg,rgba(14,6,26,.92) 70%,rgba(14,6,26,0));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#app .rlwrap#lrwrap #lrPhase{position:static}
#app #lrBoard .rls[data-pool]::before{content:attr(data-pool);position:absolute;left:2px;bottom:1px;
  font-family:var(--num);font-weight:700;font-size:7.5px;line-height:1;color:rgba(255,255,255,.45);pointer-events:none;z-index:2}
#app #lrBoard .rls.in[data-pool]::before{display:none}
#app #lrBoard .rls.lost{opacity:.42}
#app #lrBoard .rls:disabled{cursor:default;opacity:1}
#app #lrBoard .rls.lost:disabled{opacity:.42}

/* ── 底图:紫色风暴大厅(GPT 画)── */
#app #lrwrap{--lv:#b44dff;--lm:#ff3fd2;--lw:#f6e8ff;
  background:radial-gradient(120% 80% at 50% 0%,rgba(120,40,190,.28),rgba(0,0,0,0) 60%),
    linear-gradient(180deg,rgba(10,4,20,.55),rgba(8,3,16,.86)),url('lroul-bg.webp?v=e50eb6f6') center/cover no-repeat,#0b0614}
#app #lrwrap .lsname.lrname i{color:var(--lv);text-shadow:0 0 8px rgba(180,77,255,.7)}
#app #lrwrap .rlscene{box-shadow:0 0 0 1px rgba(180,77,255,.28),0 0 28px rgba(140,40,220,.25)}
#app #lrwrap .rlboard{box-shadow:0 0 0 1px rgba(180,77,255,.22),0 10px 30px rgba(60,10,110,.35)}

/* 劈闪电时:其他号码暗下去,轮盘也暗一点,闪电号自己亮 */
#app #lrwrap .rls > span,#app #lrwrap #lrCanvas{transition:filter .45s}
#app #lrwrap.lrdark .rls:not(.lrlucky) > span{filter:brightness(.45) saturate(.6)}
#app #lrwrap.lrdark #lrCanvas{filter:brightness(.55) saturate(.75) hue-rotate(-12deg)}

/* ── 闪电号:号码徽章外面一圈紫色等离子环(格子本身不涂色,台面还是干净的)+ 格子下沿一个六角倍数牌 ── */
#app #lrBoard .rls.lrlucky{z-index:3;background:radial-gradient(60% 55% at 50% 50%,rgba(200,70,255,.32),rgba(120,30,200,.08) 70%,transparent) !important}
#app #lrBoard .rls.lrlucky > span{position:relative;color:#fff;
  box-shadow:0 0 0 2px #ffd6fb,0 0 0 4px #c13cff,0 0 14px 4px rgba(225,70,255,.9),0 0 30px 8px rgba(150,40,240,.55),inset 0 0 6px rgba(255,255,255,.5) !important;
  animation:lrPulse 1.3s ease-in-out infinite}
#app #lrBoard .rlzero .rls.lrlucky > span{border-color:#ffd6fb}
@keyframes lrPulse{0%,100%{box-shadow:0 0 0 2px #ffd6fb,0 0 0 4px #c13cff,0 0 12px 3px rgba(225,70,255,.85),0 0 24px 6px rgba(150,40,240,.45),inset 0 0 6px rgba(255,255,255,.5)}
  50%{box-shadow:0 0 0 2px #fff,0 0 0 5px #e04bff,0 0 20px 7px rgba(255,90,245,1),0 0 40px 12px rgba(160,50,255,.65),inset 0 0 10px rgba(255,255,255,.8)}}
#app #lrBoard .rls .lrmul{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);z-index:5;pointer-events:none;
  padding:3px 9px;font-family:var(--num);font-weight:900;font-size:clamp(10px,2.6vh,15px);line-height:1.1;color:#fff;letter-spacing:-.01em;
  clip-path:polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%);
  background:linear-gradient(180deg,#ff9cf2,#c63cff 50%,#6a10c4);text-shadow:0 1px 0 rgba(60,0,90,.85);white-space:nowrap;writing-mode:horizontal-tb}
#app #lrBoard .rls .lrmul small{font-size:.72em;font-weight:800;opacity:.9}
#app #lrBoard .rls.lrboom > span{animation:lrBoom .6s ease-out}
@keyframes lrBoom{0%{filter:brightness(3.2) saturate(1.4)}100%{filter:none}}

/* 赛道上的闪电号 */
#app #lrTk .tc.lrlucky .tcb{fill:#b23cff !important;stroke:#ffb6f6 !important;stroke-width:2.2px;filter:drop-shadow(0 0 5px #ff4fe0)}
#app #lrTk .tc.lrlucky text{fill:#fff !important}

/* ── 一道闪电(SVG 盖在 #lrwrap 上)── */
#app #lrwrap .lrzap{position:absolute;left:0;top:0;z-index:60;pointer-events:none}
#app #lrwrap .lrzap svg{display:block;overflow:visible}
#app #lrwrap .lrzap path{fill:none;stroke-linejoin:round;stroke-linecap:round}
#app #lrwrap .lrzap .g{stroke:rgba(205,70,255,.75);stroke-width:22px;filter:blur(8px);animation:lrZapG .75s ease-out forwards}
#app #lrwrap .lrzap .c{stroke:#fff6ff;stroke-width:4.5px;filter:drop-shadow(0 0 5px #ff6cf0) drop-shadow(0 0 14px #b44dff);
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:lrZapC .75s ease-out forwards}
#app #lrwrap .lrzap .t{stroke:rgba(255,150,248,.95);stroke-width:2px;stroke-dasharray:1400;stroke-dashoffset:1400;animation:lrZapC .75s .05s ease-out forwards}
#app #lrwrap .lrzap .h{fill:rgba(255,215,255,.9);filter:blur(10px);transform-box:fill-box;transform-origin:center;
  opacity:0;animation:lrZapH .75s ease-out forwards}
@keyframes lrZapC{0%{stroke-dashoffset:1400;opacity:1}28%{stroke-dashoffset:0;opacity:1}45%{opacity:.35}55%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes lrZapG{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@keyframes lrZapH{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(2.2)}}

/* ── 轮盘上方的大字 + 闪光(闪电来了 / 闪电号命中)── */
#app #lrwrap .lrstorm{position:absolute;inset:0;z-index:7;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:0;border-radius:inherit}
#app #lrwrap .lrstorm b{font-family:var(--display);font-weight:900;font-size:clamp(18px,4.2vmin,34px);letter-spacing:.12em;color:#fff;
  text-shadow:0 0 8px #ff5ae8,0 0 22px #a23cff,0 2px 0 #3a0a5c;transform:scale(.8)}
#app #lrwrap .lrstorm.in{opacity:1;background:radial-gradient(circle at 50% 40%,rgba(170,60,255,.35),rgba(20,0,40,.25) 70%);animation:lrIn .7s ease-out}
#app #lrwrap .lrstorm.in b{animation:lrWord .7s ease-out forwards}
#app #lrwrap .lrstorm.flash{opacity:1;background:transparent}
#app #lrwrap .lrstorm.flash b{display:none}
#app #lrwrap .lrstorm.flash.go{animation:lrFlash .5s ease-out forwards}
#app #lrwrap .lrstorm.hit{opacity:1;background:radial-gradient(circle at 50% 50%,rgba(255,90,240,.3),rgba(40,0,70,0) 70%);animation:lrIn .5s ease-out}
#app #lrwrap .lrstorm.hit b{animation:lrWord .6s ease-out forwards;font-size:clamp(16px,3.6vmin,28px)}
@keyframes lrIn{0%{opacity:0}30%{opacity:1}100%{opacity:1}}
@keyframes lrWord{0%{transform:scale(1.6);opacity:0;filter:blur(4px)}60%{transform:scale(.96);opacity:1;filter:none}100%{transform:scale(1);opacity:1}}
@keyframes lrFlash{0%{background:rgba(240,190,255,.55)}100%{background:rgba(240,190,255,0)}}

/* 结果:开中的是闪电号 → 轮盘框紫光一闪一闪 */
#app #lrwrap .rlscene.lrhit{animation:lrSceneHit 1s ease-in-out 3}
@keyframes lrSceneHit{0%,100%{box-shadow:0 0 0 1px rgba(180,77,255,.3),0 0 28px rgba(140,40,220,.25)}50%{box-shadow:0 0 0 2px #ff5ae8,0 0 46px rgba(220,70,255,.9)}}

/* ── 闪电号小条(轮盘左下)── */
#app #lrwrap .lrbolts{position:absolute;left:8px;bottom:8px;z-index:6;display:none;align-items:center;gap:4px;flex-wrap:wrap;max-width:calc(100% - 16px);
  padding:4px 6px;border-radius:10px;background:rgba(20,6,36,.78);border:1px solid rgba(200,90,255,.45);box-shadow:0 0 14px rgba(160,50,240,.35)}
#app #lrwrap .lrbolts.on{display:flex}
#app #lrwrap .lrbolts > i{font-style:normal;font-family:var(--display);font-weight:800;font-size:9px;letter-spacing:.06em;color:#e7c6ff;margin-right:2px}
#app #lrwrap .lrbolts span{display:flex;flex-direction:column;align-items:center;min-width:26px;padding:2px 3px;border-radius:7px;line-height:1.05;
  border:1px solid rgba(255,140,245,.65);animation:lrChipIn .4s ease-out}
#app #lrwrap .lrbolts span.r{background:linear-gradient(180deg,#b8243c,#5c0f2a)}
#app #lrwrap .lrbolts span.b{background:linear-gradient(180deg,#2a2440,#120d22)}
#app #lrwrap .lrbolts span.g{background:linear-gradient(180deg,#1f9d6a,#0d4a33)}
#app #lrwrap .lrbolts span b{font-family:var(--num);font-weight:900;font-size:14px;color:#fff}
#app #lrwrap .lrbolts span em{font-style:normal;font-family:var(--num);font-weight:800;font-size:10px;color:#ffb3f6;text-shadow:0 0 4px rgba(255,80,240,.8)}
@keyframes lrChipIn{0%{transform:scale(1.6);filter:brightness(2.5)}100%{transform:scale(1);filter:none}}

/* 赔率表里闪电那一行 */
#app #lrwrap .rlpt-g .lrptb{border-color:rgba(220,90,255,.55) !important;background:linear-gradient(180deg,rgba(150,40,230,.25),rgba(60,10,110,.2)) !important}
#app #lrwrap .rlpt-g .lrptb b{color:#ff9af3}

/* ── 规则小窗 ── */
#app #lrwrap .lrrules{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(6,2,12,.7);padding:16px}
#app #lrwrap .lrrc{max-width:520px;width:100%;max-height:90%;overflow:auto;border-radius:16px;padding:16px 18px 14px;color:#efe6ff;
  background:linear-gradient(180deg,#1d0c33,#12081f);border:1px solid rgba(200,90,255,.45);box-shadow:0 0 40px rgba(140,40,220,.4)}
#app #lrwrap .lrrc h3{margin:0 0 8px;font-family:var(--display);font-size:16px;color:#fff;text-shadow:0 0 8px rgba(220,80,255,.7)}
#app #lrwrap .lrrc ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.5}
#app #lrwrap .lrrb{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
#app #lrwrap .lrrb button{border-radius:999px;padding:7px 14px;font-weight:700;font-size:12px;border:1px solid rgba(200,90,255,.5);background:transparent;color:#e7c6ff;cursor:pointer}
#app #lrwrap .lrrb button.ok{background:linear-gradient(180deg,#c04cff,#7a1fd0);color:#fff;border-color:transparent}

/* 门:封面 */
#app .cart-lr{background:#140a22}

@media (prefers-reduced-motion: reduce){
  #app #lrBoard .rls.lrlucky,#app #lrwrap .rlscene.lrhit{animation:none}
  #app #lrwrap .lrzap{display:none}
}

/* ── 台呢换成紫色(GPT 画的绒面 felt-violet.webp,和普通轮盘的绿台呢一眼分开)── */
#app #lrwrap{--felt1:#4b1d78;--felt2:#2c0d4a;--felt3:#1a0630}
#app #lrwrap .lsgrid.rlg{
  background:
    radial-gradient(52% 80% at 19% 50%,rgba(255,225,255,.1),transparent 62%),
    radial-gradient(70% 60% at 70% 0%,rgba(200,80,255,.16),transparent 70%),
    radial-gradient(120% 110% at 50% 45%,transparent 50%,rgba(0,0,0,.55) 100%),
    url(felt-violet.webp?v=2f59a319) 0 0/256px 256px,#2c0d4a;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 4px #1a0f22,inset 0 0 0 5px rgba(214,178,106,.6),inset 0 0 50px rgba(0,0,0,.45),0 0 26px rgba(150,40,240,.28)}
#app #lrwrap .rlscene{background:radial-gradient(90% 70% at 50% 45%,#3d1763,#220a3a 70%,#160626);border-color:rgba(200,120,255,.4)}
#app #lrwrap .rlzero .rls{background:radial-gradient(90% 70% at 60% 40%,rgba(60,200,120,.34),rgba(10,110,55,.2)) !important}

/* ══ BUILD 219:闪电更华丽 —— 分叉、冲击波、预兆闪、抖动、倍数牌砸下来、轮盘上的电 ══ */
#app #lrwrap .rlscene canvas.lrfx{pointer-events:none;z-index:2}
#app #lrwrap .rlscene .rlmid{z-index:3}
#app #lrwrap .lrzap .bg{stroke:rgba(200,70,255,.55);stroke-width:9px;filter:blur(5px);animation:lrZapG .8s ease-out forwards}
#app #lrwrap .lrzap .b{stroke:#ffd9fb;stroke-width:1.8px;stroke-dasharray:400;stroke-dashoffset:400;filter:drop-shadow(0 0 4px #e04bff);animation:lrZapB .8s .06s ease-out forwards}
@keyframes lrZapB{0%{stroke-dashoffset:400;opacity:1}35%{stroke-dashoffset:0;opacity:1}50%{opacity:.3}60%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
#app #lrwrap .lrzap .ring{fill:none;stroke:#ff9cf2;stroke-width:3px;transform-box:fill-box;transform-origin:center;opacity:0;animation:lrRing .7s .12s ease-out forwards}
#app #lrwrap .lrzap .ring.r2{stroke:#b44dff;stroke-width:2px;animation-delay:.22s}
@keyframes lrRing{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(7)}}
#app #lrwrap .lrstorm.pre{opacity:1;background:transparent}
#app #lrwrap .lrstorm.pre b,#app #lrwrap .lrstorm.flash b{display:none}
#app #lrwrap .lrstorm.pre.go{animation:lrPre .16s steps(2) forwards}
@keyframes lrPre{0%{background:rgba(220,170,255,.28)}50%{background:rgba(220,170,255,0)}100%{background:rgba(220,170,255,.18)}}
#app #lrwrap .lrstorm.flash.go.big{animation:lrFlashBig .7s ease-out forwards}
@keyframes lrFlashBig{0%{background:rgba(255,235,255,.85)}12%{background:rgba(200,120,255,.25)}22%{background:rgba(255,235,255,.6)}100%{background:rgba(240,190,255,0)}}
/* 整个画面(不是外框)跟着雷抖一下 */
#app #lrwrap.lrshake .lsgrid{animation:lrShake .32s ease-out}
#app #lrwrap.lrshake2 .lsgrid{animation:lrShake2 .42s ease-out}
@keyframes lrShake{0%,100%{transform:none}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,1px)}80%{transform:translate(1px,-1px)}}
@keyframes lrShake2{0%,100%{transform:none}15%{transform:translate(-6px,3px) rotate(-.3deg)}30%{transform:translate(5px,-4px) rotate(.3deg)}45%{transform:translate(-4px,2px)}60%{transform:translate(3px,-2px)}80%{transform:translate(-1px,1px)}}
/* 倍数牌:从上面砸下来 + 一圈光 */
#app #lrBoard .rls .lrmul{animation:lrSlam .5s cubic-bezier(.2,1.7,.4,1) both}
@keyframes lrSlam{0%{transform:translate(-50%,-26px) scale(2.2);opacity:0;filter:brightness(3)}60%{opacity:1}100%{transform:translateX(-50%) scale(1);opacity:1;filter:none}}
/* 闪电号小条:新来的一格闪一下 */
#app #lrwrap .lrbolts span:last-child{animation:lrChipIn .5s ease-out}
@media (prefers-reduced-motion: reduce){
  #app #lrwrap.lrshake .lsgrid,#app #lrwrap.lrshake2 .lsgrid,#app #lrBoard .rls .lrmul{animation:none}
}