/* Đua Ghe — lớp hiệu ứng (fx.js). Chỉ thêm, không đổi bố cục: mọi phần tử fx là position:absolute, pointer-events:none.
   Quy tắc: không loé toàn màn, không nhấp nháy > 3 lần/giây (chu kỳ nhỏ nhất ở đây 0.45s và chỉ là chuyển động, không đổi sáng),
   tối đa 1 hiệu ứng lớn mỗi lúc (hàng đợi trong fx.js). ?fx=0 tắt hẳn, ?fx=lite giảm hạt + bỏ cảnh nền phụ. */
#fxCanvas{position:absolute;left:0;top:0;width:1080px;height:1920px;z-index:40;pointer-events:none} /* dưới tên/hạng/% của làn (z 41) */
#fxLayer{position:absolute;inset:0;z-index:42;pointer-events:none}
#fxAmb{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fx-on .dragon-tag{display:none}

/* ---------- cảnh nền ---------- */
.fx-bird{position:absolute;left:0;width:54px;height:26px;animation:fxBird linear infinite}
.fx-bird svg{width:100%;height:100%;overflow:visible}
.fx-bird .w{transform-origin:27px 14px;animation:fxFlap .7s ease-in-out infinite}
@keyframes fxBird{from{transform:translateX(-120px)}to{transform:translateX(1200px)}}
@keyframes fxFlap{50%{transform:scaleY(.35)}}
.fx-lb{position:absolute;left:0;width:74px;height:40px;animation:fxLb linear infinite;opacity:.9}
@keyframes fxLb{from{transform:translateX(1140px)}to{transform:translateX(-160px)}}
.fx-lb svg{width:100%;height:100%;animation:bob 3.2s ease-in-out infinite}
.fx-glint{position:absolute;width:26px;height:6px;border-radius:6px;background:rgba(255,255,255,.85);opacity:0;animation:fxGlint 4.5s ease-in-out infinite}
@keyframes fxGlint{0%,70%,100%{opacity:0;transform:scaleX(.3)}82%{opacity:.85;transform:scaleX(1)}}
.fx-flag{position:absolute;width:44px;height:36px;transform-origin:0 50%;animation:fxWave 1.4s ease-in-out infinite}
.fx-flag svg{width:100%;height:100%;overflow:visible}
@keyframes fxWave{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-9deg) scaleX(.86)}}
.fx-final .fx-flag{animation-duration:.55s}

/* ---------- nâng cấp nhẹ phần tử của game.js ---------- */
.fx-on .bub{animation:fxSlideIn .32s cubic-bezier(.2,.9,.3,1.2)}
@keyframes fxSlideIn{from{transform:translateY(8px) scale(.9);transform-origin:left center;opacity:0}}
.fx-on .ticker.fx-tk{animation:fxTk .4s cubic-bezier(.2,.9,.3,1.15)}
@keyframes fxTk{from{transform:scale(.9);opacity:0}}
.fx-on .boostchip{animation:fxBeat 1s ease-in-out infinite}
@keyframes fxBeat{50%{transform:scale(1.08)}}
.fx-on .lead .crown{animation:fxCrown .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes fxCrown{from{transform:translateY(-60px) rotate(-18deg);opacity:0}}
.fx-final .lane:not(.lead){animation:fxLaneGlow 1.2s ease-in-out infinite;border-radius:30px}
@keyframes fxLaneGlow{50%{box-shadow:inset 0 0 0 5px rgba(255,255,255,.7),0 0 22px 2px rgba(255,255,255,.45)}}
.fx-final .clock{animation:fxBeat 1s ease-in-out infinite}
#qboard.fx-qpop{animation:fxQ .45s cubic-bezier(.2,.9,.3,1.25)}
@keyframes fxQ{from{transform:scale(.92) rotate(-1deg)}}
.fx-on .q-op .right{position:relative;animation:fxRight 1s ease-out;box-shadow:0 0 0 6px rgba(47,191,113,.45),0 0 26px 6px rgba(47,191,113,.55)}
.fx-on .q-op .right::after{display:inline-block;animation:fxTick .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes fxRight{0%{transform:scale(.9)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes fxTick{from{transform:scale(0) rotate(-30deg)}}
.fx-on .q-op .wrong{position:relative;opacity:.55}
.fx-on .q-op .wrong::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:6px;margin-top:-3px;background:var(--red);border-radius:4px;transform-origin:0 50%;animation:fxStrike .45s ease-out .15s both}
@keyframes fxStrike{from{transform:scaleX(0)}}
.fx-on.fin .fr{animation:fxRoll .5s cubic-bezier(.2,.9,.3,1.15) both}
.fx-on.fin .fr .cap{animation:fxFade .5s ease-out both}
.fx-on.fin .fr:nth-child(1){animation-delay:.25s}.fx-on.fin .fr:nth-child(1) .cap{animation-delay:.85s}
.fx-on.fin .fr:nth-child(2){animation-delay:.45s}.fx-on.fin .fr:nth-child(2) .cap{animation-delay:1.05s}
.fx-on.fin .fr:nth-child(3){animation-delay:.65s}.fx-on.fin .fr:nth-child(3) .cap{animation-delay:1.25s}
.fx-on.fin .fr:nth-child(4){animation-delay:.85s}.fx-on.fin .fr:nth-child(4) .cap{animation-delay:1.45s}
.fx-on.fin .fr:nth-child(5){animation-delay:1.05s}.fx-on.fin .fr:nth-child(5) .cap{animation-delay:1.65s}
.fx-on.fin .fr:nth-child(6){animation-delay:1.25s}.fx-on.fin .fr:nth-child(6) .cap{animation-delay:1.85s}
@keyframes fxRoll{from{transform:translateY(40px) scale(.9);opacity:0}}
@keyframes fxFade{from{opacity:0;transform:translateX(-24px)}}
.fx-on.fin .whale{animation:fxSlideR .45s ease-out both}
.fx-on.fin .whale:nth-of-type(1){animation-delay:.5s}.fx-on.fin .whale:nth-of-type(2){animation-delay:.75s}.fx-on.fin .whale:nth-of-type(3){animation-delay:1s}
@keyframes fxSlideR{from{transform:translateX(80px);opacity:0}}

/* ---------- phần gắn vào ghe ---------- */
.fx-wake{position:absolute;right:100%;bottom:3px;height:16px;margin-right:-6px;border-radius:10px 0 0 10px;
  width:min(calc(16px + var(--spd,0) * 150px), var(--wkmax,0px));opacity:calc(.15 + var(--spd,0) * .8);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 10px,rgba(255,255,255,.95) 10px 22px);background-size:44px 100%;
  -webkit-mask:linear-gradient(90deg,transparent,#000 70%);mask:linear-gradient(90deg,transparent,#000 70%);animation:fxFoam .6s linear infinite;transition:width .4s,opacity .4s}
@keyframes fxFoam{to{background-position:-44px 0}}
.lobbyl .fx-wake{display:none}
.boost .fx-wake{width:min(170px,var(--wkmax,0px));opacity:1;box-shadow:0 0 18px 6px rgba(255,201,60,.75);
  background:repeating-linear-gradient(90deg,rgba(255,231,160,0) 0 8px,#FFF3C4 8px 20px);background-size:44px 100%;animation-duration:.35s}
.fx-dhead,.fx-dtail,.fx-shim{position:absolute;display:none;pointer-events:none}
.dragon .fx-dhead,.dragon .fx-dtail,.dragon .fx-shim{display:block}
.fx-dhead{right:-24px;bottom:9px;width:48px;height:48px;color:var(--c);overflow:visible;transform-origin:20% 90%;animation:fxNod 1.6s ease-in-out infinite}
.fx-dtail{left:-18px;bottom:10px;width:30px;height:34px;color:var(--c);overflow:visible;transform-origin:90% 90%;animation:fxNod 1.6s ease-in-out infinite reverse}
@keyframes fxNod{50%{transform:rotate(-7deg)}}
.fx-shim{left:2px;bottom:1px;width:128px;height:22px;border-radius:2px 30px 34px 34px;
  background:linear-gradient(100deg,transparent 30%,rgba(255,243,196,.95) 45%,rgba(255,201,60,.6) 52%,transparent 66%) no-repeat;background-size:260px 100%;
  animation:fxShim 2.2s ease-in-out infinite}
@keyframes fxShim{from{background-position:-260px 0}to{background-position:260px 0}}
.fx-surge .hull,.fx-surge .hs{animation:fxSurge .6s cubic-bezier(.2,.9,.3,1)}
@keyframes fxSurge{30%{transform:translateX(16px)}}

/* ---------- hiệu ứng nhỏ theo làn ---------- */
.fx-tag{position:absolute;z-index:6;top:calc(var(--lo,0px) + 40px);background:#fff;border:4.5px solid var(--ink);border-radius:22px;font-size:28px;font-weight:900;line-height:34px;padding:0 12px;white-space:nowrap;
  box-shadow:0 4.5px 0 rgba(59,42,26,.45);animation:fxSlideIn .32s cubic-bezier(.2,.9,.3,1.2);transition:opacity .3s;max-width:440px;overflow:hidden;text-overflow:ellipsis}
.fx-tag.burst{background:var(--cream)}
.fx-tag.combo{background:var(--gift);font-variant-numeric:tabular-nums}
.fx-tag.combo b{display:inline-block;transform-origin:50% 60%;font-size:calc(30px + var(--cg,0) * 10px)}
.fx-tag.combo b.bump{animation:fxBump .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes fxBump{from{transform:scale(1.6)}}
.fx-tag.out{opacity:0}
.fx-head{position:absolute;z-index:6;animation:fxHead .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes fxHead{0%{transform:translateY(-70px) scale(.5);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.fx-head.out{transition:opacity .35s;opacity:0}
.fx-ring{position:absolute;z-index:5;border-radius:50%;border:6px solid #fff;animation:fxRing .7s ease-out forwards}
.fx-ring.gold{border-color:var(--gold)}
@keyframes fxRing{from{transform:scale(.25);opacity:1}to{transform:scale(1);opacity:0}}
.fx-word{position:absolute;z-index:7;font-size:38px;line-height:1.1;font-weight:900;color:#fff;white-space:nowrap;letter-spacing:1px;
  text-shadow:4px 0 var(--ink),-4px 0 var(--ink),0 4px var(--ink),0 -4px var(--ink),3px 3px var(--ink),-3px 3px var(--ink),3px -3px var(--ink),-3px -3px var(--ink),0 7px 0 var(--ink);
  animation:fxWord .95s cubic-bezier(.2,.9,.3,1.3) forwards}
.fx-word.y{color:var(--gold)}
.fx-word.big{font-size:44px}
@keyframes fxWord{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.15);opacity:1}45%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.fx-crownd{position:absolute;z-index:7;width:46px;height:28px;animation:fxCrownDrop .8s cubic-bezier(.3,1.6,.5,1) both}
@keyframes fxCrownDrop{from{transform:translateY(-120px) rotate(-25deg);opacity:0}}
.fx-crownd.out{transition:opacity .4s;opacity:0}
.fx-spot{position:absolute;z-index:4;top:calc(var(--lo,0px) - 6px);height:100px;width:280px;left:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,243,196,.95),rgba(255,201,60,.55) 55%,rgba(255,201,60,0));
  animation:fxSpot 2.3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fxSpot{0%{transform:translateX(-300px);opacity:0}15%{opacity:1}55%{transform:translateX(var(--sx))}85%{opacity:1;transform:translateX(var(--sx))}100%{opacity:0;transform:translateX(var(--sx))}}
.fx-turbo{position:absolute;z-index:4;left:80px;right:144px;top:calc(var(--lo,0px) + 38px);height:52px;border-radius:26px;overflow:hidden}
.fx-turbo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 40%,rgba(255,201,60,.8) 60%,transparent);
  transform:translateX(-100%);animation:fxTurbo .8s ease-out forwards}
@keyframes fxTurbo{to{transform:translateX(100%)}}

/* ---------- hiệu ứng lớn (1 cái mỗi lúc) ---------- */
#fxBig{position:absolute;left:0;right:0;height:0}
.fx-big{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);text-align:center;transition:opacity .3s}
.fx-big.out{opacity:0}
.fx-banner{background:var(--cream);border:9px solid var(--ink);border-radius:42px;box-shadow:0 12px 0 var(--ink);padding:10px 40px 14px;min-width:600px;max-width:960px;
  animation:fxBanner .5s cubic-bezier(.2,.9,.3,1.25) both}
.fx-banner.gold{background:linear-gradient(180deg,#FFF3C4,var(--gold-soft))}
.fx-banner .t{font-size:40px;font-weight:900;line-height:50px;letter-spacing:1px;white-space:nowrap}
.fx-banner .n{font-size:64px;font-weight:900;line-height:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-deep);animation:fxRoll .5s .15s cubic-bezier(.2,.9,.3,1.2) both}
.fx-banner .s{font-size:36px;font-weight:800;line-height:44px;color:var(--ink-muted);white-space:nowrap}
@keyframes fxBanner{from{transform:scale(.4) rotate(-3deg);opacity:0}}
.fx-cd{font-size:300px;line-height:300px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:12px 0 var(--ink),-12px 0 var(--ink),0 12px var(--ink),0 -12px var(--ink),9px 9px var(--ink),-9px 9px var(--ink),9px -9px var(--ink),-9px -9px var(--ink),0 22px 0 var(--ink);
  animation:fxCd .9s cubic-bezier(.2,.9,.3,1.3) both}
.fx-cd.go{font-size:132px;line-height:150px;color:var(--gold);white-space:nowrap}
@keyframes fxCd{0%{transform:scale(2.2);opacity:0}30%{transform:scale(.95);opacity:1}45%{transform:scale(1)}}
.fx-gong{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;border:12px solid rgba(255,201,60,.9);animation:fxRing 1s ease-out forwards}
.fx-gong.d2{animation-delay:.2s;border-color:rgba(255,255,255,.9);opacity:0}
.fx-big .lead-pop{font-size:96px}

/* ---------- toast cảm ơn follow/chia sẻ (tĩnh, nhỏ) ---------- */
.fx-toast{position:absolute;z-index:8;right:170px;background:var(--cream);border:4.5px solid var(--ink);border-radius:999px;padding:0 20px;font-size:30px;font-weight:800;line-height:44px;
  white-space:nowrap;max-width:620px;overflow:hidden;text-overflow:ellipsis;box-shadow:0 5px 0 rgba(59,42,26,.4);animation:fxFadeIn .35s ease-out both;transition:opacity .4s}
.fx-toast.out{opacity:0}
@keyframes fxFadeIn{from{opacity:0;transform:translateY(10px)}}
.fx-lite .fx-wake{-webkit-mask:none;mask:none}
.fx-lite .boost .fx-wake{box-shadow:none}
.fx-word.name{font-size:40px;color:#FFF3C4}
.fx-word.name.first{font-size:50px;color:#fff}
.fx-word small{font-size:32px;color:#fff}
/* toast nằm gọn trong cột bảng ghế (55–85%): không lấn vùng bình luận trái / cột tim phải */
.fx-toast{right:164px;max-width:320px;white-space:normal;font-size:27px;line-height:32px;padding:4px 16px;border-radius:22px;text-align:center}
/* trả lời A/B: ô đáp án vừa được chọn nảy nhẹ */
.fx-on .q-op .fx-tap{animation:fxTap .35s ease-out}
@keyframes fxTap{40%{transform:scale(1.04)}}
/* ghe bám sát ghe đầu: làn nhấp nháy viền vàng */
.lane.fx-nudge{animation:fxNudge .6s ease-in-out 4}
@keyframes fxNudge{0%,100%{box-shadow:inset 0 0 0 0 rgba(255,201,60,0)}50%{box-shadow:inset 0 0 0 6px rgba(255,201,60,.95)}}
@media (prefers-reduced-motion:reduce){.q-op .fx-tap,.lane.fx-nudge{animation:none}}