/* 额外特效（由界面线程维护）。素材到位前用 CSS 画的版本，素材见 docs/FX_PLUS.md */

/* 环境：光尘画布、两角灯笼暖光 */
#fxbg{position:absolute;inset:0;width:var(--stage-w,1280px);height:var(--stage-h,800px);pointer-events:none;opacity:.9}
.lantern{position:absolute;top:-120px;width:420px;height:420px;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(255,170,80,.22),rgba(255,140,60,.08) 40%,transparent 70%);animation:lantern 5s ease-in-out infinite;mix-blend-mode:screen}
.lantern.l{left:-110px}.lantern.r{right:-110px;animation-delay:-2.5s}
@keyframes lantern{50%{opacity:.7;transform:scale(1.05)}}

/* 轮到谁：头像外一圈转动的金色光弧 */
.tag{position:absolute}
.tag .av{position:relative;z-index:1}
.turnring{position:absolute;left:3px;top:50%;width:38px;height:38px;margin-top:-19px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 55%,rgba(236,189,79,.15) 62%,var(--gold) 92%,#fff6d0 100%);
  -webkit-mask:radial-gradient(circle,transparent 15.5px,#000 16.5px);mask:radial-gradient(circle,transparent 15.5px,#000 16.5px);animation:spinring 1.4s linear infinite}
@keyframes spinring{to{transform:rotate(1turn)}}

/* 听牌：自己名牌一圈流动的火焰光 */
.tag0.tingaura{box-shadow:inset 0 0 0 2px var(--gold),0 0 18px rgba(255,140,60,.55),0 0 34px rgba(236,189,79,.35)}
/* 呼吸只动伪元素的不透明度，交给 GPU 合成，不每帧重绘阴影 */
.tag0.tingaura::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 2px #ffb24a,0 0 26px rgba(255,120,50,.7),0 0 44px rgba(236,189,79,.45);opacity:0;animation:tingflame 1.6s ease-in-out infinite}
@keyframes tingflame{50%{opacity:1}}

/* 海底：剩余的墩呼吸变红，罗盘浮现"海底" */
#ring.haidi .stk.h2,#ring.haidi .stk.h1{animation:haidi 1.2s ease-in-out infinite}
@keyframes haidi{50%{filter:brightness(1.1) sepia(.6) hue-rotate(-30deg) saturate(2.2);box-shadow:0 0 8px rgba(255,80,60,.6)}}
.haiditxt{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);font:400 22px/1 var(--f-display);color:#ff8a6a;letter-spacing:.3em;
  text-shadow:0 0 12px rgba(255,90,60,.7);animation:haiditxt 1.2s ease-in-out infinite}
@keyframes haiditxt{50%{opacity:.55}}

/* 出牌落桌的烟尘 */
.dust{position:absolute;width:12px;height:12px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(240,230,205,.55),rgba(240,230,205,0) 70%);z-index:4}

/* 吃碰杠：斜切光带 + 速度线 */
.slashband{position:absolute;left:-10%;width:120%;height:120px;pointer-events:none;z-index:7;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.0) 8%,rgba(63,162,124,.55) 30%,rgba(220,255,240,.85) 50%,rgba(63,162,124,.55) 70%,transparent 92%)}
.slashband.gold{background:linear-gradient(90deg,transparent,rgba(236,189,79,.0) 8%,rgba(236,189,79,.6) 30%,rgba(255,248,210,.95) 50%,rgba(236,189,79,.6) 70%,transparent 92%)}
.slashband::after{content:"";position:absolute;inset:46% 0;background:#fff;opacity:.9;filter:blur(1px)}
.speedlines{position:absolute;inset:0;pointer-events:none;z-index:6;
  background:repeating-conic-gradient(from 0deg at var(--cx) var(--cy),rgba(255,255,255,.22) 0 .6deg,transparent .6deg 5deg);
  -webkit-mask:radial-gradient(circle at var(--cx) var(--cy),transparent 22%,#000 60%);mask:radial-gradient(circle at var(--cx) var(--cy),transparent 22%,#000 60%)}

/* 杠：闪电 */
.bolt{position:absolute;inset:0;pointer-events:none;z-index:8}
.bolt svg{display:block}
.bolt .b1{fill:none;stroke:rgba(180,210,255,.55);stroke-width:12;stroke-linejoin:round;filter:blur(4px)}
.bolt .b2{fill:none;stroke:#fffbe6;stroke-width:3;stroke-linejoin:round}
.boltflash{position:absolute;inset:0;pointer-events:none;z-index:8;background:radial-gradient(circle at 50% 40%,rgba(255,255,240,.6),rgba(255,255,240,.1) 70%)}

/* 筹码 */
.coin,.coin2{position:absolute;width:22px;height:22px;border-radius:50%;pointer-events:none;z-index:9;
  background:radial-gradient(circle at 35% 30%,#fff3c0,#f0c24a 45%,#b67b16 100%);box-shadow:inset 0 0 0 2px rgba(255,240,180,.7),0 2px 4px rgba(0,0,0,.45)}
.coin::after,.coin2::after{content:"";position:absolute;inset:6px;border-radius:2px;border:2px solid rgba(140,90,10,.55)}
.coin2{width:18px;height:18px}

/* 花瓣 */
.petal{position:absolute;width:14px;height:20px;pointer-events:none;z-index:9;border-radius:80% 0 80% 0;
  background:linear-gradient(135deg,#ffd9e2,#f28aa5 60%,#d9577a);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.petal.big{width:22px;height:30px;background:linear-gradient(135deg,#fff3c6,#f2c14e 55%,#d98b1f)}

/* 胡牌切入 */
.cutin{position:absolute;inset:0;pointer-events:none;z-index:11;display:grid;align-items:center;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.15),rgba(0,0,0,.55))}
.cutband{position:relative;height:250px;display:flex;align-items:center;gap:40px;padding-left:22%;
  background:linear-gradient(90deg,rgba(120,20,10,0),rgba(150,30,18,.92) 14%,rgba(200,64,45,.95) 50%,rgba(150,30,18,.92) 86%,rgba(120,20,10,0));
  box-shadow:0 0 0 2px rgba(236,189,79,.6),0 0 60px rgba(236,189,79,.35)}
.cutband::before,.cutband::after{content:"";position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.cutband::before{top:10px}.cutband::after{bottom:10px}
.cutimg{width:220px;height:220px;border-radius:50%;background:center/cover no-repeat;box-shadow:0 0 0 5px var(--gold),0 0 40px rgba(255,220,120,.7);flex:none}
.cuttext{display:grid;gap:8px;color:#fff}
.cuttext b{font:400 104px/1 var(--f-display);color:#ffe28a;text-shadow:0 4px 0 #6b1406,0 0 30px rgba(255,200,90,.8);letter-spacing:.06em}
.cuttext span{font:700 22px var(--f-ui);letter-spacing:.3em;color:#fff2d6}

/* 骰盅用红底白点的胖骰盅（两张图同坐标，可直接叠换） */
#compass .dicecup{background-image:url(assets/cute/dice_cup_cute.png)}
#compass .dicecup.lid{background-image:url(assets/cute/dice_cup_cute_lid.png)}

@media (prefers-reduced-motion:reduce){.turnring,.lantern,#ring.haidi .stk,.haiditxt,.tag0.tingaura::after{animation:none!important}}

/* 省电模式（body.lowpower）：常驻动画停在一帧静止高亮，灯笼光换成不混合的淡渐变；一次性特效照常 */
body.lowpower .lantern{animation:none;mix-blend-mode:normal;background:radial-gradient(circle,rgba(255,170,80,.1),rgba(255,140,60,.03) 40%,transparent 70%)}
body.lowpower .turnring{animation:none}
body.lowpower .tag0.tingaura::after{animation:none;opacity:.6}
body.lowpower #ring.haidi .stk.h2,body.lowpower #ring.haidi .stk.h1{animation:none;filter:sepia(.5) hue-rotate(-30deg) saturate(1.8)}
body.lowpower .haiditxt{animation:none}