/* Country Tug of War — 本游戏自己的样式(前缀 bfg-tug-)。共用组件在 static/bfg.css「GAME UI KIT」一段。
   选队:两列名单(行高 52,可滚)+ 底部确认。对局:顶栏 / 倒计时条 / 绳子 + 榜 / 拇指区一块大 PULL。 */
.bfg-tug .bfg-ftop{background:var(--floor);border-bottom:2px solid var(--ink);min-height:54px}
.bfg-tug .bfg-ftop .bfg-kick{font-size:11.5px;line-height:1.35}
.bfg-tug .bfg-tbar{margin:10px 16px 0}
.bfg-tug-h{font-weight:900;font-size:min(8.2vw,32px);font-size:min(8.2cqw,32px);line-height:1.03;letter-spacing:-.025em;margin:0}
.bfg-tug .bfg-btn{margin-bottom:6px}
.bfg-tug .bfg-sd{color:var(--mute)}
/* 两字母代码色块(不是国旗) */
.bfg-tug-cc{display:inline-grid;place-items:center;width:38px;height:30px;border:2px solid var(--ink);border-radius:8px;background:var(--c,#fff);color:var(--t,var(--ink));font:600 13px/1 var(--mono);font-style:normal;letter-spacing:.04em;flex:none;box-sizing:border-box}
.bfg-tug-cc.s{width:30px;height:22px;font-size:10.5px;border-width:1.5px;border-radius:6px}
.bfg-tug-cc.none{background:none;border-style:dashed}

/* ---- 选队 */
.bfg-tug-pick{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:16px 16px 0}
.bfg-tug-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;padding:2px 2px 12px;margin:0 -2px}
.bfg-tug-list button{display:flex;align-items:center;gap:8px;min-height:52px;padding:4px 8px;border:2px solid var(--ink);border-radius:14px;background:var(--tint);color:var(--ink);font:600 15px/1.15 var(--body);text-align:left;min-width:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
.bfg-tug-list button span{min-width:0;overflow-wrap:anywhere;pointer-events:none}
.bfg-tug-list button i{pointer-events:none}
.bfg-tug-list button:active{transform:translateY(2px)}
.bfg-tug-list button.on{background:var(--ink);color:#fff}
.bfg-tug-list button.on .bfg-tug-cc{border-color:#fff}
.bfg-tug-dock{flex:none;padding:12px 16px 14px;display:grid;gap:8px;border-top:2px solid var(--ink)}
.bfg-tug-dock.play{border-top:0;padding-top:6px}

/* ---- 对局:绳子 */
.bfg-tug-info{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:10px 16px 0;overflow:hidden}
.bfg-tug-field{display:grid;gap:10px;flex:none}
.bfg-tug-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bfg-tug-side{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;min-width:0;position:relative;transition:transform .25s var(--spring)}
.bfg-tug-side.r{grid-template-columns:1fr auto;text-align:right}
.bfg-tug-side.r .bfg-tug-cc{grid-column:2;grid-row:1}.bfg-tug-side.r>span{grid-column:1;grid-row:1}.bfg-tug-side em{grid-row:2}
.bfg-tug-side span{min-width:0;display:grid}
.bfg-tug-side small{font:600 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.bfg-tug-side b{font:700 15px/1.15 var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bfg-tug-side em{grid-column:1/-1;font:900 30px/1 var(--disp);font-variation-settings:var(--dv);font-style:normal;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bfg-tug-side.win{transform:scale(1.06) rotate(-2deg)}
.bfg-tug-side.r.win{transform:scale(1.06) rotate(2deg)}
.bfg-tug-side.win::after{content:"WINS";position:absolute;left:auto;right:8px;top:auto;bottom:-2px;font:900 13px/1 var(--disp);letter-spacing:.06em;padding:4px 8px 5px;border:3px solid var(--ink);background:var(--pers);transform:rotate(-6deg);animation:bfg-tug-stamp .24s cubic-bezier(.3,1.4,.5,1)}
.bfg-tug-side.r.win::after{right:auto;left:8px;transform:rotate(6deg)}
@keyframes bfg-tug-stamp{from{opacity:0;scale:2.2}}
.bfg-tug-rope{position:relative;height:34px;overflow:hidden;border-radius:6px}
.bfg-tug-rope .mid{position:absolute;left:50%;top:0;bottom:0;width:0;border-left:2px dashed var(--ink);margin-left:-1px;opacity:.55}
.bfg-tug-rope .line{position:absolute;left:-50%;width:200%;top:11px;height:12px;border-block:2px solid var(--ink);box-sizing:border-box;background:repeating-linear-gradient(-55deg,#E8D9B0 0 7px,#B99A5B 7px 9px);transition:transform .32s cubic-bezier(.3,1.3,.5,1)}
.bfg-tug-rope .knot{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;background:#F45D22;border:2px solid var(--ink);border-radius:5px;transform:rotate(45deg);box-sizing:border-box}
.bfg-tug.over .bfg-tug-rope .line{transition:transform .6s cubic-bezier(.5,0,.2,1)}
.bfg-tug-board{list-style:none;margin:0;padding:0;display:grid;gap:0;flex:none}
.bfg-tug-board li{display:flex;align-items:center;gap:8px;min-height:27px;border-bottom:1.5px dashed rgba(23,21,20,.28);font:600 14px/1.2 var(--body)}
.bfg-tug-board .rk{font:600 11px/1 var(--mono);width:14px;flex:none;color:var(--mute)}
.bfg-tug-board .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bfg-tug-board b{font:600 14px/1 var(--mono);font-variant-numeric:tabular-nums}
.bfg-tug-board li.me{font-weight:800}
.bfg-tug-board li.me .nm::after{content:"· you";font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-left:6px}
.bfg-tug-mine{font:600 12.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}

/* ---- PULL:拇指区一整块;每个 pointerdown 记一次 */
.bfg-tug-pull{position:relative;display:block;width:100%;height:clamp(118px,25vh,190px);height:clamp(118px,25cqh,190px);border:0;background:none;padding:0;margin:0 0 4px;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:4px;border-radius:26px}
.bfg-tug-pull .base,.bfg-tug-pull .face{position:absolute;left:0;right:0;border-radius:26px;pointer-events:none;box-sizing:border-box}
.bfg-tug-pull .base{top:10px;bottom:0;background:var(--ink)}
.bfg-tug-pull .face{top:0;bottom:10px;background:var(--pers);border:3px solid var(--ink);display:grid;place-content:center;justify-items:center;gap:4px}
.bfg-tug-pull .face b{font:900 min(15vw,60px)/.95 var(--disp);font-size:min(15cqw,9.5cqh,60px);font-variation-settings:var(--dv);letter-spacing:-.02em}
.bfg-tug-pull .face small{font:600 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* ---- 招牌瞬间:一轮结束 */
.bfg-tug-flash{position:absolute;inset:0;background:var(--pers);opacity:0;pointer-events:none;z-index:5}
.bfg-tug-flash.go{animation:bfg-tug-flash .45s ease-out}
@keyframes bfg-tug-flash{15%{opacity:.8}100%{opacity:0}}
.bfg-tug-vd{position:absolute;left:0;right:0;bottom:0;z-index:6;background:var(--pers);border-top:2px solid var(--ink);padding:16px 16px calc(var(--sab) + 14px);display:grid;gap:9px;transform:translateY(105%);transition:transform .38s cubic-bezier(.2,.9,.3,1)}
.bfg-tug-vd.show{transform:none}
.bfg-tug-vd p{font-size:17px;line-height:1.3}
.bfg-tug-vd p.bfg-sd{font-size:13px;color:var(--ink)}
.bfg-tug-you{display:flex;align-items:center;gap:12px;padding:8px 12px;border:2px solid var(--ink);border-radius:14px;background:var(--tint);justify-self:start;max-width:100%}
.bfg-tug-you b{font:900 38px/1 var(--disp);font-variation-settings:var(--dv);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bfg-tug-you span{font:600 11.5px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.bfg-stage.bfg-v3 .bfg-tug-vd .bfg-btn:not(.alt){background:var(--ink);color:#fff;box-shadow:0 6px 0 rgba(23,21,20,.35)}
.bfg-fs .bfg-tug-vd .bfg-btn{min-height:56px}
.bfg-tug.over .bfg-tug-board,.bfg-tug.over [data-last]{opacity:.35}

/* 矮屏:榜只留前三 */
@container bfgfs (max-height:700px){
 .bfg-tug-board li:nth-child(n+4):not(.me){display:none}
 .bfg-tug-info [data-last]{display:none}
 .bfg-tug-side em{font-size:26px}
 .bfg-tug-vd{gap:7px;padding-top:12px}
 .bfg-tug-vd .bfg-sd{display:none}
}
/* 横屏手机:绳子和榜在左,PULL 在右 */
@container bfgfs (max-height:520px) and (min-width:560px){
 .bfg-tug .bfg-tug-info,.bfg-tug .bfg-tug-pick{grid-column:1;grid-row:3/6}
 .bfg-tug .bfg-tug-dock{grid-column:2;grid-row:3/6;align-content:end;border-top:0;padding:8px 20px 10px 0}
 .bfg-tug-pull{height:100%;min-height:150px}
 .bfg-tug .bfg-tug-dock.play{grid-template-rows:auto 1fr}
 .bfg-tug-board li:nth-child(n+3):not(.me){display:none}
 .bfg-tug-list{grid-template-columns:1fr 1fr 1fr}
 .bfg-tug-vd{left:auto;width:50%;top:44px;border-top:0;border-left:2px solid var(--ink);align-content:center;transform:translateX(105%)}
 .bfg-tug-vd .bfg-tug-you b{font-size:28px}
}
/* 桌面游戏区 */
@container bfgfs (min-width:700px) and (min-height:521px){
 .bfg-tug-info,.bfg-tug-pick{padding-inline:40px}.bfg-tug-dock{padding-inline:40px}.bfg-tug .bfg-tbar{margin-inline:40px}
 .bfg-tug .bfg-ftop{padding-left:12px;padding-right:24px}
 .bfg-tug-list{grid-template-columns:repeat(4,1fr)}
 .bfg-tug-vd{padding-inline:40px;grid-template-columns:1fr 1fr;column-gap:16px}
 .bfg-tug-vd>:not(.bfg-btn){grid-column:1/-1}
 .bfg-tug-pull{height:150px}
 .bfg-tug-dock>.bfg-btn{max-width:420px}
}