/* The World Button — 本游戏自己的样式(前缀 bfg-wb-)。共用组件在 static/bfg.css「GAME UI KIT」一段。
   一屏 = 顶栏(在线 / 按住人数)/ 信息(正在按住的胶囊)/ 按钮(下半屏)/ 底部(纪录,或刚松手的结果)。 */
.bfg-wb .bfg-ftop{background:var(--floor);border-bottom:2px solid var(--ink);min-height:54px}
.bfg-wb .bfg-ftop .bfg-kick{font-size:11.5px;line-height:1.35}
.bfg-wb-info{flex:none;padding:16px 16px 0;display:grid;gap:10px;justify-items:start}
.bfg-wb-row{display:flex;align-items:center;gap:12px;min-height:44px;max-width:100%}
/* 胶囊:第一颗是你。实心 = 正按着,虚线 = 在线但没按 */
.bfg-wb-cap{--d:24px;display:inline-flex;gap:4px;padding:6px;background:var(--ink);border-radius:99px;transform:rotate(-3deg);transform-origin:left center;flex:none}
.bfg-wb-cap i{width:var(--d);height:var(--d);border-radius:50%;box-sizing:border-box;border:2px dashed #fff;opacity:.7;flex:none;transition:transform .3s var(--spring)}
.bfg-wb-cap i.on{border:0;background:var(--pc,#fff);opacity:1}
.bfg-wb-cap i.me{border-color:#F45D22;opacity:1}
.bfg-wb-cap i.me.on{background:#F45D22;transform:scale(1.18);animation:bfg-pop .3s var(--spring)}
.bfg-wb-cap i.pop{animation:bfg-pop .3s var(--spring)}
.bfg-wb-now{font:700 19px/1.25 var(--body)}
.bfg-wb-well{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding:6px 16px 10px;--bs:min(58vw,250px);--bs:min(58cqw,30cqh,250px);overflow:hidden}
.bfg-wb-time{font:900 min(15vw,58px)/1 var(--disp);font-size:min(15cqw,9cqh,58px);font-variation-settings:var(--dv);letter-spacing:-.03em;font-variant-numeric:tabular-nums;opacity:.3;transition:opacity .15s}
.bfg-wb-time small{font-size:.5em;margin-left:3px;letter-spacing:0}
.bfg-wb.on .bfg-wb-time{opacity:1}
/* 按钮:墨色底座不动,橙色面按下去陷 14px;松手弹回 */
.bfg-wb-btn{position:relative;flex:none;width:var(--bs);height:calc(var(--bs) + 16px);border:0;background:none;padding:0;border-radius:50%;color:var(--ink);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;outline-offset:6px}
.bfg-wb-btn .base,.bfg-wb-btn .ring,.bfg-wb-btn .face{position:absolute;left:0;width:var(--bs);height:var(--bs);border-radius:50%;box-sizing:border-box;pointer-events:none}
.bfg-wb-btn .base{top:16px;background:var(--ink)}
.bfg-wb-btn .ring{top:16px;border:3px solid var(--ink);opacity:0}
.bfg-wb-btn .face{top:0;background:#F45D22;border:3px solid var(--ink);display:grid;place-items:center;transition:transform .34s cubic-bezier(.3,1.9,.5,1)}
.bfg-wb-btn .face::before{content:"";position:absolute;inset:9%;border-radius:50%;border:2px dashed rgba(23,21,20,.45)}
.bfg-wb-btn .face b{font:900 min(8.4vw,34px)/1 var(--disp);font-size:min(8.4cqw,34px);font-variation-settings:var(--dv);letter-spacing:-.01em;transition:transform .12s}
.bfg-wb-btn.on .face{transform:translateY(14px);transition:transform .07s ease-out;background:#E04C14}
.bfg-wb-btn.on .face b{transform:scale(.92)}
.bfg-wb-btn.on .ring{animation:bfg-wb-ring 1.3s ease-out infinite}
@keyframes bfg-wb-ring{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.32)}}
.bfg-wb-dock{flex:none;height:226px;padding:12px 16px 14px;display:grid;gap:10px;align-content:end;position:relative}
.bfg-wb-stat{display:flex;gap:18px;flex-wrap:wrap;font:600 12.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.bfg-wb-dock .bfg-sd{color:var(--mute);min-height:20px}
.bfg-wb .bfg-btn{margin-bottom:6px}
.bfg-wb-dock.vd{background:var(--pers);border-top:2px solid var(--ink);animation:bfg-rise .22s cubic-bezier(.2,.9,.3,1.2);align-content:start}
.bfg-wb-dock.vd .bfg-sd{color:var(--ink)}
.bfg-wb-dock.vd p{font-size:17px;line-height:1.3}
.bfg-wb-dock.vd p.bfg-sd{font-size:13px;min-height:0}
.bfg-stage.bfg-v3 .bfg-wb-dock.vd .bfg-btn{background:var(--ink);color:#fff;box-shadow:0 6px 0 rgba(23,21,20,.35)}
.bfg-wb-h{font-weight:900;font-size:min(9.6vw,38px);font-size:min(9.6cqw,38px);line-height:1;letter-spacing:-.03em;margin:0;font-variant-numeric:tabular-nums}
.bfg-wb-stamp{position:absolute;right:14px;top:-16px;font:900 15px/1 var(--disp);font-variation-settings:var(--dv);letter-spacing:.06em;padding:5px 10px 6px;border:3px solid var(--ink);background:var(--tint);transform:rotate(-5deg);animation:bfg-wb-stamp .26s cubic-bezier(.3,1.4,.5,1) .12s backwards}
@keyframes bfg-wb-stamp{from{opacity:0;transform:rotate(-5deg) scale(2.2)}}
/* 矮屏:信息收紧 */
@container bfgfs (max-height:700px){
 .bfg-wb-info{padding-top:10px;gap:6px}.bfg-wb-now{font-size:17px}
 .bfg-wb-dock{height:172px;gap:8px;padding-top:10px}
 .bfg-wb-dock .bfg-sd{display:none}
 .bfg-wb-well{gap:6px;padding-bottom:6px}
}
/* 横屏手机:胶囊和结果在左,按钮在右 */
@container bfgfs (max-height:520px) and (min-width:560px){
 .bfg-wb .bfg-wb-info{grid-column:1;grid-row:2/4}
 .bfg-wb .bfg-wb-dock{grid-column:1;grid-row:4/6;height:auto;min-height:0;align-content:end}
 .bfg-wb .bfg-wb-well{grid-column:2;grid-row:2/6;justify-content:center;--bs:min(40cqw,56cqh,250px)}
 .bfg-wb-dock.vd{border-top:2px solid var(--ink);border-right:2px solid var(--ink);border-radius:0 18px 0 0}
 .bfg-wb-dock.vd .bfg-sd{display:none}
}
/* 桌面游戏区 */
@container bfgfs (min-width:700px) and (min-height:521px){
 .bfg-wb-info{padding:22px 40px 0}.bfg-wb-dock{padding:14px 40px 20px;height:214px}
 .bfg-wb .bfg-ftop{padding-left:12px;padding-right:24px}
 .bfg-wb-dock .bfg-btn{max-width:360px}
 .bfg-wb-well{--bs:min(34cqh,240px)}
}