/* bauma / industrial neon promo effects — GPU: transform + opacity only */
#promoFs{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}
#promoFs.hide{display:none!important}
#promoFs .pf-bg{position:absolute;inset:0;background:rgba(4,6,10,.82);backdrop-filter:blur(2px)}
#promoStage{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#promoCta{position:relative;z-index:3;width:min(92vw,360px)}
#promoCta.hide{display:none!important}
.pf-x-always{position:absolute;right:8px;top:calc(8px + env(safe-area-inset-top));z-index:5;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:22px;cursor:pointer}
#promoUnlock{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:5;border:0;border-radius:999px;padding:8px 14px;background:#ffcc00;color:#111;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 0 16px rgba(255,204,0,.55)}
#promoUnlock.hide{display:none!important}
.pf-card{background:linear-gradient(180deg,#1a1c22,#12141a);color:#fff;border:1px solid rgba(255,204,0,.45);border-radius:20px;padding:22px 18px 18px;text-align:center;box-shadow:0 0 0 1px rgba(255,204,0,.2),0 0 28px rgba(255,180,0,.28)}
.pf-card .promo-tag{background:#ffcc00;color:#1a1400;border-radius:6px;padding:2px 8px;font-size:12px;font-weight:700}
.pf-card .pf-booth{margin:10px 0 4px;font-size:13px;color:#ffd978}
.pf-card .pf-text{font-size:20px;font-weight:700;margin:0 0 14px;line-height:1.35;color:#fff}
.pf-card .btn{background:#2a2d36;color:#fff}
.pf-card .btn.pri{background:linear-gradient(180deg,#ffd54a,#f5a623);color:#1a1400;font-weight:700}
.fx-scene{position:absolute;inset:0;transform:translateZ(0)}
.fx-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* hazard stripes */
.fx-stripes{position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(45deg,#111 0 10px,#ffcc00 10px 20px)}
.fx-stripes.top{top:0}.fx-stripes.bot{bottom:0}

/* excavator */
.fx-dig .fx-ground{position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(180deg,#3a3220 0%,#1a1610 40%,#0c0b09 100%)}
.fx-excv{position:absolute;bottom:18%;width:min(88vw,420px);left:0;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));animation:fxDigDrive 6.2s cubic-bezier(.2,.7,.2,1) forwards;will-change:transform}
@keyframes fxDigDrive{0%{transform:translate3d(-110%,0,0)}18%{transform:translate3d(6%,0,0)}100%{transform:translate3d(6%,0,0)}}
.fx-boom{transform-origin:36px 78px;animation:fxBoom 6.2s ease-in-out forwards}
@keyframes fxBoom{0%,18%{transform:rotate(-8deg)}30%{transform:rotate(28deg)}48%{transform:rotate(-18deg)}62%{transform:rotate(-38deg)}100%{transform:rotate(-22deg)}}
.fx-arm{transform-origin:148px 42px;animation:fxArm 6.2s ease-in-out forwards}
@keyframes fxArm{0%,18%{transform:rotate(8deg)}30%{transform:rotate(42deg)}48%{transform:rotate(-10deg)}62%{transform:rotate(20deg)}100%{transform:rotate(8deg)}}
.fx-bucket{transform-origin:214px 86px;animation:fxBucket 6.2s ease-in-out forwards}
@keyframes fxBucket{0%,18%{transform:rotate(20deg)}30%{transform:rotate(70deg)}48%{transform:rotate(-20deg)}62%{transform:rotate(-80deg)}78%,100%{transform:rotate(-10deg)}}
.fx-wheel{transform-origin:center;animation:fxWheel 1.1s linear 2;transform-box:fill-box}
@keyframes fxWheel{to{transform:rotate(360deg)}}
.fx-dig-title{position:absolute;left:50%;top:14%;transform:translateX(-50%);color:#ffcc00;font-weight:800;font-size:clamp(22px,6vw,36px);letter-spacing:.08em;text-shadow:0 0 12px #ffaa00,0 0 28px #ff6a00;opacity:0;animation:fxFadeIn 1s ease .2s forwards}
@keyframes fxFadeIn{to{opacity:1}}

/* crane — realistic lattice tower crane */
.fx-dusk{position:absolute;inset:0;background:linear-gradient(180deg,#1b1738 0%,#6a2e4a 28%,#d45a2c 48%,#f4b45a 58%,#3a2416 59%,#1a120c 100%)}
.fx-sun{position:absolute;left:14%;top:36%;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle,#fff3c0 0%,#ffb347 48%,rgba(255,140,50,0) 72%);box-shadow:0 0 50px 18px rgba(255,130,50,.4);pointer-events:none}
.fx-city{position:absolute;left:0;right:0;bottom:41%;height:22%;width:100%;opacity:.95;pointer-events:none}
.fx-crane-ground{position:absolute;left:0;right:0;bottom:0;height:41%;background:linear-gradient(180deg,#4a3420 0%,#2a1c12 40%,#140e0a 100%)}
.fx-crane-svg{position:absolute;left:50%;bottom:18%;width:min(140vw,620px);height:78%;transform:translateX(-50%);overflow:visible;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.fx-crane-title{position:absolute;left:50%;top:8%;transform:translateX(-50%);color:#ffe2a0;font-weight:800;font-size:clamp(18px,5vw,28px);letter-spacing:.14em;text-shadow:0 0 12px #ff8a3a,0 2px 0 #3a1a10;opacity:0;animation:fxFadeIn .8s ease .15s forwards;z-index:2}
.fx-slew{transform-origin:0px 0px;animation:fxSlew 6.2s cubic-bezier(.35,.75,.2,1) forwards}
@keyframes fxSlew{0%{transform:rotate(-26deg)}26%{transform:rotate(7deg)}40%,100%{transform:rotate(2deg)}}
.fx-trolley{animation:fxTrolley 6.2s cubic-bezier(.25,.8,.2,1) forwards}
@keyframes fxTrolley{0%,8%{transform:translate(20px,0)}38%,100%{transform:translate(148px,0)}}
.fx-cable{transform-box:fill-box;transform-origin:center top;animation:fxCable 6.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fxCable{0%,22%{transform:scaleY(.14)}62%,100%{transform:scaleY(1)}}
.fx-hoist{animation:fxHoist 6.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fxHoist{0%,22%{transform:translate(0,-118px)}62%,100%{transform:translate(0,8px)}}
.fx-pendulum{transform-origin:0px 0px;animation:fxPendulum 6.2s ease-in-out forwards}
@keyframes fxPendulum{0%,22%{transform:rotate(0)}32%{transform:rotate(11deg)}42%{transform:rotate(-8deg)}52%{transform:rotate(5deg)}62%{transform:rotate(-2deg)}72%,100%{transform:rotate(0)}}
.fx-crane-banner{transform-origin:center top;animation:fxCraneBan 6.2s ease forwards}
@keyframes fxCraneBan{0%,36%{opacity:0;transform:scaleY(.15)}52%{opacity:1;transform:scaleY(1.04)}62%,100%{opacity:1;transform:scaleY(1)}}
.fx-crane-flash{position:absolute;inset:0;background:radial-gradient(circle at 62% 58%,#fff 0%,rgba(255,210,80,.0) 42%);opacity:0;animation:fxLockFlash 6.2s ease forwards;pointer-events:none}
@keyframes fxLockFlash{0%,70%{opacity:0}76%{opacity:.8}86%,100%{opacity:0}}

/* dump truck */
.fx-dump-sky{position:absolute;inset:0;background:linear-gradient(180deg,#2a3348 0%,#7a8aaa 40%,#c4b89a 58%,#5a4a32 59%,#2a2116 100%)}
.fx-dump-truck{position:absolute;bottom:16%;width:min(120vw,560px);height:auto;overflow:visible;left:0;animation:fxDumpIn 6.2s cubic-bezier(.22,.8,.2,1) forwards;will-change:transform;filter:drop-shadow(0 10px 8px rgba(0,0,0,.45))}
@keyframes fxDumpIn{0%{transform:translate3d(-110%,0,0)}24%{transform:translate3d(4%,0,0)}100%{transform:translate3d(4%,0,0)}}
.fx-dump-bed{transform-origin:0px 0px;animation:fxDumpBed 6.2s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes fxDumpBed{0%,28%{transform:rotate(0)}62%,100%{transform:rotate(50deg)}}
.fx-dump-ram{transform-origin:0px 0px;animation:fxDumpRam 6.2s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes fxDumpRam{0%,28%{transform:rotate(14deg)}62%,100%{transform:rotate(50deg)}}
.fx-wh{transform-box:fill-box;transform-origin:center;animation:fxWheel 0.55s linear 5}
.fx-dump-title{position:absolute;left:50%;top:9%;transform:translateX(-50%);color:#ffe08a;font-weight:800;font-size:clamp(18px,5vw,28px);letter-spacing:.12em;text-shadow:0 0 10px #c80;opacity:0;animation:fxFadeIn .7s ease .1s forwards}

/* crawler crane */
.fx-crawler-sky{position:absolute;inset:0;background:linear-gradient(180deg,#243044 0%,#6a7a90 42%,#c2b49a 57%,#3d2e1e 58%,#1a140e 100%)}
.fx-crawler{position:absolute;bottom:6%;left:50%;width:min(165vw,740px);height:auto;overflow:visible;transform:translateX(-40%);filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));animation:fxCrawl 6.2s ease forwards}
@keyframes fxCrawl{0%{transform:translateX(-46%)}18%,100%{transform:translateX(-40%)}}
.fx-craw-boom{transform-origin:0px 0px;animation:fxLuff 6.2s cubic-bezier(.3,.75,.2,1) forwards}
@keyframes fxLuff{0%,18%{transform:rotate(-24deg)}70%,100%{transform:rotate(-58deg)}}
.fx-craw-hang{transform-origin:0px 0px;animation:fxHang 6.2s cubic-bezier(.3,.75,.2,1) forwards}
@keyframes fxHang{0%,18%{transform:rotate(24deg)}70%,100%{transform:rotate(58deg)}}
.fx-craw-ban{transform-origin:center top;animation:fxCraneBan 6.2s ease forwards}
.fx-track-pad{animation:fxTrack 0.8s linear 4}
@keyframes fxTrack{to{transform:translateX(8px)}}
.fx-craw-title{position:absolute;left:50%;top:8%;transform:translateX(-50%);color:#ffe9b0;font-weight:800;font-size:clamp(18px,5vw,28px);letter-spacing:.12em;text-shadow:0 0 10px #a60;opacity:0;animation:fxFadeIn .7s ease .1s forwards}

/* mining haul truck */
.fx-haul-sky{position:absolute;inset:0;background:linear-gradient(180deg,#2b1a12 0%,#8a3a18 30%,#e08a3a 50%,#5a3a20 56%,#1c120c 100%)}
.fx-haul-scene{position:absolute;inset:0;animation:fxShake 6.2s linear forwards;transform-origin:center}
@keyframes fxShake{0%,12%,100%{transform:translate3d(0,0,0)}16%{transform:translate3d(-3px,2px,0)}20%{transform:translate3d(3px,-2px,0)}24%{transform:translate3d(-2px,1px,0)}28%{transform:translate3d(2px,2px,0)}32%{transform:translate3d(-1px,-1px,0)}36%,100%{transform:translate3d(0,0,0)}}
.fx-haul{position:absolute;bottom:8%;width:min(140vw,640px);height:auto;overflow:visible;left:0;animation:fxHaulIn 6.2s cubic-bezier(.2,.7,.2,1) forwards;filter:drop-shadow(0 12px 12px rgba(0,0,0,.5));will-change:transform}
@keyframes fxHaulIn{0%{transform:translate3d(-120%,0,0)}48%{transform:translate3d(-2%,0,0)}100%{transform:translate3d(-2%,0,0)}}
.fx-htire{transform-box:fill-box;transform-origin:center;animation:fxWheel 0.9s linear 6}
.fx-vip{position:absolute;left:50%;top:16%;transform:translate(-50%,-50%) scale(.4);font-weight:900;font-size:clamp(28px,9vw,52px);color:#ffd24a;letter-spacing:.16em;text-shadow:0 0 18px #ff9a00,0 0 36px #ff3,0 3px 0 #5a2a00;opacity:0;animation:fxVip 6.2s cubic-bezier(.15,1.5,.3,1) forwards;z-index:3;white-space:nowrap}
@keyframes fxVip{0%,28%{opacity:0;transform:translate(-50%,-40%) scale(.3)}42%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}56%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.fx-vip-sub{position:absolute;left:50%;top:26%;transform:translateX(-50%);color:#ffe9b8;font-weight:700;font-size:14px;letter-spacing:.08em;opacity:0;animation:fxFadeIn .6s ease 2.6s forwards;z-index:3;text-shadow:0 0 8px #000}

/* gold mine */
.fx-mine-sky{position:absolute;inset:0;background:linear-gradient(180deg,#3a1c0c 0%,#c45a18 44%,#f0c878 61%,#6a3a18 62%,#2a1a0c 100%)}
.fx-blast{position:absolute;left:52%;top:60%;width:20px;height:20px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 0 0 #ffcc00;animation:fxBlast 6.2s ease forwards;pointer-events:none}
@keyframes fxBlast{0%,22%{opacity:0;transform:scale(.2);box-shadow:0 0 0 0 rgba(255,200,40,0)}26%{opacity:1;transform:scale(3);box-shadow:0 0 80px 50px rgba(255,220,80,.9)}34%{opacity:.3;transform:scale(6);box-shadow:0 0 120px 20px rgba(255,160,0,.2)}42%,100%{opacity:0;transform:scale(8)}}
.fx-mine-svg{position:absolute;bottom:0;left:50%;width:200%;height:auto;transform:translateX(-50%);overflow:visible}
.fx-mine-load{transform-origin:0px 0px;animation:fxMineArm 6.2s ease-in-out forwards}
@keyframes fxMineArm{0%,30%{transform:rotate(8deg)}42%{transform:rotate(-22deg)}55%,100%{transform:rotate(-6deg)}}
.fx-mine-title{position:absolute;left:50%;top:7%;transform:translateX(-50%);color:#ffe7a0;font-weight:800;font-size:clamp(18px,5vw,28px);letter-spacing:.14em;text-shadow:0 0 12px #fa0;opacity:0;animation:fxFadeIn .7s ease .1s forwards;z-index:2}

/* TBM */
.fx-tbm-bg{position:absolute;inset:0;background:linear-gradient(#2a2a2e,#141416)}
.fx-wall{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#5a5858 0 28px,#4a4848 28px 30px),repeating-linear-gradient(#6a6864 0 12px,#52504c 12px 24px);animation:fxWallCrack 6.2s ease forwards}
@keyframes fxWallCrack{0%,24%{opacity:1}46%{opacity:.15}60%,100%{opacity:0}}
.fx-hole{position:absolute;left:50%;top:46%;width:20px;height:20px;border-radius:50%;background:#0c0c0e;transform:translate(-50%,-50%) scale(0);box-shadow:inset 0 0 30px #000,0 0 0 8px #3a3834;animation:fxHole 6.2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fxHole{0%,18%{transform:translate(-50%,-50%) scale(0)}48%,100%{transform:translate(-50%,-50%) scale(14)}}
.fx-tbm-svg{position:absolute;left:50%;top:46%;width:min(80vw,340px);transform:translate(-50%,-50%);animation:fxTbmOut 6.2s cubic-bezier(.25,.8,.2,1) forwards;filter:drop-shadow(0 0 16px rgba(0,0,0,.6))}
@keyframes fxTbmOut{0%,16%{transform:translate(-50%,-50%) scale(.4)}50%,100%{transform:translate(-50%,-50%) scale(1)}}
.fx-cutter{transform-box:fill-box;transform-origin:center;animation:fxSpin 1.1s linear infinite}
.fx-tbm-ban{position:absolute;left:50%;top:14%;transform:translateX(-50%);width:min(86vw,360px);text-align:center;color:#ffe9a8;font-weight:800;font-size:clamp(16px,4.6vw,24px);text-shadow:0 0 10px #fa0;opacity:0;animation:fxFadeIn .7s ease 2.8s forwards;z-index:3}

/* reduced-motion end poses */
.fx-reduced .fx-slew{animation:none;transform:rotate(2deg)}
.fx-reduced .fx-trolley{animation:none;transform:translate(148px,0)}
.fx-reduced .fx-cable{animation:none;transform:scaleY(1)}
.fx-reduced .fx-hoist{animation:none;transform:translate(0,8px)}
.fx-reduced .fx-pendulum{animation:none;transform:rotate(0)}
.fx-reduced .fx-crane-banner,.fx-reduced .fx-craw-ban{animation:none;opacity:1;transform:scaleY(1)}
.fx-reduced .fx-dump-truck{animation:none;transform:translate3d(4%,0,0)}
.fx-reduced .fx-haul{animation:none;transform:translate3d(-2%,0,0)}
.fx-reduced .fx-dump-bed{animation:none;transform:rotate(50deg)}
.fx-reduced .fx-crawler{animation:none;transform:translateX(-40%)}
.fx-reduced .fx-craw-boom{animation:none;transform:rotate(-58deg)}
.fx-reduced .fx-craw-hang{animation:none;transform:rotate(58deg)}
.fx-reduced .fx-haul-scene{animation:none}
.fx-reduced .fx-vip{animation:none;opacity:1;transform:translate(-50%,-50%) scale(1)}
.fx-reduced .fx-cutter{animation:none}
.fx-reduced .fx-wall{animation:none;opacity:0}
.fx-reduced .fx-hole{animation:none;transform:translate(-50%,-50%) scale(14)}
.fx-reduced .fx-tbm-svg{animation:none;transform:translate(-50%,-50%) scale(1)}
.fx-reduced .fx-blast{animation:none;opacity:0}

/* gears */
.fx-gear-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#14202a,#07090c 70%)}
.fx-g1,.fx-g2,.fx-g3,.fx-g4{position:absolute}
.fx-gear{display:block;width:100%;height:auto;opacity:.9;will-change:transform;filter:drop-shadow(0 0 6px rgba(0,255,200,.3))}
.fx-g1{width:42vw;max-width:220px;left:6%;top:18%;animation:fxSpin 4.5s linear infinite, fxGearIn .7s ease both}
.fx-g2{width:32vw;max-width:160px;right:8%;top:22%;animation:fxSpinR 3.2s linear infinite, fxGearIn .7s .1s ease both}
.fx-g3{width:24vw;max-width:120px;left:22%;bottom:22%;animation:fxSpin 2.4s linear infinite, fxGearIn .7s .2s ease both}
.fx-g4{width:20vw;max-width:100px;right:24%;bottom:18%;animation:fxSpinR 2.8s linear infinite, fxGearIn .7s .3s ease both}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxSpinR{to{transform:rotate(-360deg)}}
@keyframes fxGearIn{from{opacity:0;transform:scale(.4)}to{opacity:.95}}
.fx-piston{position:absolute;width:18px;height:90px;background:linear-gradient(90deg,#8a96a4,#e8eef4 40%,#6a7380);border-radius:4px;box-shadow:0 0 8px rgba(160,200,255,.4)}
.fx-piston i{display:block;width:26px;height:22px;margin-left:-4px;background:linear-gradient(#d0d6dc,#88919c);border-radius:3px;animation:fxPist 1.1s ease-in-out infinite alternate}
@keyframes fxPist{to{transform:translateY(28px)}}
.fx-frame{position:absolute;left:10%;right:10%;top:28%;bottom:28%;border:3px solid transparent;border-radius:18px;opacity:0;animation:fxFrameIn 6.2s ease forwards;box-shadow:0 0 18px #00e5c0,0 0 40px rgba(0,229,192,.35),inset 0 0 18px rgba(0,229,192,.2);border-color:#00e5c0}
@keyframes fxFrameIn{0%,30%{opacity:0;transform:scale(.8)}48%{opacity:1;transform:scale(1.04)}58%,100%{opacity:1;transform:scale(1)}}
.fx-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:fxShine 6.2s ease forwards}
@keyframes fxShine{0%,55%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}
.fx-gear-text{position:absolute;left:12%;right:12%;top:42%;text-align:center;color:#e8fff8;font-weight:800;font-size:clamp(20px,6vw,34px);text-shadow:0 0 12px #00e5c0;opacity:0;animation:fxFadeIn .6s ease 2.6s forwards}

/* carnival */
.fx-carn-bg{position:absolute;inset:0;background:#05030a}
.fx-beams{position:absolute;inset:-30%;background:conic-gradient(from 0deg,transparent 0 18deg,#ff2d87 0 22deg,transparent 0 48deg,#ffcc00 0 52deg,transparent 0 78deg,#6d5cff 0 82deg,transparent 0 100deg);opacity:.35;animation:fxSpin 8s linear infinite;will-change:transform;mix-blend-mode:screen}
.fx-burst{position:absolute;left:50%;top:38%;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 0 #ffcc00;animation:fxBurst 1.2s ease-out infinite}
@keyframes fxBurst{0%{box-shadow:0 0 0 0 rgba(255,204,0,.8),0 0 0 0 rgba(255,45,135,.5)}100%{box-shadow:0 0 0 90px rgba(255,204,0,0),0 0 0 140px rgba(255,45,135,0)}}
.fx-invite{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.6);width:min(90vw,420px);padding:16px 18px;text-align:center;border-radius:16px;background:linear-gradient(180deg,rgba(40,10,40,.75),rgba(10,6,20,.9));border:2px solid #ffcc00;color:#fff;font-weight:800;font-size:clamp(16px,4.6vw,24px);text-shadow:0 0 12px #ff2d87;opacity:0;animation:fxInvite 6.2s cubic-bezier(.2,1.4,.3,1) forwards;box-shadow:0 0 24px rgba(255,45,135,.45),0 0 40px rgba(255,204,0,.25)}
@keyframes fxInvite{0%,28%{opacity:0;transform:translate(-50%,-40%) scale(.5)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}52%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.fx-combo{position:absolute;right:8%;top:16%;font-weight:900;font-size:clamp(36px,12vw,72px);color:#ffcc00;text-shadow:0 0 18px #ff2d87,0 4px 0 #7a1;transform:scale(0);animation:fxCombo 6.2s cubic-bezier(.2,1.6,.3,1) forwards}
@keyframes fxCombo{0%,32%{transform:scale(0) rotate(-12deg);opacity:0}42%{transform:scale(1.3) rotate(4deg);opacity:1}55%,100%{transform:scale(1) rotate(0);opacity:1}}
.fx-rocket{position:absolute;bottom:-10%;width:10px;height:36px;background:linear-gradient(#fff,#ffcc00 40%,#ff2d87);border-radius:4px 4px 6px 6px;animation:fxRocket .9s ease-in forwards;box-shadow:0 0 10px #ffcc00}
@keyframes fxRocket{to{transform:translate3d(var(--dx,0),-120vh,0);opacity:.2}}

/* neon / KTV */
.fx-neon-bg{position:absolute;inset:0;background:#080806}
.fx-neon-frame{position:absolute;inset:10px;border:10px solid transparent;border-image:repeating-linear-gradient(45deg,#111 0 12px,#ffcc00 12px 24px) 10;border-image-slice:10;border-image-width:10px;box-shadow:inset 0 0 40px rgba(255,40,80,.2)}
.fx-led{position:absolute;left:8%;right:8%;top:18%;height:52px;overflow:hidden;background:#050505;border:2px solid #222;border-radius:6px;box-shadow:inset 0 0 12px #000,0 0 8px #ff2a2a}
.fx-led span{display:inline-block;white-space:nowrap;color:#ff2a2a;font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:28px;letter-spacing:.2em;line-height:52px;text-shadow:0 0 8px #ff2a2a,0 0 16px #ff0022;padding-left:100%;animation:promoMq 9s linear infinite}
.fx-neon-sign{position:absolute;left:10%;right:10%;top:40%;text-align:center;font-weight:900;font-size:clamp(22px,7vw,40px);color:#ffef8a;text-shadow:0 0 8px #ffcc00,0 0 22px #ff4d00,0 0 40px #ff2a2a;animation:fxBeat 1s ease-in-out infinite}
@keyframes fxBeat{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.06);filter:brightness(1.35)}}
.fx-rings{position:absolute;left:50%;top:62%;width:40px;height:40px;border:2px solid rgba(255,204,0,.5);border-radius:50%;transform:translate(-50%,-50%);animation:fxRings 1s ease-out infinite}
@keyframes fxRings{to{width:220px;height:220px;opacity:0}}

@media (prefers-reduced-motion:reduce){
  .fx-excv,.fx-boom,.fx-arm,.fx-bucket,.fx-wheel,.fx-hook,.fx-banner,.fx-flash,.fx-gear,.fx-piston i,.fx-frame,.fx-shine,.fx-beams,.fx-invite,.fx-combo,.fx-rocket,.fx-led span,.fx-neon-sign,.fx-rings,.fx-dig-title,.fx-crane-title,.fx-gear-text,.fx-burst,.fx-slew,.fx-trolley,.fx-cable,.fx-hoist,.fx-pendulum,.fx-crane-banner,.fx-crane-flash,.fx-dump-truck,.fx-dump-bed,.fx-dump-ram,.fx-wh,.fx-crawler,.fx-craw-boom,.fx-craw-hang,.fx-craw-ban,.fx-track-pad,.fx-haul-scene,.fx-haul,.fx-htire,.fx-vip,.fx-mine-load,.fx-blast,.fx-wall,.fx-hole,.fx-tbm-svg,.fx-cutter{animation:none!important}
  .fx-excv{left:20%}
}

/* ticker LED + hazard */
#promoTicker{position:fixed;left:0;right:0;top:calc(108px + env(safe-area-inset-top));z-index:26;display:flex;align-items:center;gap:8px;height:42px;padding:0 6px 0 10px;background:#0b0b0c;color:#ffcc33;box-shadow:0 4px 16px rgba(0,0,0,.4);border-top:7px solid #111;border-bottom:7px solid #111;border-image:repeating-linear-gradient(45deg,#111 0 8px,#ffcc00 8px 16px) 7;font-family:ui-monospace,Menlo,"SF Mono",monospace;letter-spacing:.06em;text-shadow:0 0 6px #ffb000,0 0 12px rgba(255,140,0,.7)}
#promoTicker.hide{display:none!important}
#promoTicker .promo-tag{flex:0 0 auto;background:#ffcc00;color:#1a1400;border-radius:4px;padding:1px 6px;font-size:11px;font-weight:800;text-shadow:none;letter-spacing:0}
#promoTicker .mq{flex:1;min-width:0;overflow:hidden;height:28px;line-height:28px;font-size:14px;font-weight:700}
#promoTicker .mq-track{display:inline-block;white-space:nowrap;padding-left:100%;animation:promoMq 18s linear infinite}
#promoTicker .mq-track b{margin:0 24px;font-weight:700}
#promoTicker .mq-track button{border:0;background:none;color:#ffee99;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;padding:0;text-shadow:0 0 6px #ffcc00}
@keyframes promoMq{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
#promoTickerX{flex:0 0 36px;height:36px;border:0;background:none;color:#ffcc33;font-size:20px;cursor:pointer}
@media (orientation:landscape) and (min-width:600px){#promoTicker{left:390px;top:calc(58px + env(safe-area-inset-top))}}
body.fs #promoTicker{left:0;top:calc(58px + env(safe-area-inset-top))}
@media (prefers-reduced-motion:reduce){#promoTicker .mq-track{animation:none;padding-left:0}}

/* map construction beacon */
#map rect.b.pglow{stroke:#ffcc00;stroke-width:1.8}
#map .pglow-ring{fill:#ffcc00;fill-opacity:.16;stroke:#ffcc00;stroke-opacity:.9}
#map .pbeacon-beam{fill:#ffcc00;fill-opacity:.38;stroke:none}
#map .pbeacon-core{fill:#ffef8a;stroke:#ff9a00;stroke-width:.6;filter:none}
#map .pbeacon{animation:fxSpin 2.2s linear infinite;transform-box:fill-box;transform-origin:center}
#map .pbadge rect{fill:#ffcc00;stroke:#1a1400}
#map .pbadge text{fill:#1a1400;font-weight:800}
@media (prefers-reduced-motion:reduce){#map .pbeacon{animation:none}#map .pglow-ring{animation:promoPulse 1.4s ease-in-out infinite}}

/* form theme picker */
.fx-pick{margin-top:10px}
.fx-opt{display:flex;gap:10px;align-items:center;margin:8px 0;padding:8px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer}
.fx-opt.on{border-color:#c48a00;background:linear-gradient(90deg,rgba(255,204,0,.12),transparent)}
.fx-thumb{flex:0 0 120px;width:120px;height:68px;border-radius:8px;overflow:hidden;background:#111;position:relative;box-shadow:inset 0 0 0 1px rgba(255,204,0,.25)}
.fx-thumb svg{width:100%;height:100%;display:block}
.fx-opt-m{flex:1;min-width:0}
.fx-opt-m b{display:block;font-size:14px}
.fx-opt .btn{flex:0 0 auto;min-height:36px;margin-top:4px}
@media (prefers-color-scheme:dark){.fx-opt.on{background:linear-gradient(90deg,rgba(255,204,0,.16),transparent)}}
