/* 拔河点击 · 专属样式（选择器统一 .g-tugwar 前缀） */

.g-tugwar { gap: 10px; }

/* ---------------- 设置 ---------------- */
.g-tugwar .tug-setup { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.g-tugwar .tug-rules { padding: 12px 13px; }
.g-tugwar .tug-rules .panel-h { margin-bottom: 8px; }
.g-tugwar .tug-rule-line { font-size: 12px; line-height: 1.82; color: var(--dim); }
.g-tugwar .tug-rule-line b { color: var(--text); font-weight: 600; }
.g-tugwar .tug-setup .stat-v { font-size: 24px; }

/* ---------------- 局分/计时 ---------------- */
.g-tugwar .tug-play { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.g-tugwar .tug-round-hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; }
.g-tugwar .tug-dots { display: flex; gap: 5px; align-items: center; min-width: 30px; }
.g-tugwar .tug-dots.p1 { justify-content: flex-start; }
.g-tugwar .tug-dots.p2 { justify-content: flex-end; }
.g-tugwar .tug-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.18s, box-shadow 0.18s;
}
.g-tugwar .tug-dots.p1 i.on { background: #5fc8ff; box-shadow: 0 0 10px rgba(95, 200, 255, 0.8); border-color: #5fc8ff; }
.g-tugwar .tug-dots.p2 i.on { background: #ff5c6c; box-shadow: 0 0 10px rgba(255, 92, 108, 0.8); border-color: #ff5c6c; }
.g-tugwar .tug-round-mid { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-align: center; flex: 1; }
.g-tugwar .tug-timer-row { display: flex; align-items: center; justify-content: space-between; flex: none; }
.g-tugwar .tug-timer-k { font-size: 9.5px; color: var(--faint); letter-spacing: 0.05em; }
.g-tugwar .tug-timer-num { font-size: 15px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.g-tugwar .tug-timer-bar { flex: none; height: 6px; }
.g-tugwar .tug-timer-bar > i { transition: width 0.08s linear; }
.g-tugwar .tug-timer-bar.warn > i { background: linear-gradient(90deg, #ffb454, #ff5c6c); }

/* ---------------- 拔河场景 ---------------- */
.g-tugwar .tug-scene {
  position: relative;
  flex: 1;
  min-height: 168px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #14243b 0%, #1d3a3f 52%, #2a4a30 100%);
  box-shadow: 0 22px 54px -26px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.g-tugwar .tug-scene.shake { animation: tugShake 0.11s linear; }
.g-tugwar .tug-sky {
  position: absolute; inset: 0;
  background: radial-gradient(110% 70% at 50% 0%, rgba(121, 184, 255, 0.20), transparent 60%);
}
.g-tugwar .tug-sky::before {
  content: '';
  position: absolute; top: 11%; right: 13%;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #fffbe6, #ffe9a8 55%, #ffd166);
  box-shadow: 0 0 34px rgba(255, 224, 138, 0.5);
}
.g-tugwar .tug-sky::after {
  content: '';
  position: absolute; top: 24%; left: 7%;
  width: 118px; height: 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.065);
  box-shadow: 62px 11px 0 rgba(255, 255, 255, 0.045), -18px 22px 0 rgba(255, 255, 255, 0.035);
}
.g-tugwar .tug-hill { position: absolute; border-radius: 50%; }
.g-tugwar .tug-hill.a { left: -20%; right: 40%; bottom: -18%; height: 46%; background: #24422c; opacity: 0.9; }
.g-tugwar .tug-hill.b { left: 40%; right: -20%; bottom: -22%; height: 52%; background: #1e3a28; opacity: 0.9; }
.g-tugwar .tug-crowd { position: absolute; inset: 0; pointer-events: none; }
.g-tugwar .tug-crowd span {
  position: absolute; bottom: 8%; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 233, 168, 0.45);
  animation: tugCrowd 2.4s ease-in-out infinite alternate;
}
.g-tugwar .tug-crowd span:nth-child(1) { left: 14%; animation-delay: 0s; }
.g-tugwar .tug-crowd span:nth-child(2) { left: 24%; animation-delay: 0.4s; }
.g-tugwar .tug-crowd span:nth-child(3) { left: 35%; animation-delay: 0.8s; }
.g-tugwar .tug-crowd span:nth-child(4) { left: 45%; animation-delay: 0.2s; }
.g-tugwar .tug-crowd span:nth-child(5) { left: 56%; animation-delay: 0.6s; }
.g-tugwar .tug-crowd span:nth-child(6) { left: 66%; animation-delay: 1s; }
.g-tugwar .tug-crowd span:nth-child(7) { left: 76%; animation-delay: 0.3s; }
.g-tugwar .tug-crowd span:nth-child(8) { left: 86%; animation-delay: 0.7s; }

.g-tugwar .tug-rope-track { position: absolute; left: 6%; right: 6%; top: 66%; height: 28px; }
.g-tugwar .tug-rope {
  position: absolute; left: 0; right: 0; top: 11px; height: 6px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #d2ab74 0 8px, #a97c4a 8px 14px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.g-tugwar .tug-center-line {
  position: absolute; left: 50%; top: -10px; width: 2px; height: 46px;
  transform: translateX(-1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05));
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}
.g-tugwar .tug-knot {
  position: absolute; left: 50%; top: 2px;
  width: 24px; height: 24px; margin-left: -12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: radial-gradient(circle at 34% 30%, #fff, #ff7a86 55%, #c9303e 100%);
  box-shadow: 0 0 16px rgba(255, 92, 108, 0.8);
  will-change: left;
  z-index: 3;
}
.g-tugwar .tug-person {
  position: absolute;
  bottom: max(6px, calc(34% - 73px));
  width: 60px; height: 100px;
  transform-origin: 50% 100%;
  transition: transform 0.06s linear;
  z-index: 2;
}
.g-tugwar .tug-person.p1 { left: 6%; }
.g-tugwar .tug-person.p2 { right: 6%; }
.g-tugwar .tug-head {
  position: absolute; top: 0; left: 50%; width: 22px; height: 22px;
  transform: translateX(-50%);
  border-radius: 50%; background: #ffd9b3; border: 2px solid rgba(60, 30, 20, 0.35);
}
.g-tugwar .tug-body {
  position: absolute; top: 19px; left: 50%; width: 24px; height: 56px;
  transform: translateX(-50%);
  border-radius: 9px;
}
.g-tugwar .tug-person.p1 .tug-body { background: linear-gradient(180deg, #5fc8ff, #2f6fd0); box-shadow: 0 0 14px rgba(95, 200, 255, 0.4); }
.g-tugwar .tug-person.p2 .tug-body { background: linear-gradient(180deg, #ff5c6c, #c9303e); box-shadow: 0 0 14px rgba(255, 92, 108, 0.4); }
.g-tugwar .tug-arm {
  position: absolute; top: 34px; left: 50%; width: 32px; height: 9px;
  border-radius: 4px; background: #ffd9b3;
  transform-origin: 0 50%;
}
.g-tugwar .tug-person.p1 .tug-arm { transform: translateX(2px) rotate(6deg); }
.g-tugwar .tug-person.p2 .tug-arm { transform: translateX(-30px) rotate(-6deg); transform-origin: 100% 50%; }
.g-tugwar .tug-person.p1 .tug-arm::after,
.g-tugwar .tug-person.p2 .tug-arm::after {
  content: ''; position: absolute; top: 3px; width: 6px; height: 6px; border-radius: 50%;
  background: #ffd9b3;
}
.g-tugwar .tug-person.p1 .tug-arm::after { right: -3px; }
.g-tugwar .tug-person.p2 .tug-arm::after { left: -3px; }

.g-tugwar .tug-banner {
  position: absolute; inset: 0;
  z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  text-align: center;
  background: rgba(6, 10, 18, 0.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.g-tugwar .tug-banner-sub { display: block; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.g-tugwar .tug-scene-tag {
  position: absolute; right: 10px; bottom: 8px;
  font-size: 9px; color: rgba(255, 255, 255, 0.35); letter-spacing: 0.05em;
}

/* ---------------- 左右大按钮 ---------------- */
.g-tugwar .tug-zones { display: flex; gap: 8px; flex: none; }
.g-tugwar .tug-zone {
  position: relative;
  flex: 1;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s, filter 0.08s;
  user-select: none;
}
.g-tugwar .tug-zone:active { transform: scale(0.985); filter: brightness(1.12); }
.g-tugwar .tug-zone::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: var(--win, 0);
  transition: opacity 0.08s linear;
}
.g-tugwar .tug-zone.p1 {
  border-color: rgba(95, 200, 255, 0.5);
  background: linear-gradient(160deg, rgba(95, 200, 255, 0.26), rgba(47, 111, 208, 0.16));
  color: #e3f4ff;
}
.g-tugwar .tug-zone.p1::after { background: radial-gradient(circle at 50% 70%, rgba(95, 200, 255, 0.42), transparent 72%); }
.g-tugwar .tug-zone.p2 {
  border-color: rgba(255, 92, 108, 0.5);
  background: linear-gradient(160deg, rgba(255, 92, 108, 0.26), rgba(201, 48, 62, 0.16));
  color: #ffe8ea;
}
.g-tugwar .tug-zone.p2::after { background: radial-gradient(circle at 50% 70%, rgba(255, 92, 108, 0.42), transparent 72%); }
.g-tugwar .tug-zone-label { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; z-index: 2; }
.g-tugwar .tug-zone-sub { font-size: 9.5px; color: rgba(255, 255, 255, 0.55); z-index: 2; }
.g-tugwar .tug-taps-num {
  font-size: 30px; font-weight: 800; line-height: 1; margin-top: 2px;
  font-variant-numeric: tabular-nums; z-index: 2;
  text-shadow: 0 0 16px currentColor;
}
.g-tugwar .tug-zone.p1 .tug-taps-num { color: #8fd8ff; }
.g-tugwar .tug-zone.p2 .tug-taps-num { color: #ff8b96; }

.g-tugwar .tug-ripple {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  pointer-events: none;
  animation: tugRipple 0.42s ease-out forwards;
  z-index: 3;
}
.g-tugwar .tug-spark {
  position: absolute; width: 5px; height: 5px; margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgba(255, 233, 168, 0.95);
  pointer-events: none;
  animation: tugSpark 0.5s ease-out forwards;
  z-index: 3;
}
.g-tugwar .tug-spark.p1 { background: rgba(143, 216, 255, 0.95); }
.g-tugwar .tug-spark.p2 { background: rgba(255, 139, 150, 0.95); }
.g-tugwar .tug-hint { flex: none; text-align: center; font-size: 10.5px; color: var(--faint); }

/* ---------------- 结算 ---------------- */
.g-tugwar .tug-result { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.g-tugwar .tug-res-card {
  width: 100%;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 16px;
  border-radius: 22px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 92, 108, 0.16), transparent 55%),
    linear-gradient(180deg, #171b2c, #0d1120);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.g-tugwar .tug-res-title { text-align: center; font-size: 27px; font-weight: 800; line-height: 1.15; }
.g-tugwar .tug-res-title.p1 { color: #5fc8ff; text-shadow: 0 0 22px rgba(95, 200, 255, 0.45); }
.g-tugwar .tug-res-title.p2 { color: #ff5c6c; text-shadow: 0 0 22px rgba(255, 92, 108, 0.45); }
.g-tugwar .tug-res-score { text-align: center; font-size: 34px; font-weight: 800; letter-spacing: 0.06em; line-height: 1; }
.g-tugwar .tug-res-stats { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--dim); }
.g-tugwar .tug-stat-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.g-tugwar .tug-stat-line b { color: var(--text); font-weight: 700; }
.g-tugwar .tug-stat-line.p1 { color: #9fdcff; }
.g-tugwar .tug-stat-line.p2 { color: #ffa9b1; }

@keyframes tugShake {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-2px, 1px) rotate(-0.15deg); }
  50% { transform: translate(2px, -1px) rotate(0.15deg); }
  75% { transform: translate(-1px, 0) rotate(-0.08deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
@keyframes tugCrowd {
  from { opacity: 0.3; transform: translateY(0); }
  to { opacity: 0.85; transform: translateY(-3px); }
}
@keyframes tugRipple {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(3.2); opacity: 0; }
}
@keyframes tugSpark {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx, 0), var(--dy, -40px)) scale(0.2); opacity: 0; }
}

/* ---------------- 小屏 ---------------- */
@media (max-height: 720px) {
  .g-tugwar { gap: 8px; }
  .g-tugwar .tug-hint { display: none; }
  .g-tugwar .tug-zone { min-height: 110px; }
  .g-tugwar .tug-taps-num { font-size: 26px; }
  .g-tugwar .tug-res-score { font-size: 30px; }
}