/* reward-fx.css — เอฟเฟกต์นอกการต่อสู้ (คู่กับ reward-fx.js) */
#rfx{position:absolute;inset:0;z-index:9000;pointer-events:none;overflow:hidden}
#rfx .rfx-cv{position:absolute;inset:0;width:100%;height:100%;z-index:5}
#stage.rfx-shake>#app,#stage.rfx-shake>#modal{animation:rfxSh .32s linear}
@keyframes rfxSh{0%,100%{translate:0 0}20%{translate:var(--rfx-sh) 0}40%{translate:calc(var(--rfx-sh)*-1) 2px}60%{translate:calc(var(--rfx-sh)*.6) -2px}80%{translate:calc(var(--rfx-sh)*-.4) 0}}

/* ม่านมืดหลังการ์ด */
.rfx-veil{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--c) 22%,#0b0712cc),#05030aee 70%);opacity:0;transition:opacity .3s;pointer-events:auto;z-index:1}
.rfx-veil.on{opacity:1}

/* การ์ดดรอป */
.rfx-card{position:absolute;left:50%;top:48%;width:0;height:0;z-index:3;pointer-events:auto}
.rfx-cardin{position:absolute;left:0;top:0;transform:translate(-50%,-50%) translateY(-520px) rotateY(0deg) scale(.6);opacity:0;filter:drop-shadow(0 0 18px var(--c))}
.rfx-card.in .rfx-cardin{opacity:1;transition:transform .62s cubic-bezier(.3,.1,.4,1),opacity .2s;transform:translate(-50%,-50%) translateY(0) rotateY(1080deg) scale(1)}
.rfx-card.land .rfx-cardin{animation:rfxLand .5s ease-out forwards}
@keyframes rfxLand{0%{transform:translate(-50%,-50%) scale(1.25);filter:brightness(2.4) drop-shadow(0 0 40px var(--c))}100%{transform:translate(-50%,-50%) scale(1.1);filter:brightness(1) drop-shadow(0 0 22px var(--c))}}
.rfx-card.out .rfx-cardin{transition:transform .25s,opacity .25s;transform:translate(-50%,-50%) scale(.9);opacity:0}
.rfx-cardin .soul-card,.rfx-cardin>*{display:block}
.rfx-pillar{position:absolute;left:-90px;top:-460px;width:180px;height:820px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 55%,transparent) 35%,#fff8 50%,color-mix(in srgb,var(--c) 55%,transparent) 65%,transparent);filter:blur(10px);opacity:0;transform:scaleX(.2);mix-blend-mode:screen}
.rfx-card.in .rfx-pillar{animation:rfxPil 1.1s ease-out forwards}
@keyframes rfxPil{0%{opacity:0;transform:scaleX(.2)}30%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.6)}}
.rfx-rays{position:absolute;left:-360px;top:-360px;width:720px;height:720px;border-radius:50%;opacity:0;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--c) 45%,transparent) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 68%);mask:radial-gradient(circle,#000 10%,transparent 68%);animation:rfxSpin 9s linear infinite;mix-blend-mode:screen}
.rfx-card.t0 .rfx-rays,.rfx-card.t1 .rfx-rays{display:none}
.rfx-card.land .rfx-rays{opacity:.9;transition:opacity .4s}
.rfx-card.t4 .rfx-rays{background:repeating-conic-gradient(from 0deg,#ffe27a88 0 5deg,transparent 5deg 12deg)}
@keyframes rfxSpin{to{rotate:360deg}}
.rfx-lbl{position:absolute;left:0;top:190px;transform:translateX(-50%);white-space:nowrap;font:900 26px var(--font);color:#fff;text-shadow:0 0 12px var(--c),0 2px 0 #000,0 0 3px #000;opacity:0}
.rfx-card.land .rfx-lbl{opacity:1;transition:opacity .3s .15s}
.rfx-skip{position:absolute;left:0;top:240px;transform:translateX(-50%);white-space:nowrap;color:#d8ccb4aa;font-size:12px}

/* ซึมซับ / สลาย */
.rfx-suck{animation:rfxSuck .8s ease-in forwards!important}
@keyframes rfxSuck{60%{transform:scale(.9);filter:brightness(2)}100%{transform:scale(.4);opacity:0;filter:brightness(3)}}
.rfx-dust{animation:rfxDust .6s ease-in forwards!important}
@keyframes rfxDust{100%{opacity:0;filter:grayscale(1) blur(3px);transform:translateY(-10px)}}
.rfx-glow{animation:rfxGlow .9s ease-out}
@keyframes rfxGlow{0%{box-shadow:0 0 0 0 #fff,0 0 30px 10px #c88cff;filter:brightness(1.8)}100%{box-shadow:0 0 0 0 transparent;filter:none}}

/* ได้รับไอเทม */
.rfx-gain{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px}
.rfx-gain.in{opacity:1;transform:translate(-50%,-50%) scale(1);transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.rfx-gain.out{opacity:0;transform:translate(-50%,-60%) scale(.95);transition:all .3s}
.rfx-gain .rfx-rays.sm{left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;opacity:.7;z-index:-1}
.rfx-gt{font:900 30px var(--font);color:#ffe9a8;text-shadow:0 0 14px var(--c),0 3px 0 #3a1a06,0 0 3px #000;letter-spacing:1px}
.rfx-items{display:flex;gap:14px}
.rfx-it{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:120px;padding:12px 14px 10px;border-radius:12px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c) 30%,#1a1226),#0b0712f0);border:2px solid var(--c);box-shadow:0 0 24px color-mix(in srgb,var(--c) 60%,transparent),inset 0 0 14px #000a}
.rfx-it>span{width:84px;height:84px;display:grid;place-items:center}
.rfx-it>span .item-art,.rfx-it>span img,.rfx-it>span .gear-svg{width:80px;height:80px;object-fit:contain}
.rfx-it>b{font:800 15px var(--font);color:#fff;text-shadow:0 1px 0 #000}
.rfx-it>small{font-size:12px;color:var(--c);font-weight:700}

/* ค้อนตีทั่ง */
.rfx-anvil{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:3}
.rfx-hammer{display:block;font-style:normal;font-size:72px;filter:drop-shadow(0 0 10px #ffb347);animation:rfxHam .36s ease-in-out infinite;transform-origin:70% 70%}
@keyframes rfxHam{0%,100%{rotate:-35deg}55%{rotate:12deg}}

/* ข้อความลอย */
.rfx-float{position:absolute;z-index:6;transform:translate(-50%,-50%);white-space:nowrap;font:900 28px var(--font);text-shadow:0 3px 0 #000,0 0 4px #000;animation:rfxUp 1.3s ease-out forwards}
.rfx-float.gold{color:#ffd34d}
.rfx-float.heal{color:#8dffa6;font-size:32px}
@keyframes rfxUp{0%{opacity:0;margin-top:20px;scale:.6}15%{opacity:1;margin-top:0;scale:1.15}25%{scale:1}100%{opacity:0;margin-top:-70px}}
.rfx-bump{animation:rfxBump .4s}
@keyframes rfxBump{40%{scale:1.3;filter:brightness(1.8)}}

/* ฟื้นฟู: แสงเขียวจากพื้น */
.rfx-wash{position:absolute;inset:0;background:linear-gradient(0deg,#3dff7a44,transparent 55%);opacity:0;transition:opacity .35s;z-index:1}
.rfx-wash.mp{background:linear-gradient(0deg,#3d9dff40,#3dff7a22 30%,transparent 60%)}
.rfx-wash.on{opacity:1}

/* เลเวลอัป */
.rfx-lv{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0}
.rfx-lv.in{opacity:1}
.rfx-lv.out{opacity:0;transition:opacity .35s}
.rfx-lv .rfx-rays{--c:#ffd34d;left:50%;top:50%;width:640px;height:640px;margin:-320px 0 0 -320px;opacity:.85;z-index:-1}
.rfx-lv::before{content:'';position:absolute;left:50%;top:50%;width:1000px;height:200px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#140a04f2 18%,#140a04f2 82%,transparent);z-index:-1;border-top:2px solid #ffd34d88;border-bottom:2px solid #ffd34d88}
.rfx-lvt{display:flex;font:900 64px var(--font);letter-spacing:2px}
.rfx-lvt i{font-style:normal;color:#ffe27a;background:linear-gradient(#fff6c8,#ffd34d 50%,#ff9a2e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 #5a2a06) drop-shadow(0 0 10px #ffb347);opacity:0;transform:translateY(-40px) scale(1.8)}
.rfx-lv.in .rfx-lvt i{animation:rfxLetter .45s cubic-bezier(.2,1.8,.4,1) forwards;animation-delay:calc(var(--i)*55ms)}
@keyframes rfxLetter{to{opacity:1;transform:none}}
.rfx-lvn{font:800 24px var(--font);color:#fff;text-shadow:0 2px 0 #000}
.rfx-lvn em{font-style:normal;color:#ffd34d;margin:0 6px}.rfx-lvn b{color:#9dff9a}
.rfx-lv small{color:#ffe9b0;font-size:15px;text-shadow:0 1px 0 #000}

/* หน้าก่อนสู้: แถบรางวัลแยกเต็มกว้าง (พี่ 2026-11-09: "มีไอเทมบอกแล้ว UI อุบาทว์") */
#stage .bt-loot{margin:14px auto 4px;max-width:900px;display:flex;align-items:center;gap:16px;padding:10px 18px;border-radius:12px;background:linear-gradient(180deg,#120c1fcc,#0b0712e6);border:1px solid #c9a35a88;box-shadow:inset 0 0 18px #000b,0 6px 18px #0008}
#stage .bt-loot-h{display:flex;flex-direction:column;gap:4px;min-width:150px;padding-right:14px;border-right:1px solid #c9a35a55}
#stage .bt-loot-h>small{color:#c9b88f;font-size:12px;letter-spacing:.5px}
#stage .bt-loot-h>b{font:800 17px var(--font);color:#ffd34d;text-shadow:0 1px 0 #000}
#stage .bt-loot-h>b.x{color:#9fe8ff}
#stage .bt-loot .bt-drops{margin:0;flex:1}
#stage .bt-loot .bt-drops>small{display:none}
#stage .bt-loot .bt-drops>div{display:flex;flex-wrap:nowrap;gap:10px;justify-content:flex-start}
#stage .bt-loot .bd-it{width:56px;height:56px;border-radius:8px;border:2px solid var(--rc,#8a7040);background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--rc,#8a7040) 24%,#1a1226),#0b0712);box-shadow:inset 0 0 10px #000b;margin-bottom:14px}
#stage .bt-loot .bd-it:hover{filter:brightness(1.2);box-shadow:inset 0 0 10px #000b,0 0 12px var(--rc,#c9a35a)}
#stage .bt-loot .bd-it .item-art,#stage .bt-loot .bd-it img{width:44px;height:44px}
#stage .bt-loot .bd-it .vc-glyph{font-size:26px}
#stage .bt-loot .bd-rate{display:block;position:absolute;left:50%;top:calc(100% + 2px);transform:translateX(-50%);font:700 11px var(--font);color:#d8ccb4;white-space:nowrap;text-decoration:none}
.bd-rate{display:none}
.bd-it.r-common{--rc:#9aa4b2}.bd-it.r-rare{--rc:#6ab8ff}.bd-it.r-epic{--rc:#c88cff}.bd-it.r-legendary{--rc:#ffcf5a}.bd-it.bd-card{--rc:#c88cff}.bd-it.r-gear{--rc:#9fe8ff}.bd-it.r-gold{--rc:#ffcf5a}.bd-it.r-exp{--rc:#7dff8a}

/* ห้องเอฟเฟกต์ */
#stage .fxl-top{display:flex;align-items:center;gap:16px;margin-bottom:8px}
#stage .fxl-top>p{flex:1;margin:0;font-size:13px;color:#d8ccb4}
#stage .fxl-demo{display:flex;align-items:center;gap:10px;color:#c9a35a}
#stage .fxl-card .soul-card{width:64px;height:90px}
#stage .fxl-slot{width:56px;height:56px;display:grid;place-items:center;border-radius:8px;border:2px solid #8a7040;background:#0b0712;color:#c9a35a;font-size:22px}
#stage .fxl .inventory-row{grid-template-columns:auto 1fr auto}
#stage .fxl-st{font:800 11px var(--font);color:#10121a;background:var(--c);border-radius:10px;padding:2px 8px;white-space:nowrap}
#stage .fxl-where{color:#9a8f7a;font-size:11.5px;white-space:nowrap}
.fxl-chest{position:absolute;left:50%;top:50%;width:420px;height:340px;transform:translate(-50%,-50%);z-index:8999;pointer-events:none;background:radial-gradient(circle,#2a1a40ee,#0b0712dd 70%,transparent);border-radius:50%}
.fxl-chest canvas{width:100%;height:100%}