@import url("https://cdn.jsdelivr.net/npm/remixicon@4.9.1/fonts/remixicon.css"); #fd-root{position:fixed;inset:0;z-index:900;overflow:hidden;background:#05070f;color:#dbe4f5; font-family:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:13px;line-height:1.4; -webkit-font-smoothing:antialiased;user-select:none; cursor:url("data:image/svg+xml;utf8,") 5 2,default; --fd-panel:rgba(13,19,35,.92);--fd-line:rgba(120,160,255,.14);--fd-text:#dbe4f5;--fd-dim:#8290ab;--fd-faint:#525d78; --fd-accent:#4da3ff;--fd-gold:#fbbf24;--fd-danger:#ff5a6a;--fd-hp:#ff5f6d} #fd-root *{margin:0;padding:0;box-sizing:border-box} #fd-root canvas{display:block} #fd-root #fd-game{touch-action:none;width:100%;height:100%} #fd-root .remix-icon, #fd-root [class^=ri-], #fd-root [class*=" ri-"]{font-style:normal;display:inline-block;line-height:1;vertical-align:-.125em} #fd-root .fd-hud{position:absolute;pointer-events:none;z-index:10;transition:opacity .18s} /* 每一条都要带自己的 id：`#fd-root #fd-h-tiers` 里写着 display:flex， 特异性比 `#fd-root .fd-hud.dim` 高，光靠类名压不住 */ #fd-root #fd-h-left.dim{visibility:hidden} #fd-root #fd-h-feed.dim, #fd-root #fd-h-tiers.dim, #fd-root #fd-h-buffs.dim{display:none} #fd-root .fd-hcard{background:var(--fd-panel);border:1px solid var(--fd-line);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.45)} #fd-root #fd-gear{position:absolute;left:16px;top:16px;z-index:11;width:36px;height:36px; display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto; border:1px solid var(--fd-line);border-radius:11px;background:var(--fd-panel); color:var(--fd-dim);font-size:18px;transition:color .15s,border-color .15s} #fd-root #fd-gear:hover{color:var(--fd-text);border-color:rgba(120,180,255,.42)} /* 血量卡和淘汰播报是**一列**：播报跟在卡片下面。 原来播报的 top 是写死的 284px，跟卡片实际高度对不上 —— 卡里少一行（比如 「一碰即死」把血条收起来）就空出一大截，多一行就压上去。 */ #fd-root #fd-hcol{left:16px;top:62px;width:206px;display:flex;flex-direction:column} #fd-root #fd-h-left{width:100%} #fd-root .fd-hp-wrap{padding:11px 13px 12px} #fd-root.fd-instant .fd-hp-wrap{display:none} #fd-root .fd-hp-top{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--fd-dim);margin-bottom:7px} #fd-root .fd-hp-top i{font-size:14px;color:var(--fd-hp)} #fd-root .fd-hp-top .v{margin-left:auto;font-size:14px;font-weight:700;color:var(--fd-text);font-variant-numeric:tabular-nums} #fd-root .fd-hp-bar{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden} #fd-root .fd-hp-bar span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#c22c3d,#ff5f6d);transition:width .12s linear} #fd-root .fd-sline{display:flex;align-items:center;gap:8px;font-size:12px;padding:7px 13px;border-top:1px solid var(--fd-line)} #fd-root .fd-sline i{font-size:15px;width:17px;text-align:center;color:var(--fd-dim)} #fd-root .fd-sline .lb{color:var(--fd-dim);font-size:11.5px} #fd-root .fd-sline .v{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums} #fd-root #fd-pips{display:flex;gap:2.5px;padding:9px 13px 11px;border-top:1px solid var(--fd-line)} #fd-root .fd-pip{width:8px;height:5px;border-radius:3px;background:#1c2438} #fd-root #fd-h-tiers{left:7px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column-reverse;gap:3px} #fd-root .fd-tl{width:21px;height:21px;border-radius:5px;display:flex;align-items:center;justify-content:center; font-size:10px;font-weight:700;line-height:1;border:1.5px solid transparent;opacity:.28} #fd-root .fd-tl.has{opacity:1} #fd-root .fd-tl.top{border-color:#fff;transform:scale(1.18)} #fd-root #fd-h-buffs{left:16px;bottom:40px;display:flex;flex-direction:column;gap:7px} #fd-root .fd-buff{position:relative;display:flex;align-items:center;gap:8px;padding:7px 11px 7px 8px;font-size:11.5px;min-width:150px} #fd-root .fd-buff-ic{width:26px;height:26px;flex-shrink:0} /* 道具图标：img/buffs.webp 那张 5×1 精灵图，地址由 module.js 写进 --fd-buffs。 五格的顺序跟 art.js 的 BUFF_ART 一致：疾旋、疾行、长臂、回血、防护罩。 站长在后台传了自己的图时，module/buffs.js 会直接把 background-image 写在行内盖掉 */ #fd-root .fd-bicon{background-image:var(--fd-buffs);background-repeat:no-repeat;background-size:500% 100%} #fd-root .fd-bicon.b0{background-position:0 0} #fd-root .fd-bicon.b1{background-position:25% 0} #fd-root .fd-bicon.b2{background-position:50% 0} #fd-root .fd-bicon.b3{background-position:75% 0} #fd-root .fd-bicon.b4{background-position:100% 0} #fd-root .fd-bicon.own{background-size:contain;background-position:center} #fd-root .fd-buff-nm{font-weight:600} #fd-root .fd-buff-t{margin-left:auto;color:var(--fd-dim);font-variant-numeric:tabular-nums} #fd-root .fd-buff-bar{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:0 0 12px 12px;overflow:hidden} #fd-root .fd-buff-bar span{display:block;height:100%} #fd-root #fd-h-right{right:16px;top:16px;width:212px;pointer-events:auto;transition:opacity .18s} #fd-root #fd-h-right.dim{display:none} #fd-root .fd-ph{display:flex;align-items:center;gap:7px;padding:9px 12px 7px;font-size:11.5px;color:var(--fd-dim);cursor:pointer} #fd-root .fd-ph i{font-size:14px} #fd-root .fd-ph .spacer{flex:1} #fd-root .fd-ph b{color:var(--fd-text);font-variant-numeric:tabular-nums} #fd-root #fd-rtoggle{font-size:17px;color:var(--fd-faint);margin-left:3px;transition:transform .22s,color .15s} #fd-root #fd-h-right .fd-ph:hover #fd-rtoggle{color:var(--fd-text)} #fd-root #fd-h-right.folded #fd-rtoggle{transform:rotate(180deg)} #fd-root #fd-h-right.folded #fd-mini, #fd-root #fd-h-right.folded #fd-board{display:none} #fd-root #fd-h-right.folded .fd-ph{padding-bottom:9px} #fd-root #fd-mini{margin:0 auto;width:186px;height:186px;border-radius:8px;background:rgba(4,7,14,.55)} #fd-root #fd-board{padding:7px 11px 9px;border-top:1px solid var(--fd-line);margin-top:8px} #fd-root .fd-bd{display:flex;align-items:center;gap:7px;font-size:11.5px;padding:3.5px 0} #fd-root .fd-bd-r{width:14px;height:14px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;background:rgba(255,255,255,.07);color:var(--fd-faint);flex-shrink:0} #fd-root .fd-bd.me .fd-bd-r{background:rgba(77,163,255,.24);color:#9ed0ff} #fd-root .fd-bd-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b6c2da} #fd-root .fd-bd.me .fd-bd-n{color:#9ed0ff;font-weight:600} #fd-root .fd-bd-b{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;flex-shrink:0} #fd-root .fd-bd-b span{display:block;height:100%;border-radius:2px} #fd-root .fd-bd-v{width:42px;text-align:right;color:var(--fd-dim);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:11px} #fd-root #fd-h-feed{margin-top:16px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;width:100%} #fd-root .fd-feed{background:rgba(10,16,30,.9);border:1px solid var(--fd-line);border-radius:8px;padding:6px 11px;font-size:11.5px; display:flex;align-items:center;gap:6px;white-space:nowrap;max-width:100%;overflow:hidden} #fd-root .fd-feed i{font-size:13px;color:var(--fd-danger)} #fd-root .fd-feed .k{color:#9ed0ff} #fd-root .fd-feed .v{color:#8b95ac} #fd-root .fd-feed.mine{border-color:rgba(251,191,36,.5);background:rgba(38,28,8,.86)} #fd-root .fd-feed.mine .k{color:var(--fd-gold)} #fd-root #fd-spec{left:50%;bottom:42px;transform:translateX(-50%);display:none;align-items:center;gap:4px; background:rgba(10,16,30,.86);border:1px solid var(--fd-line);border-radius:999px;padding:6px 8px 6px 16px; pointer-events:auto;font-size:12.5px;white-space:nowrap} #fd-root #fd-spec.on{display:flex} #fd-root #fd-spec > i:first-child{font-size:15px;color:var(--fd-accent);margin-right:5px} #fd-root #fd-spec-name{min-width:96px;max-width:150px;text-align:center;color:#9ed0ff;font-weight:700; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;padding:2px 8px;border-radius:8px} #fd-root #fd-spec-name:hover{background:rgba(255,255,255,.09)} #fd-root #fd-spec-menu{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);display:none; width:214px;max-height:296px;overflow-y:auto;padding:5px;border-radius:12px; background:rgba(14,19,30,.96);border:1px solid rgba(255,255,255,.09);box-shadow:0 10px 30px rgba(0,0,0,.45)} #fd-root #fd-spec-menu.on{display:block} #fd-root .fd-specrow{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:none;border-radius:8px; background:none;color:var(--fd-text);font-size:12px;cursor:pointer;text-align:left} /* 弹幕：顶上一条道，右进左出。**只有一条** —— 叠起来就看不清场上在打什么 */ #fd-root #fd-dm{position:absolute;left:0;right:0;top:8px;height:30px;overflow:hidden; pointer-events:none;z-index:5} #fd-root .fd-dm-row{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform; font-size:15px;font-weight:600;line-height:30px;padding:0 12px;border-radius:15px; background:rgba(9,14,26,.55);backdrop-filter:blur(2px); text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 12px currentColor} #fd-root .fd-dm-row i{font-style:normal;opacity:.62;font-weight:500} #fd-root .fd-dm-row.mine{box-shadow:0 0 0 1px currentColor inset,0 0 14px rgba(255,255,255,.14)} /* 发弹幕那一行：浮在观战条**正上方**，开着才占地方。 观战条自己贴着 bottom:42px、连边框一共 44px 高，所以这里从 94px 起 —— 压着它的话输入框和色盘的下半截会被整条盖住，字都看不见 */ #fd-root #fd-dm-box{position:absolute;left:50%;bottom:94px;transform:translateX(-50%); display:none;align-items:center;gap:8px;padding:8px 10px;border-radius:12px; background:rgba(9,14,26,.9);border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:8} #fd-root #fd-dm-box.on{display:flex} #fd-root #fd-dm-colors{display:flex;gap:5px} #fd-root .fd-dm-c{width:17px;height:17px;border-radius:50%;border:2px solid transparent; cursor:pointer;padding:0;transition:transform .12s} #fd-root .fd-dm-c:hover{transform:scale(1.18)} #fd-root .fd-dm-c.on{border-color:rgba(255,255,255,.9)} #fd-root #fd-dm-in{width:240px;height:32px;padding:0 10px;border-radius:8px;font-size:14px; border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);outline:none} #fd-root #fd-dm-in::placeholder{color:#5a6683} #fd-root #fd-dm-cost{font-size:12.5px;font-weight:600;color:var(--fd-gold);white-space:nowrap} #fd-root #fd-dm-cost.poor{color:#ff7b8c} #fd-root #fd-dm-send{height:32px;padding:0 14px;border-radius:8px;border:none;cursor:pointer; font-size:13px;font-weight:600;color:#08101f;background:linear-gradient(180deg,#9ed0ff,#60a6ff)} #fd-root #fd-dm-send:disabled{opacity:.5;cursor:default} #fd-root #fd-dm-btn.poor{opacity:.55} /* 手机端整个不出：小屏那一行本来就挤 */ #fd-root.fd-mb #fd-dm,#fd-root.fd-mb #fd-dm-box,#fd-root.fd-mb #fd-dm-btn{display:none} /* 摇杆：手指落在哪儿就画在哪儿，中心对准落点 */ #fd-root #fd-stick{position:fixed;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%; border:2px solid rgba(255,255,255,.16);background:rgba(12,18,32,.28);display:none;pointer-events:none;z-index:6} #fd-root #fd-stick.on{display:block} #fd-root #fd-stick b{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px; border-radius:50%;background:rgba(255,255,255,.3);box-shadow:0 2px 10px rgba(0,0,0,.35)} #fd-root .fd-specrow:hover{background:rgba(255,255,255,.08)} #fd-root .fd-specrow.off{opacity:.35;pointer-events:none} #fd-root .fd-specrow.on{background:rgba(96,166,255,.18);color:#9ed0ff} #fd-root .fd-specrow .rk{width:16px;color:var(--fd-dim);font-weight:700;text-align:center;flex:none} #fd-root .fd-specrow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #fd-root .fd-specrow .n{display:flex;align-items:center;gap:3px;color:var(--fd-dim);flex:none} #fd-root .fd-specempty{padding:12px;text-align:center;color:var(--fd-dim);font-size:12px} #fd-root .fd-specbtn{width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.06);color:var(--fd-dim); font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .15s,color .15s} #fd-root .fd-specbtn:hover{background:rgba(255,255,255,.13);color:var(--fd-text)} #fd-root #fd-spec-exit, #fd-root #fd-spec-join{width:auto;height:28px;padding:0 14px;border-radius:999px;font-size:12px;font-weight:600;margin-left:6px;background:rgba(255,255,255,.07)} #fd-root #fd-spec-join{background:#f2ac1c;color:#38220a} #fd-root #fd-spec-join:hover{background:#ffc23a;color:#38220a} #fd-root.watch #fd-h-left, #fd-root.watch #fd-h-tiers, #fd-root.watch #fd-h-buffs{display:none} #fd-root #fd-count{position:absolute;left:50%;top:17%;z-index:14;pointer-events:none;display:none; font-size:104px;font-weight:900;line-height:1;color:#ff3b4e;letter-spacing:2px;font-variant-numeric:tabular-nums; transform:translateX(-50%)} #fd-root #fd-count.on{display:block} #fd-root #fd-count-tip{position:absolute;left:50%;top:calc(17% - 28px);z-index:14;pointer-events:none;display:none; transform:translateX(-50%);font-size:13px;letter-spacing:4px;color:#ff8a9a;text-indent:4px;white-space:nowrap} #fd-root #fd-count-tip.on{display:block} #fd-root #fd-edge{position:absolute;inset:0;z-index:12;pointer-events:none} #fd-root #fd-edge i{position:absolute;display:block;opacity:0;transition:opacity .12s linear} #fd-root #fd-edge .t, #fd-root #fd-edge .b{left:0;right:0;height:92px} #fd-root #fd-edge .l, #fd-root #fd-edge .r{top:0;bottom:0;width:92px} #fd-root #fd-edge .t{top:0;background:linear-gradient(180deg,rgba(255,58,86,.62),rgba(255,58,86,0))} #fd-root #fd-edge .b{bottom:0;background:linear-gradient(0deg,rgba(255,58,86,.62),rgba(255,58,86,0))} #fd-root #fd-edge .l{left:0;background:linear-gradient(90deg,rgba(255,58,86,.62),rgba(255,58,86,0))} #fd-root #fd-edge .r{right:0;background:linear-gradient(270deg,rgba(255,58,86,.62),rgba(255,58,86,0))} #fd-root #fd-killnote{position:absolute;left:50%;top:12%;transform:translateX(-50%);z-index:13;pointer-events:none; display:none;white-space:nowrap;font-size:34px;font-weight:800;letter-spacing:1px; color:#ffd75f;text-shadow:0 0 26px rgba(255,180,40,.55),0 3px 14px rgba(0,0,0,.85)} #fd-root #fd-killnote.on{display:block} #fd-root #fd-killnote b{color:#fff;text-shadow:0 0 22px rgba(255,255,255,.5),0 3px 14px rgba(0,0,0,.85)} #fd-root #fd-killnote i{display:block;font-style:normal;font-size:13px;font-weight:600;letter-spacing:6px; color:rgba(255,215,95,.72);text-align:center;margin-top:2px;text-shadow:0 2px 10px rgba(0,0,0,.8)} /* 别人互杀那一条：小一号、素一点 —— 自己动手那一下才是主角 */ #fd-root #fd-killnote.duel{font-size:21px;color:#cfe0ff; text-shadow:0 0 18px rgba(120,170,255,.4),0 3px 12px rgba(0,0,0,.85)} #fd-root #fd-killnote.duel b{color:#fff;text-shadow:0 0 16px rgba(255,255,255,.35),0 3px 12px rgba(0,0,0,.85)} #fd-root #fd-lowhp{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0; box-shadow:inset 0 0 90px 18px rgba(255,32,58,.62)} #fd-root #fd-lowhp.on{animation:fd-lowhp .42s ease-in-out 3} @keyframes fd-lowhp{0%,100%{opacity:0}50%{opacity:1}} #fd-root #fd-hurt{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;box-shadow:inset 0 0 62px 8px rgba(255,40,64,.36);transition:opacity .2s} /* 这一页整屏是游戏，站点自己的浮层（全站通知、迷你播放器）盖在上面很出戏。 这份样式表只在本模块的页面加载，所以直接按名字藏掉就行。 */ .lssn-stack, .ls-now-toast, .ls-mini-music{display:none !important} /* 进场加载：连上、备料、领票、进房、同步战场，全齐了才掀开幕布 */ #fd-root #fd-loading{position:absolute;inset:0;z-index:55;display:none;align-items:center;justify-content:center; background:radial-gradient(circle at 50% 42%,rgba(10,18,34,.96),rgba(3,5,11,.99) 72%)} #fd-root #fd-loading.on{display:flex} #fd-root #fd-loadbox{width:min(360px,84vw);text-align:center} #fd-root #fd-loadtitle{font-size:15px;font-weight:700;letter-spacing:4px;color:#eaf1ff;text-indent:4px} #fd-root #fd-loadbar{height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin:20px 0 12px} #fd-root #fd-loading.busy #fd-loadbar>span{width:38%;animation:fd-wait 1.1s ease-in-out infinite} @keyframes fd-wait{0%{margin-left:0}50%{margin-left:62%}100%{margin-left:0}} #fd-root #fd-loadbar span{display:block;height:100%;width:0;border-radius:3px; background:linear-gradient(90deg,#4da3ff,#c9a3ff);transition:width .35s ease} #fd-root #fd-loadstep{font-size:11.5px;color:var(--fd-dim);letter-spacing:1px} /* 入场播报：头像 + 昵称从左边滑进来，直播间那种 */ #fd-root #fd-enter{position:absolute;left:50%;top:22px;z-index:13;pointer-events:none;display:none; align-items:center;gap:10px;padding:7px 18px 7px 8px;border-radius:999px; background:linear-gradient(90deg,rgba(77,163,255,.24),rgba(13,19,35,.92)); border:1px solid rgba(120,180,255,.34);white-space:nowrap; box-shadow:0 10px 34px rgba(0,0,0,.45)} #fd-root #fd-enter.on{display:flex} #fd-root #fd-enter canvas{width:34px;height:34px} #fd-root #fd-enter b{font-size:13.5px;color:#cfe4ff;font-weight:700} #fd-root #fd-enter span{font-size:12px;color:var(--fd-dim)} #fd-root #fd-death{position:absolute;inset:0;z-index:40;display:none;align-items:center;justify-content:center; background:radial-gradient(circle at 50% 45%,rgba(30,6,12,.5),rgba(3,5,10,.9));pointer-events:auto;cursor:default} #fd-root #fd-death.on{display:flex;animation:fd-fade .3s ease} @keyframes fd-fade{from{opacity:0}to{opacity:1}} #fd-root #fd-dcard{width:352px;background:var(--fd-panel);border:1px solid rgba(255,90,106,.22);border-radius:18px;padding:26px 24px 22px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.6)} #fd-root #fd-dcard .ic{font-size:36px;color:var(--fd-danger);line-height:1} #fd-root #fd-dcard .t{font-size:18px;font-weight:600;margin-top:11px} #fd-root #fd-dcard .s{font-size:12.5px;color:var(--fd-dim);margin-top:6px;line-height:1.6} #fd-root #fd-dcard .s b{color:#9ed0ff;font-weight:600} #fd-root #fd-dstats{display:flex;justify-content:center;gap:20px;margin:18px 0 20px;padding:13px 0;border-top:1px solid var(--fd-line);border-bottom:1px solid var(--fd-line)} #fd-root .fd-dnum{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums} #fd-root .fd-dlab{font-size:10.5px;color:var(--fd-faint);margin-top:3px} #fd-root .fd-btn{width:100%;border:none;border-radius:11px;padding:12px;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer; display:flex;align-items:center;justify-content:center;gap:8px;transition:filter .16s,transform .1s;color:var(--fd-text)} #fd-root .fd-btn:hover{filter:brightness(1.1)} #fd-root .fd-btn:active{transform:scale(.98)} #fd-root .fd-btn i{font-size:16px} #fd-root .fd-btn-gold{background:#f2ac1c;color:#38220a} #fd-root .fd-btn-ghost{background:rgba(255,255,255,.05);border:1px solid var(--fd-line);margin-top:14px} #fd-root .fd-btn[disabled]{filter:grayscale(1);opacity:.5;cursor:not-allowed} #fd-root #fd-intro{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at 50% 40%,#0d1526,#04060d 70%);cursor:default} #fd-root #fd-intro.off{opacity:0;pointer-events:none;transition:opacity .45s ease} #fd-root #fd-ibox{text-align:center;width:min(400px,90vw)} #fd-root #fd-ititle{font-size:36px;font-weight:800;letter-spacing:6px;line-height:1.2;text-indent:6px; background:linear-gradient(120deg,#7fc4ff,#c9a3ff 45%,#ffc95e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} #fd-root #fd-isubtitle{font-size:9.5px;letter-spacing:6.5px;color:#465268;margin-top:10px;font-weight:700;text-indent:6px} #fd-root #fd-iline{width:44px;height:2px;margin:18px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,#4f7fb8,transparent)} #fd-root #fd-iprofile{margin:26px 0 30px;display:flex;flex-direction:column;align-items:center;cursor:pointer} #fd-root #fd-iavawrap{position:relative;width:108px;height:108px} #fd-root #fd-iava{width:108px;height:108px;transition:transform .2s} #fd-root #fd-iprofile:hover #fd-iava{transform:scale(1.04)} #fd-root #fd-iover{position:absolute;inset:2px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; background:rgba(6,12,24,.62);opacity:0;transition:opacity .18s;font-size:11px;font-weight:600;color:#e2ecfa;letter-spacing:1.5px} #fd-root #fd-iover i{font-size:17px} #fd-root #fd-iprofile:hover #fd-iover{opacity:1} #fd-root #fd-iname{font-size:15.5px;font-weight:700;color:#eaf1ff;letter-spacing:4px;margin-top:15px;text-indent:4px} #fd-root #fd-istats{font-size:11px;color:#59647d;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px} #fd-root #fd-istats b{color:#9db0cd;font-weight:700;font-variant-numeric:tabular-nums} #fd-root #fd-istats i{width:3px;height:3px;border-radius:50%;background:#2f3a4f;display:block} #fd-root #fd-ibtn{width:100%;padding:18px;border-radius:12px;font-size:16px;font-weight:800;letter-spacing:9px;text-indent:9px;background:#f2ac1c;color:#38220a;transition:background .14s} #fd-root #fd-ibtn:hover{background:#ffc23a} #fd-root #fd-ibtn:active{background:#dd9a12} #fd-root #fd-ifeeline{font-size:10.5px;color:#4d5872;margin-top:10px;letter-spacing:.6px;font-variant-numeric:tabular-nums} #fd-root #fd-ifeeline b{color:#9db0cd} #fd-root #fd-ifeeline .gold{color:var(--fd-gold)} #fd-root #fd-ifeeline .warn{color:#ff8a9a} #fd-root #fd-irow{display:flex;gap:9px;margin-top:11px} #fd-root #fd-irow .fd-btn{margin-top:0;flex:1;background:rgba(255,255,255,.045);padding:12px 10px} /* 场上多少人。**只有手机端出** —— 电脑端首页那一屏本来就不挤， 进场费那一行下面再压一句话是多余的 */ #fd-root #fd-irooms{display:none;align-items:center;justify-content:center;gap:7px;margin-bottom:11px; font-size:11px;color:#5a6683;letter-spacing:.4px;font-variant-numeric:tabular-nums} #fd-root #fd-irooms b{color:#a9bcd9;font-weight:700} #fd-root #fd-irooms i{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.16)} /* 金币牌只在手机端出：电脑端余额在按钮下面那行里 */ #fd-root #fd-icoin{display:none;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px; border:1px solid var(--fd-line);background:rgba(13,19,35,.75); color:var(--fd-gold);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums} #fd-root #fd-icoin i{font-size:15px} #fd-root #fd-iback{position:absolute;left:22px;top:20px;z-index:2;display:flex;align-items:center;gap:6px; padding:8px 15px 8px 11px;border-radius:999px;border:1px solid var(--fd-line);background:rgba(13,19,35,.72); color:var(--fd-dim);font-size:12.5px;text-decoration:none; transition:color .15s,border-color .15s,background .15s} #fd-root #fd-iback:hover{color:var(--fd-text);border-color:rgba(120,180,255,.42);background:rgba(19,28,50,.92)} #fd-root #fd-iback i{font-size:15px} #fd-root #fd-sheet, #fd-root #fd-rank, #fd-root #fd-shop{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(3,6,13,.86);cursor:default} #fd-root #fd-sheet.on, #fd-root #fd-rank.on, #fd-root #fd-shop.on{display:flex;animation:fd-fade .22s ease} #fd-root #fd-sheetbox, #fd-root #fd-rankbox, #fd-root #fd-shopbox{display:flex;flex-direction:column;background:#0d1323;border:1px solid var(--fd-line);border-radius:18px;box-shadow:0 26px 80px rgba(0,0,0,.62);overflow:hidden} #fd-root #fd-rankbox{width:min(420px,92vw);height:min(560px,80vh)} #fd-root #fd-shopbox{width:min(720px,92vw);max-height:86vh} #fd-root #fd-sheethead, #fd-root #fd-rankhead, #fd-root #fd-shophead{display:flex;align-items:center;gap:9px;padding:15px 18px;border-bottom:1px solid var(--fd-line);font-size:14.5px;font-weight:600} #fd-root #fd-sheethead > i:first-child, #fd-root #fd-rankhead > i:first-child, #fd-root #fd-shophead > i:first-child{font-size:18px;color:var(--fd-accent)} #fd-root #fd-sheethead .sp, #fd-root #fd-rankhead .sp, #fd-root #fd-shophead .sp{flex:1} #fd-root #fd-ranknote{font-size:11px;color:var(--fd-faint);padding:4px 9px;border-radius:7px;background:rgba(255,255,255,.05)} #fd-root #fd-sheetclose, #fd-root #fd-rankclose, #fd-root #fd-shopclose{font-size:20px;color:var(--fd-faint);cursor:pointer;margin-left:4px;transition:color .15s} #fd-root #fd-sheetclose:hover, #fd-root #fd-rankclose:hover, #fd-root #fd-shopclose:hover{color:var(--fd-text)} #fd-root #fd-sheetbox{width:min(440px,92vw);max-height:82vh} /* 局内那块：底子淡一点，游戏还在跑，别把画面全糊住 */ #fd-root #fd-sheet.thin{background:rgba(3,6,13,.38)} #fd-root #fd-sheet.thin #fd-sheetbox{width:min(520px,94vw)} #fd-root .fd-sheetbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%; margin-top:16px;padding:13px 0;border:1px solid var(--fd-line);border-radius:12px; background:rgba(255,255,255,.04);color:var(--fd-text);font-size:13.5px;cursor:pointer; transition:background .15s,border-color .15s} #fd-root .fd-sheetbtn:hover{background:rgba(255,90,106,.14);border-color:rgba(255,90,106,.5);color:#ff8b97} #fd-root #fd-sheetbody{padding:16px 18px 20px;overflow-y:auto;font-size:13px;line-height:1.85;color:#b6c2da} #fd-root #fd-sheetbody p{margin:0 0 9px} #fd-root #fd-sheetbody b{color:var(--fd-text)} #fd-root .fd-tiplist{margin:14px 0 8px!important;color:var(--fd-faint);font-size:12px} #fd-root .fd-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 14px} #fd-root .fd-tierrow{display:flex;align-items:center;gap:8px;font-size:12.5px} #fd-root .fd-tierrow i{width:10px;height:10px;border-radius:3px;flex-shrink:0} #fd-root .fd-tierrow span{flex:1;color:#b6c2da} #fd-root .fd-tierrow b{color:#ffd75f;font-variant-numeric:tabular-nums} #fd-root .fd-setrow{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.05)} #fd-root .fd-setrow:last-child{border-bottom:0} #fd-root .fd-setrow .nm{flex:1;color:var(--fd-text);font-size:13.5px} #fd-root .fd-setrow .nm em{display:block;font-style:normal;font-size:11.5px;color:var(--fd-faint);margin-top:2px} #fd-root .fd-switch{width:44px;height:24px;border-radius:999px;background:#232c44;position:relative;cursor:pointer;flex-shrink:0;transition:background .18s} #fd-root .fd-switch::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#8794ad;transition:transform .18s,background .18s} #fd-root .fd-switch.on{background:rgba(77,163,255,.4)} #fd-root .fd-switch.on::after{transform:translateX(20px);background:#e8f1ff} #fd-root #fd-ranklist{flex:1;min-height:0;padding:8px 10px 12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2a3450 transparent} #fd-root .fd-rkrow{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;font-size:12.5px;color:inherit;text-decoration:none} #fd-root .fd-rkrow.me{background:rgba(77,163,255,.12);border:1px solid rgba(77,163,255,.26)} #fd-root .fd-rkno{width:22px;height:22px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:rgba(255,255,255,.06);color:var(--fd-faint)} #fd-root .fd-rkrow.top1 .fd-rkno{background:linear-gradient(135deg,#ffd75f,#f0a41c);color:#3d2600} #fd-root .fd-rkrow.top2 .fd-rkno{background:linear-gradient(135deg,#dfe7f2,#9fb0c6);color:#26303f} #fd-root .fd-rkrow.top3 .fd-rkno{background:linear-gradient(135deg,#e8a765,#b9743a);color:#2e1a08} #fd-root .fd-rkav{width:26px;height:26px;border-radius:50%;flex-shrink:0;object-fit:cover;background:#1c2438} #fd-root .fd-rkname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b6c2da} #fd-root .fd-rkrow.me .fd-rkname{color:#9ed0ff;font-weight:600} #fd-root .fd-rkkills{font-size:11px;color:var(--fd-faint);font-variant-numeric:tabular-nums} #fd-root .fd-rkpw{font-variant-numeric:tabular-nums;color:var(--fd-faint);font-size:11.5px;min-width:74px;text-align:right} #fd-root .fd-rkempty{padding:28px 0;text-align:center;color:var(--fd-faint);font-size:12px} #fd-root #fd-shopcoin{display:flex;align-items:center;gap:5px;color:var(--fd-gold);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;padding:5px 11px;border-radius:9px;background:rgba(251,191,36,.1)} #fd-root #fd-shopgrid{padding:16px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:11px;scrollbar-width:thin;scrollbar-color:#2a3450 transparent} #fd-root .fd-sitem{background:rgba(255,255,255,.028);border:1.5px solid var(--fd-line);border-radius:14px;padding:11px 7px 9px;text-align:center;cursor:pointer;transition:border-color .16s,transform .16s,background .16s} #fd-root .fd-sitem:hover{border-color:rgba(120,180,255,.42);transform:translateY(-2px)} #fd-root .fd-sitem.own{background:rgba(255,255,255,.045)} #fd-root .fd-sitem.cur{border-color:var(--fd-accent);background:rgba(77,163,255,.13)} #fd-root .fd-sitem.locked{opacity:.7} #fd-root .fd-sitem.locked:hover{opacity:1} #fd-root .fd-sitem canvas{width:64px;height:64px;margin:0 auto} #fd-root .fd-sitem .n{font-size:12.5px;font-weight:600;margin-top:8px} #fd-root .fd-sitem .p{font-size:11.5px;margin-top:5px;display:flex;align-items:center;justify-content:center;gap:3px} #fd-root .fd-sitem .p i{font-size:12px} #fd-root .fd-sitem .p.gold{color:var(--fd-gold)} #fd-root .fd-sitem .p.cur{color:var(--fd-accent);font-weight:700} #fd-root .fd-sitem .p.own{color:var(--fd-dim)} #fd-root .fd-sitem.on{border-color:rgba(126,196,255,.5);background:rgba(77,163,255,.09)} #fd-root .fd-sitem.cur.on{border-color:rgba(126,196,255,.75)} #fd-root .fd-sitem.poor{animation:fd-nope .3s} @keyframes fd-nope{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} /* 商店底下那条：选中谁、什么价、一颗大按钮。**买之前先看清楚** —— 原来点一下就扣三百金币，手机上很容易误触 */ #fd-root #fd-shopbar{display:flex;align-items:center;gap:11px;padding:11px 16px;flex:none; border-top:1px solid var(--fd-line);background:rgba(10,15,27,.92)} #fd-root #fd-shopbar canvas{width:44px;height:44px;flex:none} #fd-root #fd-shopbar .col{flex:1;min-width:0} #fd-root #fd-shopbar .n{font-size:13.5px;font-weight:700;color:#e6eeff} #fd-root #fd-shopbar .d{font-size:11px;color:#67758f;margin-top:2px} #fd-root #fd-shopgo{height:40px;padding:0 20px;border-radius:12px;font-size:13.5px;font-weight:800; display:flex;align-items:center;gap:5px;flex:none; color:#3a2205;background:linear-gradient(180deg,#ffd257,#f2a80f);box-shadow:0 6px 16px rgba(242,168,15,.26)} #fd-root #fd-shopgo.ghost{background:rgba(255,255,255,.07);color:#9fb0cc;box-shadow:none} #fd-root #fd-shopgo[disabled]{filter:grayscale(1);opacity:.45} #fd-root.fd-mb #fd-shopbar{padding-bottom:calc(14px + env(safe-area-inset-bottom))} /* 玩法：四步走 + 品阶表 */ #fd-root .fd-step{display:flex;gap:11px;padding:11px 12px;border-radius:14px;margin-bottom:9px; background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);font-size:12.5px;line-height:1.65} #fd-root .fd-step em{width:22px;height:22px;flex:none;border-radius:7px;background:rgba(77,163,255,.16); color:#7fc4ff;font-size:11.5px;font-weight:800;font-style:normal;display:flex;align-items:center;justify-content:center} #fd-root .fd-sect{display:flex;align-items:center;gap:7px;margin:17px 0 9px;font-size:12px;color:#7183a3} #fd-root .fd-sect i{font-size:14px;color:var(--fd-accent)} #fd-root .fd-sect .sp{flex:1} #fd-root .fd-sect em{font-style:normal;font-size:11px;color:#4f5b75} #fd-root .fd-tierrow{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:12px;margin-bottom:6px; background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)} #fd-root .fd-tierrow i{width:11px;height:26px;flex:none;border-radius:6px 6px 7px 7px/9px 9px 14px 14px; box-shadow:inset -2px 0 0 rgba(255,255,255,.35),inset 2px 0 0 rgba(0,0,0,.25)} #fd-root .fd-tierrow span{flex:1;font-size:12.5px;color:#cad7ed;font-weight:600} #fd-root .fd-tierrow u{width:74px;height:5px;border-radius:3px;background:rgba(255,255,255,.07); overflow:hidden;flex:none;text-decoration:none} #fd-root .fd-tierrow u s{display:block;height:100%;border-radius:3px;text-decoration:none} #fd-root .fd-tierrow b{width:56px;text-align:right;font-size:11.5px;color:#8ea0bf;font-weight:400; font-variant-numeric:tabular-nums;flex:none} #fd-root .fd-tierrow b var{font-style:normal;color:#e2ebfa;font-weight:700} #fd-root .fd-guard{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(77,163,255,.07); border:1px solid rgba(77,163,255,.16);font-size:11.5px;color:#8fa7cc;line-height:1.7} #fd-root .fd-guard i{color:#7fc4ff;margin-right:5px} /* ── 手机端 ────────────────────────────────────────────────── 一屏就那么大，只留「看得懂局势」必须的几样：血量刀数击杀、增益、 击杀播报、观战条、那颗齿轮。小地图榜单、品阶条、速度、性能那一排全收起来 —— */ #fd-root.fd-mb #fd-perf, #fd-root.fd-mb #fd-h-tiers, #fd-root.fd-mb #fd-h-right, #fd-root.fd-mb #fd-line-speed{display:none} #fd-root.fd-mb #fd-gear{left:10px;top:calc(10px + env(safe-area-inset-top));width:32px;height:32px;font-size:16px} #fd-root.fd-mb #fd-hcol{left:10px;top:calc(50px + env(safe-area-inset-top));width:164px} #fd-root.fd-mb .fd-hp-wrap{padding:8px 10px 9px} #fd-root.fd-mb .fd-hp-top{margin-bottom:5px} #fd-root.fd-mb .fd-sline{padding:5px 10px} #fd-root.fd-mb #fd-pips{padding:7px 10px 8px;gap:2px} #fd-root.fd-mb .fd-pip{width:6px;height:4px} #fd-root.fd-mb #fd-h-feed{margin-top:12px;width:62vw} #fd-root.fd-mb #fd-h-buffs{left:10px;bottom:calc(56px + env(safe-area-inset-bottom));gap:5px} #fd-root.fd-mb .fd-buff{min-width:126px;padding:5px 9px 5px 6px} #fd-root.fd-mb #fd-spec{bottom:calc(16px + env(safe-area-inset-bottom))} /* 人走到悬浮件下面时，电脑端是整块藏起来（面板大，挡视野）。**手机端只压暗** —— 剩下的这几样本来就只有巴掌大，而一屏才三百多像素宽，人几乎一直在它们旁边， 照电脑端那样藏的话血量整局都没机会看见 */ #fd-root.fd-mb #fd-h-left.dim{display:block;opacity:.22} #fd-root.fd-mb #fd-h-feed.dim, #fd-root.fd-mb #fd-h-buffs.dim{display:flex;opacity:.22} #fd-root.fd-mb #fd-killnote{font-size:30px;top:14%} #fd-root.fd-mb #fd-killnote.duel{font-size:17px} #fd-root.fd-mb #fd-ititle{font-size:29px;letter-spacing:4px} #fd-root.fd-mb #fd-iavawrap, #fd-root.fd-mb #fd-iava{width:88px;height:88px} #fd-root.fd-mb #fd-iprofile{margin:18px 0 22px} #fd-root.fd-mb #fd-ibtn{padding:15px;font-size:15px;letter-spacing:7px;text-indent:7px} /* 手指按住拖着走，双击全屏那一条在手机上没有意义 */ #fd-root.fd-mb #fd-game{cursor:default} /* ══ 手机端首页：方案 A「功能坞」 ═══════════════════════════════════ 一屏只让人做一件事 —— 开始。次要入口收进底部那条坞里，图标为主文字为辅； 设置挪到顶栏当齿轮，金币牌顶在右上角。电脑端那一套一个字都不动。 */ #fd-root.fd-mb #fd-intro{padding:0} #fd-root.fd-mb #fd-ibox{width:100%;height:100%;display:flex;flex-direction:column; padding:calc(58px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom))} /* 顶栏：返回、金币、齿轮 */ #fd-root.fd-mb #fd-iback{left:14px;top:calc(12px + env(safe-area-inset-top));padding:0;width:36px;height:36px; border-radius:11px;justify-content:center;gap:0} #fd-root.fd-mb #fd-iback span{display:none} #fd-root.fd-mb #fd-icoin{display:flex;position:absolute;right:58px;top:calc(14px + env(safe-area-inset-top));height:32px} #fd-root.fd-mb #fd-iset{position:absolute;right:14px;top:calc(12px + env(safe-area-inset-top)); width:36px;height:36px;padding:0;margin:0;flex:none;border-radius:11px;justify-content:center;gap:0; background:rgba(13,19,35,.75);border:1px solid var(--fd-line)} #fd-root.fd-mb #fd-iset span{display:none} #fd-root.fd-mb #fd-iset i{font-size:17px} /* 中间：标题、头像、名字、两枚数据。上下各留一份弹性，居中而不是顶在上面 */ #fd-root.fd-mb #fd-ititle{font-size:30px;letter-spacing:4px;text-indent:4px} #fd-root.fd-mb #fd-isubtitle{letter-spacing:5.5px} #fd-root.fd-mb #fd-iline{margin-top:14px} #fd-root.fd-mb #fd-iprofile{margin:20px 0 0} /* 富余的竖向空间全落在数据牌与主按钮之间，别把头像推到屏幕中间去 */ #fd-root.fd-mb #fd-irooms{display:flex} #fd-root.fd-mb #fd-irooms, #fd-root.fd-mb #fd-ibtn{margin-top:auto} #fd-root.fd-mb #fd-iavawrap, #fd-root.fd-mb #fd-iava{width:96px;height:96px} #fd-root.fd-mb #fd-iname{margin-top:12px;font-size:15px;letter-spacing:3px} #fd-root.fd-mb #fd-istats{margin-top:12px;gap:8px} /* 两项数据做成圆牌，别再是一行小字 */ #fd-root.fd-mb #fd-istats{gap:8px;font-size:11.5px} #fd-root.fd-mb #fd-istats i{display:none} #fd-root.fd-mb #fd-istats span{display:flex;align-items:center;gap:5px;height:27px;padding:0 12px; border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);white-space:nowrap} #fd-root.fd-mb #fd-istats b{color:#d7e3f8;font-weight:700} /* 主按钮：够大、够亮，底下跟着费用行 */ #fd-root.fd-mb #fd-ibtn{height:56px;padding:0;border-radius:15px;font-size:16px;letter-spacing:8px;text-indent:8px; background:linear-gradient(180deg,#ffd257,#f2a80f); box-shadow:0 8px 24px rgba(242,168,15,.3),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(140,88,0,.32)} #fd-root.fd-mb #fd-ifeeline{margin-top:9px} /* 底部功能坞 */ #fd-root.fd-mb #fd-irow{margin-top:16px;gap:4px;padding:8px;border-radius:19px; background:rgba(13,19,35,.8);border:1px solid var(--fd-line);box-shadow:0 10px 30px rgba(0,0,0,.4)} #fd-root.fd-mb #fd-irow .fd-btn{flex-direction:column;gap:5px;padding:9px 0 7px;border-radius:13px; background:none;border:0;font-size:11px;letter-spacing:1px;color:#71809c} #fd-root.fd-mb #fd-irow .fd-btn i{font-size:21px;color:#7f93b6} #fd-root.fd-mb #fd-ishop i{color:var(--fd-gold)} /* ══ 手机端弹层：从底部整屏升起 ═══════════════════════════════════ */ #fd-root.fd-mb #fd-sheet, #fd-root.fd-mb #fd-rank, #fd-root.fd-mb #fd-shop{align-items:flex-end} #fd-root.fd-mb #fd-sheetbox, #fd-root.fd-mb #fd-rankbox, #fd-root.fd-mb #fd-shopbox{width:100%;max-width:none;border-radius:22px 22px 0 0;border-bottom:0; max-height:calc(100% - 46px);height:calc(100% - 46px);box-shadow:0 -18px 60px rgba(0,0,0,.6)} #fd-root.fd-mb #fd-sheet.thin #fd-sheetbox{width:100%;height:auto} /* 顶上那根拖拽条 */ #fd-root.fd-mb #fd-sheetbox::before, #fd-root.fd-mb #fd-rankbox::before, #fd-root.fd-mb #fd-shopbox::before{content:"";width:36px;height:4px;border-radius:3px;background:#2c3852; margin:9px auto 0;flex:none} #fd-root.fd-mb #fd-shopgrid{grid-template-columns:repeat(3,1fr);gap:9px;padding:12px 14px calc(14px + env(safe-area-inset-bottom))} #fd-root.fd-mb #fd-sheetbody, #fd-root.fd-mb #fd-ranklist{padding-bottom:calc(18px + env(safe-area-inset-bottom))} #fd-root #fd-perf{position:absolute;left:0;right:0;bottom:0;z-index:11;display:flex;align-items:center;gap:16px; padding:6px 16px 7px;font-size:10.5px;color:var(--fd-faint);font-variant-numeric:tabular-nums;line-height:1.2; white-space:nowrap;overflow:hidden;pointer-events:none; background:linear-gradient(180deg,rgba(4,7,14,0),rgba(4,7,14,.9) 45%);transition:opacity .18s} #fd-root #fd-perf.dim{display:none} #fd-root #fd-perf b{color:var(--fd-dim);font-weight:600} #fd-root #fd-perf span{flex-shrink:0}