/* ==========================================================================
 * duel-fx.css — hoạt ảnh bàn đấu (xem duel-fx.js). Lớp #fx-layer phủ cả sân
 * 800x600, không bắt chuột.
 * ========================================================================== */
#fx-layer { position: absolute; left: 0; top: 0; width: 800px; height: 600px; pointer-events: none; z-index: 45; overflow: visible; }
.fx { position: absolute; pointer-events: none; will-change: transform, opacity; }
.fx-ghost img { display: block; width: 100%; height: 100%; border-radius: 3px; box-shadow: 1px 1px 6px rgba(0,0,0,.7); backface-visibility: hidden; }
.fx-ghost.dim { opacity: .6; }
.fx-ghost.glow-gold img { box-shadow: 0 0 18px 5px rgba(255,211,106,.95), 1px 1px 6px rgba(0,0,0,.7); }
.fx-ghost.glow-violet img { box-shadow: 0 0 18px 5px rgba(170,90,255,.95); }
.fx-ghost.glow-pink img { box-shadow: 0 0 18px 5px rgba(255,110,200,.95); }
.fx-ghost.reveal img { border: 2px solid #fff; border-radius: 6px; }
.fx-ghost.reveal.green img { box-shadow: 0 0 40px 10px rgba(60,230,120,.9); }
.fx-ghost.reveal.cyan img { box-shadow: 0 0 40px 10px rgba(80,220,255,.9); }
.fx-ghost.reveal.magenta img { box-shadow: 0 0 40px 10px rgba(230,80,220,.9); }
.fx-ghost.reveal.red img { box-shadow: 0 0 40px 10px rgba(255,70,70,.9); }
.fx-ghost.reveal.orange img { box-shadow: 0 0 40px 10px rgba(255,170,50,.9); }
.fx-flash { border-radius: 4px; }
.fx-sprite { background-repeat: no-repeat; image-rendering: auto; }
/* hạt */
.fx-p { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; }
.fx-p.spark { background: radial-gradient(circle, #fff 0 30%, rgba(255,255,255,0) 70%); box-shadow: 0 0 8px 2px #fff; }
.fx-p.spark.gold { background: radial-gradient(circle, #fff6c0 0 30%, rgba(255,210,90,0) 70%); box-shadow: 0 0 8px 3px #ffd36a; }
.fx-p.spark.green { box-shadow: 0 0 8px 3px #5cf08a; }
.fx-p.spark.violet { box-shadow: 0 0 8px 3px #b06aff; }
.fx-p.spark.cyan { box-shadow: 0 0 8px 3px #6ae6ff; }
.fx-p.plus { width: 14px; height: 14px; border-radius: 0; background: none; }
.fx-p.plus::before, .fx-p.plus::after { content: ''; position: absolute; left: 5px; top: 0; width: 4px; height: 14px; background: #6cff8a; box-shadow: 0 0 6px #6cff8a; border-radius: 2px; }
.fx-p.plus::after { transform: rotate(90deg); }
.fx-p.heart { width: 16px; height: 16px; border-radius: 0; background: none; }
.fx-p.heart::before { content: '♥'; position: absolute; left: 0; top: -4px; font: 700 16px/16px 'Segoe UI', sans-serif; color: #ff5ea8; text-shadow: 0 0 8px #ff8ac4; }
.fx-p.leaf { width: 12px; height: 7px; border-radius: 50% 0; background: linear-gradient(135deg, #bff57a, #3c9a2a); box-shadow: 0 0 4px rgba(190,255,120,.8); }
.fx-p.flame { width: 12px; height: 20px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 80%, #fff6a0 0 20%, #ff9a1a 45%, rgba(220,40,0,.1) 75%); box-shadow: 0 0 10px 2px rgba(255,140,30,.8); }
/* svg: sét, tia, gió */
.fx-svg svg { overflow: visible; }
.fx-svg .bolt { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.fx-svg .bolt.outer { stroke: #ffe66a; stroke-width: 8; opacity: .75; }
.fx-svg .bolt.inner { stroke: #fff; stroke-width: 2.5; }
.fx-svg .beam { stroke: #fff; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #9ad8ff); }
.fx-svg .beam.pink { stroke: #ff7ac8; filter: drop-shadow(0 0 6px #ff7ac8) drop-shadow(0 0 14px #ff3f9f); }
.fx-svg .beam.gold { stroke: #ffd36a; filter: drop-shadow(0 0 6px #ffd36a) drop-shadow(0 0 14px #ffb300); }
.fx-svg .wind { fill: none; stroke: rgba(225,255,255,.9); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 70 420; filter: drop-shadow(0 0 4px #bff); animation: fxWind 1s linear infinite; }
@keyframes fxWind { from { stroke-dashoffset: 490; } to { stroke-dashoffset: 0; } }
/* nhãn số */
.fx-label { transform: translate(-50%, 0); white-space: nowrap; font: 800 18px/22px 'Segoe UI', Arial, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px #000, 0 0 10px rgba(0,0,0,.8); }
.fx-label.clash { font-size: 16px; padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.5); }
.fx-label.clash.win { color: #ffe36a; border-color: #ffe36a; } .fx-label.clash.lose { color: #ff6a6a; border-color: #ff6a6a; }
.fx-label.boost.up { color: #6cff8a; } .fx-label.boost.down { color: #ff6a6a; }
.fx-label.lp .dmg span { display: inline-block; width: 16px; height: 40px; background-repeat: no-repeat; filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)); }
/* kích hoạt */
.fx-halo { border-radius: 50%; mix-blend-mode: screen; background: conic-gradient(from 0deg, transparent 0 8%, var(--fxc) 12%, transparent 18%, transparent 33%, var(--fxc) 38%, transparent 45%, transparent 58%, var(--fxc) 63%, transparent 70%, transparent 83%, var(--fxc) 88%, transparent 95%); filter: blur(6px); }
.fx-halo::after { content: ''; position: absolute; inset: 25%; border-radius: 50%; background: radial-gradient(circle, var(--fxc) 0 20%, transparent 70%); opacity: .7; }
.fx-halo.green { --fxc: rgba(90,240,140,.9); } .fx-halo.cyan { --fxc: rgba(100,225,255,.9); } .fx-halo.magenta { --fxc: rgba(240,100,230,.9); } .fx-halo.red { --fxc: rgba(255,80,80,.9); } .fx-halo.orange { --fxc: rgba(255,180,60,.9); } .fx-halo.gold { --fxc: rgba(255,211,106,.9); }
.fx-tag { transform: translateX(-50%); padding: 3px 14px; border-radius: 12px; font: 900 14px/18px 'Segoe UI', Arial, sans-serif; letter-spacing: 2px; color: #111; background: #fff; box-shadow: 0 0 14px #fff; }
.fx-tag.green { background: #5cf08a; } .fx-tag.cyan { background: #6ae6ff; } .fx-tag.magenta { background: #ff7ae6; } .fx-tag.red { background: #ff6a6a; } .fx-tag.orange { background: #ffb347; }
.fx-negate { border-radius: 50%; border: 6px solid #ff2a2a; box-shadow: 0 0 20px #ff2a2a, inset 0 0 20px rgba(255,40,40,.6); display: flex; align-items: center; justify-content: center; }
.fx-negate::before { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 8px; margin-top: -4px; background: #ff2a2a; transform: rotate(-45deg); box-shadow: 0 0 10px #ff2a2a; }
.fx-negate span { font: 900 18px/20px 'Segoe UI', Arial, sans-serif; color: #fff; text-shadow: 0 0 6px #ff2a2a, 0 1px 2px #000; letter-spacing: 1px; }
.fx-negate.seal span { font-size: 22px; }
/* xoáy, cột sáng, vòng phép */
.fx-vortex { border-radius: 50%; }
.fx-vortex.dark { background: radial-gradient(circle, #000 0 18%, #1a0630 40%, rgba(60,10,90,.6) 60%, transparent 72%); box-shadow: 0 0 40px 10px rgba(40,0,70,.8); }
.fx-vortex.dark::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 20%, rgba(150,80,255,.7) 25%, transparent 35%, transparent 55%, rgba(150,80,255,.7) 62%, transparent 72%, transparent 88%, rgba(150,80,255,.6) 93%, transparent); filter: blur(3px); }
.fx-vortex.light { background: conic-gradient(from 0deg, transparent 0 15%, rgba(255,255,255,.9) 22%, transparent 32%, transparent 48%, rgba(120,230,255,.9) 56%, transparent 66%, transparent 82%, rgba(255,255,255,.9) 90%, transparent); filter: blur(2px); mix-blend-mode: screen; }
.fx-pillar { background: linear-gradient(180deg, rgba(255,245,200,0) 0, rgba(255,240,170,.85) 40%, rgba(255,255,255,.95) 100%); filter: blur(3px); mix-blend-mode: screen; border-radius: 40px 40px 10px 10px; }
.fx-pillar.fusion { background: linear-gradient(180deg, rgba(120,230,255,0) 0, rgba(120,230,255,.85) 40%, #fff 100%); }
.fx-pillar.ritual { background: linear-gradient(180deg, rgba(190,110,255,0) 0, rgba(190,110,255,.85) 40%, #fff 100%); }
.fx-ring { border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 16px 4px #fff, inset 0 0 16px 4px #fff; }
.fx-ring.gold { border-color: #ffd36a; box-shadow: 0 0 16px 4px #ffd36a, inset 0 0 16px 4px rgba(255,211,106,.8); }
.fx-ring.green { border-color: #5cf08a; box-shadow: 0 0 16px 4px #5cf08a, inset 0 0 16px 4px rgba(92,240,138,.8); }
.fx-ring.cyan { border-color: #6ae6ff; box-shadow: 0 0 16px 4px #6ae6ff, inset 0 0 16px 4px rgba(106,230,255,.8); }
.fx-ring.magenta { border-color: #ff7ae6; box-shadow: 0 0 16px 4px #ff7ae6, inset 0 0 16px 4px rgba(255,122,230,.8); }
.fx-ring.red { border-color: #ff6a6a; box-shadow: 0 0 16px 4px #ff6a6a, inset 0 0 16px 4px rgba(255,106,106,.8); }
.fx-ring.orange { border-color: #ffb347; box-shadow: 0 0 16px 4px #ffb347, inset 0 0 16px 4px rgba(255,179,71,.8); }
.fx-ring.ritual { border: 3px dashed #d49cff; box-shadow: 0 0 18px 4px #b06aff; }
.fx-ring.ritual::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 2px dotted #fff; }
.fx-ring.ritual::after { content: '✦ ✧ ✦ ✧ ✦ ✧'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #f0d8ff; font-size: 14px; letter-spacing: 6px; text-shadow: 0 0 8px #b06aff; white-space: nowrap; }
.fx-ankh { transform: translate(-50%, 0); font: 700 46px/46px 'Segoe UI Symbol', 'Segoe UI', sans-serif; color: #ffe9a0; text-shadow: 0 0 10px #ffd36a, 0 0 22px #ffb300; }
/* gươm ánh sáng */
.fx-sword { width: 16px; height: 150px; background: linear-gradient(90deg, rgba(255,255,255,.2), #fff 45%, #cfe9ff 55%, rgba(255,255,255,.2)); clip-path: polygon(50% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); box-shadow: 0 0 18px 6px rgba(255,255,200,.9); filter: drop-shadow(0 0 10px #fff); }
.fx-sword::after { content: ''; position: absolute; left: -16px; right: -16px; bottom: 20px; height: 8px; background: linear-gradient(90deg, #ffd36a, #fff, #ffd36a); border-radius: 4px; box-shadow: 0 0 10px #ffd36a; }
.fx-rowglow { background: radial-gradient(ellipse at center, rgba(255,255,200,.55), rgba(255,255,200,0) 70%); }
/* gương, quét sáng, sóng, hố, lửa */
.fx-mirror { transform-origin: 50% 100%; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(230,245,255,.6) 50%, rgba(255,255,255,.12)); border: 1px solid rgba(255,255,255,.85); border-radius: 4px; box-shadow: 0 0 20px rgba(200,230,255,.8), inset 0 0 30px rgba(255,255,255,.5); }
.fx-sweep { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0)); filter: blur(1px); }
.fx-wave { border-radius: 45% 55% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(90deg, rgba(40,120,255,0), rgba(90,170,255,.7) 35%, rgba(255,255,255,.95) 55%, rgba(120,200,255,.8) 70%, rgba(40,120,255,0)); filter: blur(1.5px); box-shadow: 0 0 30px rgba(120,200,255,.8); }
.fx-hole { border-radius: 50%; background: radial-gradient(ellipse at center, #000 0 45%, #2a1a10 62%, rgba(40,25,15,0) 72%); box-shadow: 0 0 10px 2px rgba(0,0,0,.8), inset 0 0 12px #000; }
.fx-fireball { width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: radial-gradient(circle, #fff9c0 0 25%, #ffb320 50%, rgba(255,60,0,.4) 75%, transparent); box-shadow: 0 0 20px 8px rgba(255,140,30,.9), 0 0 40px 16px rgba(255,80,0,.5); }
.fx-fireball.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.fx-glow.green { border-radius: 10px; background: radial-gradient(ellipse at center, rgba(120,255,160,.7), rgba(120,255,160,0) 70%); }
.fx-fuse { background-repeat: no-repeat; }
.fx-trail { height: 10px; margin-top: -5px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95)); border-radius: 5px; filter: blur(1px); box-shadow: 0 0 10px #fff; }
.fx-shard { background-repeat: no-repeat; border-radius: 2px; box-shadow: 0 0 4px rgba(0,0,0,.6); }
.fx-fieldbg { background-size: 100% 100%; background-repeat: no-repeat; }
.fx-fieldname { transform: translate(-50%, -50%); } .fx-fieldname img { display: block; max-width: 440px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.8)); }
.fx-next { transform: translate(-50%, -50%); } .fx-next img { display: block; width: 395px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.9)); }

/* lốc xoáy */
.fx-tornado { filter: drop-shadow(0 0 10px rgba(220,235,255,.7)); }
.fx-tornado .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.8); background: linear-gradient(90deg, rgba(255,255,255,.1) 0%, rgba(225,238,255,.9) 35%, rgba(255,255,255,.95) 50%, rgba(225,238,255,.9) 65%, rgba(255,255,255,.1) 100%); box-shadow: 0 0 10px rgba(200,220,255,.7), inset 0 0 8px rgba(255,255,255,.6); animation: fxTornado linear infinite; }
@keyframes fxTornado { from { transform: rotate(0deg) scaleX(1); } 50% { transform: rotate(180deg) scaleX(.85); } to { transform: rotate(360deg) scaleX(1); } }
.fx-ghost.storm img { border: 2px solid #fff; border-radius: 5px; box-shadow: 0 0 30px 8px rgba(200,230,255,.95), 0 0 60px 16px rgba(120,180,255,.5); }

/* gươm tấn công */
.fx-blade { width: 120px; height: 16px; transform: translate(-50%, -50%); filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px rgba(255,230,140,.8)); }
.fx-blade::before { content: ''; position: absolute; left: 34px; top: 1px; width: 86px; height: 14px; background: linear-gradient(180deg, #ffffff 0%, #d9e6f2 45%, #8fa3b8 55%, #ffffff 100%); clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%); }
.fx-blade::after { content: ''; position: absolute; left: 0; top: 4px; width: 34px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #6b4a1a, #c99a3c 40%, #ffd36a 60%, #c99a3c); box-shadow: 0 0 6px #ffd36a; }
.fx-blade .guard, .fx-blade { }
.fx-glint { width: 46px; height: 46px; background: linear-gradient(90deg, transparent 46%, #fff 50%, transparent 54%), linear-gradient(0deg, transparent 46%, #fff 50%, transparent 54%); filter: drop-shadow(0 0 6px #fff); }
.fx-slash { width: 120px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 30%, #fff 70%, rgba(255,255,255,0)); box-shadow: 0 0 12px #fff, 0 0 24px #ffe36a; }

/* Raigeki: mây đen; Dark Hole: lỗ đen; Harpie: gió + lông vũ */
.fx-cloud { background: radial-gradient(ellipse 40% 60% at 15% 70%, #3a3f4c 0 30%, transparent 70%), radial-gradient(ellipse 35% 55% at 40% 55%, #2b2f3a 0 35%, transparent 72%), radial-gradient(ellipse 45% 60% at 65% 65%, #353a47 0 30%, transparent 70%), radial-gradient(ellipse 38% 55% at 88% 60%, #262a35 0 35%, transparent 72%), linear-gradient(180deg, #1a1d26 0, #1a1d26 40%, transparent 100%); filter: blur(2px); }
.fx-svg .bolt.branch { stroke: #fff6c0; stroke-width: 2; opacity: .9; }
.fx-blackhole { border-radius: 50%; background: radial-gradient(circle, #000 0 30%, #070012 38%, rgba(10,0,30,.6) 48%, transparent 60%); box-shadow: 0 0 60px 20px rgba(60,0,110,.8), 0 0 120px 40px rgba(20,0,60,.6); }
.fx-blackhole::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 10%, rgba(170,110,255,.85) 16%, rgba(255,230,255,.95) 20%, transparent 28%, transparent 42%, rgba(120,70,255,.8) 50%, transparent 60%, transparent 74%, rgba(200,150,255,.9) 82%, transparent 92%); filter: blur(3px); mix-blend-mode: screen; }
.fx-blackhole::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: #000; box-shadow: 0 0 30px 14px #000, inset 0 0 20px rgba(120,60,255,.5); }
.fx-gust { border-radius: 40%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(230,245,255,.55) 50%, rgba(255,255,255,0)); filter: blur(4px); }
.fx-p.feather { width: 20px; height: 8px; border-radius: 60% 50% 60% 50%; background: linear-gradient(90deg, #ffffff, #dde9f7 60%, #b8c9dd); box-shadow: 0 0 5px rgba(255,255,255,.9); }
.fx-p.feather::before { content: ''; position: absolute; left: 2px; top: 3px; width: 16px; height: 1px; background: rgba(120,140,170,.7); }

/* Mirror Force: tấm gương */
.fx-mirror2 { border-radius: 6px; border: 2px solid rgba(255,255,255,.95); background: linear-gradient(100deg, rgba(200,225,255,.35) 0%, rgba(255,255,255,.85) 30%, rgba(190,220,255,.5) 50%, rgba(255,255,255,.9) 72%, rgba(200,225,255,.35) 100%); box-shadow: 0 0 24px rgba(220,240,255,.9), inset 0 0 30px rgba(255,255,255,.7); backdrop-filter: blur(1px); }
.fx-mirror2::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,.6); border-radius: 4px; }
.fx-p.glass { width: 10px; height: 14px; border-radius: 2px; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(190,220,255,.6)); box-shadow: 0 0 5px rgba(255,255,255,.9); transform: rotate(20deg); }

/* đồng xu */
.fx-coin { transform-style: preserve-3d; perspective: 600px; }
.fx-coin .face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; font: 900 44px/1 'Segoe UI', Arial, sans-serif; color: #7a5200; border: 6px solid #b8860b; background: radial-gradient(circle at 35% 30%, #fff4b0 0, #ffd24a 40%, #d49a0c 75%, #8a5f00 100%); box-shadow: 0 0 24px rgba(255,211,106,.9), inset 0 0 14px rgba(120,70,0,.6); }
.fx-coin .face.tails { transform: rotateX(180deg); background: radial-gradient(circle at 35% 30%, #fff 0, #cfd8e3 40%, #8d9bb0 75%, #4a5668 100%); border-color: #6d7a8c; color: #2f3a48; }
.fx-label.coin-call { font-size: 16px; color: #ffe36a; }
.fx-label.coin-res { font-size: 22px; padding: 4px 14px; border-radius: 12px; background: rgba(0,0,0,.6); border: 2px solid #fff; }
.fx-label.coin-res.win { color: #6cff8a; border-color: #6cff8a; } .fx-label.coin-res.lose { color: #ff6a6a; border-color: #ff6a6a; }

/* triệu hồi hoành tráng */
.fx-rays { border-radius: 50%; mix-blend-mode: screen; background: conic-gradient(from 0deg, transparent 0 4%, rgba(255,230,150,.75) 6%, transparent 9%, transparent 16%, rgba(255,230,150,.7) 19%, transparent 22%, transparent 29%, rgba(255,230,150,.75) 32%, transparent 35%, transparent 41%, rgba(255,230,150,.7) 44%, transparent 47%, transparent 54%, rgba(255,230,150,.75) 57%, transparent 60%, transparent 66%, rgba(255,230,150,.7) 69%, transparent 72%, transparent 79%, rgba(255,230,150,.75) 82%, transparent 85%, transparent 91%, rgba(255,230,150,.7) 94%, transparent 97%); filter: blur(2px); }
.fx-rays.cyan { background: conic-gradient(from 0deg, transparent 0 4%, rgba(150,230,255,.8) 6%, transparent 9%, transparent 16%, rgba(150,230,255,.7) 19%, transparent 22%, transparent 29%, rgba(150,230,255,.8) 32%, transparent 35%, transparent 41%, rgba(150,230,255,.7) 44%, transparent 47%, transparent 54%, rgba(150,230,255,.8) 57%, transparent 60%, transparent 66%, rgba(150,230,255,.7) 69%, transparent 72%, transparent 79%, rgba(150,230,255,.8) 82%, transparent 85%, transparent 91%, rgba(150,230,255,.7) 94%, transparent 97%); }
.fx-rays.violet { background: conic-gradient(from 0deg, transparent 0 4%, rgba(210,150,255,.8) 6%, transparent 9%, transparent 16%, rgba(210,150,255,.7) 19%, transparent 22%, transparent 29%, rgba(210,150,255,.8) 32%, transparent 35%, transparent 41%, rgba(210,150,255,.7) 44%, transparent 47%, transparent 54%, rgba(210,150,255,.8) 57%, transparent 60%, transparent 66%, rgba(210,150,255,.7) 69%, transparent 72%, transparent 79%, rgba(210,150,255,.8) 82%, transparent 85%, transparent 91%, rgba(210,150,255,.7) 94%, transparent 97%); }
.fx-ghost.epic img { border: 3px solid #fff; border-radius: 8px; box-shadow: 0 0 50px 14px rgba(255,220,120,.95), 0 0 120px 30px rgba(255,190,60,.5); }
.fx-epicname { transform: translateX(-50%); text-align: center; white-space: nowrap; }
.fx-epicname b { display: block; font: 900 26px/30px 'Segoe UI', Arial, sans-serif; color: #ffe36a; letter-spacing: 2px; text-shadow: 0 0 10px #ffb300, 0 0 24px #ff8c00, 0 2px 3px #000; }
.fx-epicname span { display: block; font: 800 15px/20px 'Segoe UI', Arial, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 8px #000; }