/* 連打拔河 v29：每局準備、iOS 手勢鎖、紅燈警示、GPT 女裁判與四層景深。 */

/* 僅在拔河沉浸畫面鎖住瀏覽器平移、縮放與橡皮筋回彈；離場即由 JS 移除此 class。 */
html.tug-war-gesture-locked,
html.tug-war-gesture-locked body {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
  scroll-behavior: auto !important;
}

html.tug-war-gesture-locked body {
  position: fixed !important;
  top: calc(0px - var(--tw-gesture-scroll-y, 0px)) !important;
  right: 0 !important;
  bottom: auto !important;
  left: calc(0px - var(--tw-gesture-scroll-x, 0px)) !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

html.tug-war-gesture-locked #tug-war.tw-full,
html.tug-war-gesture-locked #tug-war.tw-full * {
  overscroll-behavior: none !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

.tw-team-players {
  transform: translateY(calc(0px - var(--tw-grip-offset-y, 33.2px) + var(--tw-rope-half-height, 6px)));
}

.tw-team-players.tw-team-squad {
  transform: translateY(calc(0px - var(--tw-grip-offset-y, 33.2px) + var(--tw-rope-half-height, 6px) - var(--tw-squad-lift, 0px)));
}

.tw-puller[data-team="A"] .tw-character-body {
  background-image: url("/assets/img/tug-war/body-red-pull-v4.webp?v=4");
}

.tw-puller[data-team="B"] .tw-character-body {
  background-image: url("/assets/img/tug-war/body-blue-pull-v4.webp?v=4");
}

.tw-avatar-head {
  box-sizing: border-box;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 4px;
  transform: none;
  transform-origin: 50% 100%;
  will-change: left, top;
}

.tw-puller[data-team="A"] .tw-avatar-head {
  left: 16.4316%;
  top: -20.6406%;
  width: 44%;
  transform: none;
}

.tw-puller[data-team="B"] .tw-avatar-head {
  left: 43.2773%;
  top: -18.2188%;
  width: 44%;
  transform: none;
}

.tw-puller-tps {
  display: none !important;
}

.tw-puller.self::before {
  top: calc(-23px - var(--tw-avatar-overhang, 12px));
}

.tw-puller-name {
  margin-top: -18px;
}

.tw-character-shadow {
  bottom: 18%;
}

.tw-stage.tw-pulling .tw-character-body {
  animation: twLimbPullFrames var(--tw-pull-speed, 1.02s) steps(1, end) var(--tw-player-delay, 0s) infinite;
}

.tw-stage.tw-pulling .tw-puller[data-team="A"] .tw-avatar-head {
  animation: twAvatarGripA11 var(--tw-pull-speed, 1.02s) steps(1, end) var(--tw-player-delay, 0s) infinite;
}

.tw-stage.tw-pulling .tw-puller[data-team="B"] .tw-avatar-head {
  animation: twAvatarGripB11 var(--tw-pull-speed, 1.02s) steps(1, end) var(--tw-player-delay, 0s) infinite;
}

@keyframes twAvatarGripA11 {
  0%, 16.666% { left: 16.4316%; top: -20.6406%; }
  16.667%, 33.332% { left: 16.6113%; top: -23.7598%; }
  33.333%, 49.999% { left: 18.2031%; top: -23.6973%; }
  50%, 66.666% { left: 21.8281%; top: -18.8691%; }
  66.667%, 83.333% { left: 21.5%; top: -18.2188%; }
  83.334%, 100% { left: 19.9746%; top: -18.3945%; }
}

@keyframes twAvatarGripB11 {
  0%, 16.666% { left: 43.2773%; top: -18.2188%; }
  16.667%, 33.332% { left: 36.5996%; top: -18.2188%; }
  33.333%, 49.999% { left: 38.2227%; top: -20.5156%; }
  50%, 66.666% { left: 41.5039%; top: -18.2188%; }
  66.667%, 83.333% { left: 32.5625%; top: -18.2188%; }
  83.334%, 100% { left: 36.8457%; top: -18.2188%; }
}

.tw-rope {
  --tw-rope-travel-x: 0px;
}

.tw-rope-world {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform: translate3d(var(--tw-rope-travel-x, 0px), 0, 0);
  will-change: transform;
}

.tw-rope-line.tw-rope-taut {
  position: absolute;
  left: 27%;
  right: 27%;
  top: 53%;
  z-index: 2;
  height: clamp(9px, calc(var(--tw-logical-h, 480px) * 0.032), 15px);
  overflow: hidden;
  border-radius: 999px;
  background-color: transparent;
  background-image: url("/assets/img/tug-war/rope.webp?v=4");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  box-shadow: 0 3px 0 rgba(39, 20, 8, 0.38), 0 0 0 1px rgba(89, 45, 12, 0.52);
  transform: translateY(0);
  will-change: transform;
}

.tw-rope-tail {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.tw-rope-tail-segment {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: var(--tw-tail-height, 12px);
  border-radius: 999px;
  background: url("/assets/img/tug-war/rope.webp?v=4") center / auto 100% repeat-x;
  box-shadow: 0 3px 0 rgba(39, 20, 8, 0.36), 0 0 0 1px rgba(89, 45, 12, 0.45);
  transform: rotate(var(--tw-tail-angle, 0deg));
  transform-origin: 0 50%;
  will-change: transform;
}

.tw-stage.tw-pulling .tw-rope-tail-a .tw-rope-tail-segment {
  animation-name: twRopeTailDragA;
  animation-duration: 0.42s;
  animation-timing-function: steps(3, end);
  animation-delay: var(--tw-tail-delay, 0s);
  animation-iteration-count: infinite;
}

.tw-stage.tw-pulling .tw-rope-tail-b .tw-rope-tail-segment {
  animation-name: twRopeTailDragB;
  animation-duration: 0.42s;
  animation-timing-function: steps(3, end);
  animation-delay: var(--tw-tail-delay, 0s);
  animation-iteration-count: infinite;
}

@keyframes twRopeTailDragA {
  0%, 100% { transform: translate3d(-1px, 0, 0) rotate(calc(var(--tw-tail-angle, 0deg) - 0.35deg)); }
  50% { transform: translate3d(2px, var(--tw-tail-drag-y, 1px), 0) rotate(calc(var(--tw-tail-angle, 0deg) + 0.55deg)); }
}

@keyframes twRopeTailDragB {
  0%, 100% { transform: translate3d(1px, 0, 0) rotate(calc(var(--tw-tail-angle, 0deg) + 0.35deg)); }
  50% { transform: translate3d(-2px, var(--tw-tail-drag-y, 1px), 0) rotate(calc(var(--tw-tail-angle, 0deg) - 0.55deg)); }
}

.tw-rope-end {
  position: absolute;
  left: var(--tw-end-x, 0px);
  right: auto;
  top: var(--tw-end-y, 70%);
  z-index: 3;
  display: block;
  width: clamp(42px, calc(var(--tw-logical-h, 480px) * 0.18), 86px);
  height: clamp(16px, calc(var(--tw-logical-h, 480px) * 0.07), 34px);
  background: url("/assets/img/tug-war/rope-end-left-v5.webp?v=6") left center / contain no-repeat;
  filter: drop-shadow(0 3px 1px rgba(39, 20, 8, 0.42));
  transform-origin: center;
}

.tw-rope-end-a {
  transform: translate(-4%, -50%) rotate(var(--tw-end-angle, 0deg));
  transform-origin: 4% 50%;
}

.tw-rope-end-b {
  transform: translate(-96%, -50%) rotate(var(--tw-end-angle, 0deg)) scaleX(-1);
  transform-origin: 96% 50%;
}

.tw-rope-mark {
  position: absolute;
  top: -52%;
  z-index: 4;
  width: clamp(3px, calc(var(--tw-logical-h, 480px) * 0.011), 6px);
  height: 204%;
  border: 1px solid rgba(15, 23, 42, 0.66);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 3px rgba(0, 0, 0, 0.36);
  transform: translateX(-50%);
}

.tw-rope-mark-a-outer { left: 6.522%; background: #f8fafc; }
.tw-rope-mark-a-win { left: 29.348%; background: #ef4444; }
.tw-rope-mark-center { left: 50%; background: #facc15; }
.tw-rope-mark-b-win { left: 70.652%; background: #2563eb; }
.tw-rope-mark-b-outer { left: 93.478%; background: #f8fafc; }

.tw-stage.tw-pulling .tw-rope-line.tw-rope-taut,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-rope-line.tw-rope-taut {
  animation: twRopeTensionV10 0.28s steps(3, end) infinite !important;
}

@keyframes twRopeTensionV10 {
  0%, 100% { transform: translateY(-1px); filter: brightness(0.99); }
  34% { transform: translateY(1px); filter: brightness(1.06); }
  67% { transform: translateY(0); filter: brightness(1.02); }
}

.tw-referee {
  --tw-referee-shift-x: 0px;
  --tw-referee-lean: 0deg;
  --tw-referee-weight-x: 0px;
  --tw-referee-weight-y: 0px;
  --tw-referee-shadow-shift-x: 0px;
  --tw-referee-shadow-scale: 1.2;
  position: absolute;
  left: 50%;
  top: 53%;
  z-index: 6;
  width: var(--tw-referee-size, 92px);
  aspect-ratio: 8 / 9;
  pointer-events: none;
  transform: translate3d(calc(-50% + var(--tw-referee-shift-x)), -72%, 0);
  filter: drop-shadow(0 4px 2px rgba(2, 6, 23, 0.42));
  will-change: transform;
}

.tw-referee-bubble {
  --tw-bubble-accent: #f59e0b;
  --tw-bubble-accent-dark: #9a4d05;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  bottom: calc(100% - 5px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(5px, calc(var(--tw-referee-size, 92px) * 0.06), 8px);
  width: max-content;
  max-width: clamp(154px, calc(var(--tw-referee-size, 92px) * 2.55), 236px);
  min-height: clamp(31px, calc(var(--tw-referee-size, 92px) * 0.38), 40px);
  padding: 4px clamp(9px, calc(var(--tw-referee-size, 92px) * 0.105), 12px) 5px 6px;
  overflow: visible;
  border: 2px solid #111827;
  border-radius: 11px 11px 11px 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), transparent 42%),
    #fff6cf;
  box-shadow:
    0 3px 0 #111827,
    0 6px 10px rgba(2, 6, 23, 0.3),
    inset 0 -2px 0 rgba(180, 83, 9, 0.16);
  color: #142033;
  font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  font-size: clamp(13px, calc(var(--tw-referee-size, 92px) * 0.18), 18px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0.015em;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, 4px, 0) scale(0.84);
  transform-origin: 50% 100%;
  transition: opacity 120ms linear, visibility 0s linear 120ms, transform 160ms ease-out;
  will-change: transform, opacity;
}

.tw-referee-bubble-tail {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 10px);
  z-index: 2;
  display: block;
  width: 13px;
  height: 13px;
  border-right: 2px solid #111827;
  border-bottom: 2px solid #111827;
  background: #fff6cf;
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 100ms linear, visibility 0s linear 120ms;
}

.tw-referee-bubble.show {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0) scale(1);
  transition-delay: 0s;
}

.tw-referee-bubble.show + .tw-referee-bubble-tail {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.tw-referee-bubble[data-team="A"] {
  --tw-bubble-accent: #ef4444;
  --tw-bubble-accent-dark: #991b1b;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), transparent 42%),
    #fff1e9;
}

.tw-referee-bubble[data-team="A"] + .tw-referee-bubble-tail { background: #fff1e9; }

.tw-referee-bubble[data-team="B"] {
  --tw-bubble-accent: #3b82f6;
  --tw-bubble-accent-dark: #1e40af;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), transparent 42%),
    #edf5ff;
}

.tw-referee-bubble[data-team="B"] + .tw-referee-bubble-tail { background: #edf5ff; }

.tw-referee-bubble[data-message-type="freeze"] {
  --tw-bubble-accent: #ef4444;
  --tw-bubble-accent-dark: #991b1b;
  border-color: #450a0a;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), transparent 42%),
    #fff1f2;
  box-shadow:
    0 3px 0 #450a0a,
    0 0 18px rgba(248, 113, 113, 0.7),
    inset 0 -2px 0 rgba(153, 27, 27, 0.18);
  color: #5f1010;
}

.tw-referee-bubble[data-message-type="freeze"] + .tw-referee-bubble-tail {
  border-color: #450a0a;
  background: #fff1f2;
}

.tw-referee-bubble-icon {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(21px, calc(var(--tw-referee-size, 92px) * 0.25), 27px);
  height: clamp(20px, calc(var(--tw-referee-size, 92px) * 0.23), 25px);
  border: 2px solid #111827;
  border-radius: 7px 7px 7px 3px;
  background: var(--tw-bubble-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tw-bubble-accent) 72%, white), var(--tw-bubble-accent-dark));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 1px 1px 0 rgba(17, 24, 39, 0.35);
  color: #fff;
  font-family: ui-monospace, "Cascadia Mono", sans-serif;
  font-size: clamp(13px, calc(var(--tw-referee-size, 92px) * 0.17), 17px);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(17, 24, 39, 0.55);
  animation: twDialogueIconBeat 1.1s steps(2, end) infinite;
}

.tw-referee-bubble-text {
  display: block;
  min-width: 0;
  padding-block: 1px;
  overflow: visible;
  line-height: 1.18;
}

/* 844×390 一類的低高度橫屏會採較大的多人裁判尺寸；把字幕壓回場景安全區，避免被 stage 裁掉。 */
@media (max-height: 430px) and (min-width: 521px) {
  #tug-war .tw-referee-bubble {
    bottom: calc(100% - 20px);
  }

  #tug-war .tw-referee-bubble-tail {
    bottom: calc(100% - 25px);
  }
}

.tw-referee-bubble.tw-speech-pop {
  animation: twRefereeSpeechPop 0.36s cubic-bezier(0.16, 0.9, 0.3, 1.25) both;
}

@keyframes twRefereeSpeechPop {
  0% { opacity: 0; transform: translate3d(-50%, 5px, 0) scale(0.7) rotate(-2deg); }
  68% { opacity: 1; transform: translate3d(-50%, -1px, 0) scale(1.06) rotate(1deg); }
  100% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1) rotate(0); }
}

@keyframes twDialogueIconBeat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.06); }
}

.tw-referee-shadow {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 2%;
  height: 8%;
  border-radius: 50%;
  background: rgba(2, 6, 23, 0.4);
  filter: blur(1px);
  transform: translateX(var(--tw-referee-shadow-shift-x)) scaleX(var(--tw-referee-shadow-scale));
  transition: transform 90ms linear;
  z-index: 0;
}

.tw-referee-body {
  position: absolute;
  inset: 0;
  display: block;
  background: url("/assets/img/tug-war/referee-watch-20f-v3.webp?v=1") 0 0 / 400% 500% no-repeat;
  image-rendering: auto;
  transform: translate3d(var(--tw-referee-weight-x), var(--tw-referee-weight-y), 0) rotate(var(--tw-referee-lean));
  transform-origin: 50% 92%;
  transition: transform 90ms linear;
  will-change: background-position, transform;
  z-index: 1;
}

.tw-stage.tw-pulling .tw-referee-body {
  animation: twRefereeCenterV3 1.6s linear infinite;
}

.tw-stage.tw-pulling .tw-referee[data-rope-direction="left"] .tw-referee-body {
  animation-name: twRefereeLeftV3;
  animation-duration: 0.88s;
}

.tw-stage.tw-pulling .tw-referee[data-rope-direction="left"][data-rope-force="strong"] .tw-referee-body {
  animation-name: twRefereeLeftStrongV3;
  animation-duration: 0.72s;
}

.tw-stage.tw-pulling .tw-referee[data-rope-direction="right"] .tw-referee-body {
  animation-name: twRefereeRightV3;
  animation-duration: 0.88s;
}

.tw-stage.tw-pulling .tw-referee[data-rope-direction="right"][data-rope-force="strong"] .tw-referee-body {
  animation-name: twRefereeRightStrongV3;
  animation-duration: 0.72s;
}

.tw-referee.tw-referee-whistle .tw-referee-body {
  animation: twRefereeWhistleV3 0.92s linear 1 both !important;
}

@keyframes twRefereeCenterV3 {
  0%, 19.999% { background-position: 0% 0%; }
  20%, 39.999% { background-position: 33.333% 25%; }
  40%, 59.999% { background-position: 66.667% 50%; }
  60%, 79.999% { background-position: 100% 50%; }
  80%, 100% { background-position: 100% 100%; }
}

@keyframes twRefereeLeftV3 {
  0%, 24.999% { background-position: 33.333% 0%; }
  25%, 49.999% { background-position: 66.667% 0%; }
  50%, 74.999% { background-position: 0% 25%; }
  75%, 100% { background-position: 66.667% 75%; }
}

@keyframes twRefereeLeftStrongV3 {
  0%, 24.999% { background-position: 66.667% 0%; }
  25%, 49.999% { background-position: 100% 0%; }
  50%, 74.999% { background-position: 0% 75%; }
  75%, 100% { background-position: 33.333% 75%; }
}

@keyframes twRefereeRightV3 {
  0%, 24.999% { background-position: 66.667% 25%; }
  25%, 49.999% { background-position: 100% 25%; }
  50%, 74.999% { background-position: 33.333% 50%; }
  75%, 100% { background-position: 66.667% 100%; }
}

@keyframes twRefereeRightStrongV3 {
  0%, 24.999% { background-position: 100% 25%; }
  25%, 49.999% { background-position: 0% 50%; }
  50%, 74.999% { background-position: 0% 100%; }
  75%, 100% { background-position: 66.667% 100%; }
}

@keyframes twRefereeWhistleV3 {
  0%, 19.999% { background-position: 100% 75%; }
  20%, 39.999% { background-position: 0% 100%; }
  40%, 59.999% { background-position: 33.333% 100%; }
  60%, 79.999% { background-position: 66.667% 100%; }
  80%, 100% { background-position: 100% 100%; }
}

.tw-sweat-drop {
  position: absolute;
  top: -18%;
  z-index: 5;
  display: block;
  width: clamp(4px, calc(var(--tw-character-size) * 0.07), 8px);
  height: clamp(6px, calc(var(--tw-character-size) * 0.105), 12px);
  opacity: 0;
  border: 1px solid rgba(8, 47, 73, 0.72);
  border-radius: 60% 45% 65% 45%;
  background: linear-gradient(135deg, #f0fdff 0 38%, #67e8f9 39% 100%);
  box-shadow: 1px 2px 0 rgba(8, 47, 73, 0.36), 0 0 5px rgba(165, 243, 252, 0.75);
  pointer-events: none;
}

.tw-puller[data-team="A"] .tw-sweat-drop { left: 6%; }
.tw-puller[data-team="B"] .tw-sweat-drop { right: 6%; }
.tw-sweat-drop-2 { top: -8%; margin-inline-start: 9%; transform: scale(0.78); }
.tw-sweat-drop-3 { top: 2%; margin-inline-start: -3%; transform: scale(0.62); }

.tw-stage.tw-pulling .tw-puller[data-team="A"] .tw-sweat-drop {
  animation-name: twSweatSprayA;
  animation-duration: var(--tw-pull-speed, 0.9s);
  animation-timing-function: steps(4, end);
  animation-iteration-count: infinite;
}

.tw-stage.tw-pulling .tw-puller[data-team="B"] .tw-sweat-drop {
  animation-name: twSweatSprayB;
  animation-duration: var(--tw-pull-speed, 0.9s);
  animation-timing-function: steps(4, end);
  animation-iteration-count: infinite;
}

.tw-stage.tw-pulling .tw-sweat-drop-2 { animation-delay: -0.34s !important; }
.tw-stage.tw-pulling .tw-sweat-drop-3 { animation-delay: -0.68s !important; }

@keyframes twSweatSprayA {
  0% { opacity: 0; transform: translate3d(3px, 3px, 0) scale(0.55) rotate(35deg); }
  22% { opacity: 1; }
  58% { opacity: 0.92; transform: translate3d(-12px, -10px, 0) scale(0.9) rotate(45deg); }
  100% { opacity: 0; transform: translate3d(-25px, 10px, 0) scale(0.62) rotate(55deg); }
}

@keyframes twSweatSprayB {
  0% { opacity: 0; transform: translate3d(-3px, 3px, 0) scale(0.55) rotate(-35deg); }
  22% { opacity: 1; }
  58% { opacity: 0.92; transform: translate3d(12px, -10px, 0) scale(0.9) rotate(-45deg); }
  100% { opacity: 0; transform: translate3d(25px, 10px, 0) scale(0.62) rotate(-55deg); }
}

.tw-flag {
  content: url("/assets/img/tug-war/center-knot.webp?v=5");
}

.tw-controls::before {
  background-image: url("/assets/img/tug-war/rope.webp?v=4");
}

.tw-tap-btn::before {
  background-image: url("/assets/img/tug-war/center-knot.webp?v=4");
}

body.perf-lite #tug-war .tw-stage.tw-pulling .tw-character-body {
  animation: twLimbPullFrames var(--tw-pull-speed, 1.02s) steps(1, end) var(--tw-player-delay, 0s) infinite !important;
}

body.perf-lite #tug-war .tw-stage.tw-pulling .tw-puller[data-team="A"] .tw-avatar-head {
  animation: twAvatarGripA11 var(--tw-pull-speed, 1.02s) steps(1, end) var(--tw-player-delay, 0s) infinite !important;
}

body.perf-lite #tug-war .tw-stage.tw-pulling .tw-puller[data-team="B"] .tw-avatar-head {
  animation: twAvatarGripB11 var(--tw-pull-speed, 1.02s) steps(1, end) var(--tw-player-delay, 0s) infinite !important;
}

body.perf-lite #tug-war .tw-stage.tw-pulling .tw-rope-tail-a .tw-rope-tail-segment {
  animation: twRopeTailDragA 0.42s steps(3, end) infinite !important;
  animation-delay: var(--tw-tail-delay, 0s) !important;
}

body.perf-lite #tug-war .tw-stage.tw-pulling .tw-rope-tail-b .tw-rope-tail-segment {
  animation: twRopeTailDragB 0.42s steps(3, end) infinite !important;
  animation-delay: var(--tw-tail-delay, 0s) !important;
}

body.perf-lite #tug-war .tw-stage.tw-pulling .tw-puller[data-team="A"] .tw-sweat-drop {
  animation: twSweatSprayA var(--tw-pull-speed, 0.9s) steps(4, end) infinite !important;
}

body.perf-lite #tug-war .tw-stage.tw-pulling .tw-puller[data-team="B"] .tw-sweat-drop {
  animation: twSweatSprayB var(--tw-pull-speed, 0.9s) steps(4, end) infinite !important;
}

body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee-body {
  animation: twRefereeCenterV3 1.6s linear infinite !important;
}

body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-rope-direction="left"] .tw-referee-body {
  animation-name: twRefereeLeftV3 !important;
  animation-duration: 0.88s !important;
}

body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-rope-direction="left"][data-rope-force="strong"] .tw-referee-body {
  animation-name: twRefereeLeftStrongV3 !important;
  animation-duration: 0.72s !important;
}

body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-rope-direction="right"] .tw-referee-body {
  animation-name: twRefereeRightV3 !important;
  animation-duration: 0.88s !important;
}

body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-rope-direction="right"][data-rope-force="strong"] .tw-referee-body {
  animation-name: twRefereeRightStrongV3 !important;
  animation-duration: 0.72s !important;
}

body.perf-lite #tug-war .tw-referee.tw-referee-whistle .tw-referee-body {
  animation: twRefereeWhistleV3 0.92s linear 1 both !important;
}

@media (max-width: 900px) {
  .tw-rope-line.tw-rope-taut,
  #tug-war.tw-rotated .tw-rope-line.tw-rope-taut {
    left: 27%;
    right: 27%;
  }
}

/* 系統減少動畫時仍保留較慢的核心拔繩，僅停用非必要環境特效。 */
@media (prefers-reduced-motion: reduce) {
  #tug-war .tw-referee-bubble.tw-speech-pop,
  #tug-war .tw-referee-bubble-icon {
    animation: none !important;
  }

  #tug-war .tw-stage.tw-pulling .tw-character-body,
  body.perf-lite #tug-war .tw-stage.tw-pulling .tw-character-body {
    animation: twLimbPullFrames 1.2s steps(1, end) var(--tw-player-delay, 0s) infinite !important;
  }

  #tug-war .tw-stage.tw-pulling .tw-puller[data-team="A"] .tw-avatar-head,
  body.perf-lite #tug-war .tw-stage.tw-pulling .tw-puller[data-team="A"] .tw-avatar-head {
    animation: twAvatarGripA11 1.2s steps(1, end) var(--tw-player-delay, 0s) infinite !important;
  }

  #tug-war .tw-stage.tw-pulling .tw-puller[data-team="B"] .tw-avatar-head,
  body.perf-lite #tug-war .tw-stage.tw-pulling .tw-puller[data-team="B"] .tw-avatar-head {
    animation: twAvatarGripB11 1.2s steps(1, end) var(--tw-player-delay, 0s) infinite !important;
  }

  #tug-war .tw-stage.tw-pulling .tw-rope-line.tw-rope-taut,
  body.perf-lite #tug-war .tw-stage.tw-pulling .tw-rope-line.tw-rope-taut {
    animation: twRopeTensionV10 0.5s steps(3, end) infinite !important;
  }

  #tug-war .tw-stage.tw-pulling .tw-referee-body {
    animation-duration: 6.4s !important;
  }

  #tug-war .tw-stage.tw-pulling .tw-rope-tail-segment {
    animation-duration: 0.68s !important;
  }
}

/* 紅燈只染紅背景天空；z-index 3 保持在勝負線、裁判、繩子與人物之下。 */
.tw-stage.tw-frozen::before {
  content: "";
  position: absolute;
  inset: -2% -2% auto;
  height: 72%;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 105, 105, 0.9) 0%, rgba(239, 68, 68, 0.7) 30%, transparent 68%),
    linear-gradient(180deg, rgba(127, 29, 29, 0.78) 0%, rgba(220, 38, 38, 0.62) 42%, rgba(185, 28, 28, 0.24) 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 58%, rgba(0, 0, 0, 0.7) 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 58%, rgba(0, 0, 0, 0.7) 76%, transparent 100%);
  transform-origin: 50% 0;
  animation: twFreezeSkyAlarm 1.1s ease-in-out infinite alternate;
}

@keyframes twFreezeSkyAlarm {
  from { opacity: 0.72; filter: saturate(1.05) brightness(0.92); }
  to { opacity: 1; filter: saturate(1.35) brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  #tug-war .tw-stage.tw-frozen::before,
  body.perf-lite #tug-war .tw-stage.tw-frozen::before {
    animation: none !important;
    opacity: 0.9;
  }
}

/* v19 照片參考女性像素裁判：字幕換句才重播動作，繩位只控制緩慢重心。 */
.tw-referee {
  aspect-ratio: 8 / 9;
  transform: translate3d(calc(-50% + var(--tw-referee-shift-x)), -72%, 0);
}

.tw-referee-body {
  background-image: url("/assets/img/tug-war/referee-photo-20f-v5.webp?v=5");
  background-size: 400% 500%;
  background-position: 0 0;
  transform: translate3d(var(--tw-referee-weight-x), var(--tw-referee-weight-y), 0) rotate(var(--tw-referee-lean));
  transform-origin: 50% 92%;
  transition: transform 180ms ease-out;
}

.tw-stage.tw-pulling .tw-referee-body,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee-body {
  animation: none !important;
}

.tw-stage.tw-pulling .tw-referee[data-motion="watch"] .tw-referee-body.tw-referee-motion-live,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-motion="watch"] .tw-referee-body.tw-referee-motion-live {
  animation: twRefMotionWatchV4 6.4s linear infinite !important;
}

.tw-stage.tw-pulling .tw-referee[data-motion="track"] .tw-referee-body.tw-referee-motion-live,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-motion="track"] .tw-referee-body.tw-referee-motion-live {
  animation: twRefMotionTrackV4 6s linear infinite !important;
}

.tw-stage.tw-pulling .tw-referee[data-motion="lead-a"] .tw-referee-body.tw-referee-motion-live,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-motion="lead-a"] .tw-referee-body.tw-referee-motion-live {
  animation: twRefMotionLeadAV4 5.6s linear infinite !important;
}

.tw-stage.tw-pulling .tw-referee[data-motion="lead-b"] .tw-referee-body.tw-referee-motion-live,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-motion="lead-b"] .tw-referee-body.tw-referee-motion-live {
  animation: twRefMotionLeadBV4 5.6s linear infinite !important;
}

.tw-stage.tw-pulling .tw-referee[data-motion="comeback-a"] .tw-referee-body.tw-referee-motion-live,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-motion="comeback-a"] .tw-referee-body.tw-referee-motion-live {
  animation: twRefMotionComebackAV4 5.4s linear infinite !important;
}

.tw-stage.tw-pulling .tw-referee[data-motion="comeback-b"] .tw-referee-body.tw-referee-motion-live,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-motion="comeback-b"] .tw-referee-body.tw-referee-motion-live {
  animation: twRefMotionComebackBV4 5.4s linear infinite !important;
}

.tw-stage.tw-pulling .tw-referee[data-motion="near-a"] .tw-referee-body.tw-referee-motion-live,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-motion="near-a"] .tw-referee-body.tw-referee-motion-live {
  animation: twRefMotionNearAV4 5s linear infinite !important;
}

.tw-stage.tw-pulling .tw-referee[data-motion="near-b"] .tw-referee-body.tw-referee-motion-live,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-motion="near-b"] .tw-referee-body.tw-referee-motion-live {
  animation: twRefMotionNearBV4 5s linear infinite !important;
}

.tw-stage.tw-pulling .tw-referee[data-motion="close-a"] .tw-referee-body.tw-referee-motion-live,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-motion="close-a"] .tw-referee-body.tw-referee-motion-live {
  animation: twRefMotionCloseAV4 5.6s linear infinite !important;
}

.tw-stage.tw-pulling .tw-referee[data-motion="close-b"] .tw-referee-body.tw-referee-motion-live,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-motion="close-b"] .tw-referee-body.tw-referee-motion-live {
  animation: twRefMotionCloseBV4 5.6s linear infinite !important;
}

.tw-stage.tw-pulling .tw-referee[data-motion="stop"] .tw-referee-body.tw-referee-motion-live,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-motion="stop"] .tw-referee-body.tw-referee-motion-live {
  animation: twRefMotionStopV26 1.45s linear 1 both !important;
}

.tw-referee.tw-referee-whistle .tw-referee-body,
body.perf-lite #tug-war .tw-referee.tw-referee-whistle .tw-referee-body,
#tug-war .tw-stage.tw-pulling .tw-referee.tw-referee-whistle[data-motion] .tw-referee-body.tw-referee-motion-live,
body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee.tw-referee-whistle[data-motion] .tw-referee-body.tw-referee-motion-live {
  animation: twRefMotionWhistleV4 2.6s linear 1 both !important;
}

@keyframes twRefMotionWatchV4 {
  0%, 39.999% { background-position: 0 0; }
  40%, 54.999% { background-position: 0 25%; }
  55%, 100% { background-position: 0 0; }
}

@keyframes twRefMotionTrackV4 {
  0%, 23.999% { background-position: 0 0; }
  24%, 42.999% { background-position: 33.333% 0; }
  43%, 57.999% { background-position: 0 0; }
  58%, 76.999% { background-position: 33.333% 25%; }
  77%, 100% { background-position: 0 0; }
}

@keyframes twRefMotionLeadAV4 {
  0%, 27.999% { background-position: 0 0; }
  28%, 71.999% { background-position: 0 75%; }
  72%, 100% { background-position: 0 0; }
}

@keyframes twRefMotionLeadBV4 {
  0%, 27.999% { background-position: 0 0; }
  28%, 71.999% { background-position: 33.333% 75%; }
  72%, 100% { background-position: 0 0; }
}

@keyframes twRefMotionComebackAV4 {
  0%, 19.999% { background-position: 0 0; }
  20%, 47.999% { background-position: 66.667% 75%; }
  48%, 73.999% { background-position: 66.667% 100%; }
  74%, 100% { background-position: 100% 100%; }
}

@keyframes twRefMotionComebackBV4 {
  0%, 19.999% { background-position: 0 0; }
  20%, 47.999% { background-position: 100% 75%; }
  48%, 73.999% { background-position: 66.667% 100%; }
  74%, 100% { background-position: 100% 100%; }
}

@keyframes twRefMotionNearAV4 {
  0%, 21.999% { background-position: 0 0; }
  22%, 49.999% { background-position: 100% 0; }
  50%, 72.999% { background-position: 66.667% 0; }
  73%, 100% { background-position: 0 0; }
}

@keyframes twRefMotionNearBV4 {
  0%, 21.999% { background-position: 0 0; }
  22%, 49.999% { background-position: 100% 25%; }
  50%, 72.999% { background-position: 66.667% 25%; }
  73%, 100% { background-position: 0 0; }
}

@keyframes twRefMotionCloseAV4 {
  0%, 17.999% { background-position: 0 0; }
  18%, 36.999% { background-position: 0 50%; }
  37%, 59.999% { background-position: 66.667% 0; }
  60%, 75.999% { background-position: 66.667% 50%; }
  76%, 100% { background-position: 0 0; }
}

@keyframes twRefMotionCloseBV4 {
  0%, 17.999% { background-position: 0 0; }
  18%, 36.999% { background-position: 0 50%; }
  37%, 59.999% { background-position: 66.667% 25%; }
  60%, 75.999% { background-position: 66.667% 50%; }
  76%, 100% { background-position: 0 0; }
}

@keyframes twRefMotionWhistleV4 {
  0%, 21.999% { background-position: 0 100%; }
  22%, 43.999% { background-position: 33.333% 100%; }
  44%, 72.999% { background-position: 66.667% 100%; }
  73%, 100% { background-position: 100% 100%; }
}

@keyframes twRefMotionStopV26 {
  0%, 13.999% { background-position: 0 100%; }
  14%, 31.999% { background-position: 33.333% 100%; }
  32%, 71.999% { background-position: 100% 0; }
  72%, 100% { background-position: 100% 25%; }
}

.tw-intro-overlay.counting .tw-intro-count,
body.perf-lite #tug-war .tw-intro-overlay.counting .tw-intro-count {
  color: #ffe26e;
  text-shadow:
    0 6px 0 #92400e,
    0 0 30px rgba(250, 204, 21, 0.98);
  animation: twCountdownYellowV21 0.92s steps(3, end) infinite !important;
}

.tw-intro-overlay.counting.tw-go .tw-intro-count,
body.perf-lite #tug-war .tw-intro-overlay.counting.tw-go .tw-intro-count {
  color: #ffe26e;
  text-shadow:
    0 6px 0 #92400e,
    0 0 34px rgba(250, 204, 21, 1);
  animation: twStartYellowV21 0.3s cubic-bezier(0.16, 1.2, 0.42, 1) both !important;
}

/* 保留單一選擇器契約，非 perf-lite 裝置也明確以黃字呈現「開始」。 */
.tw-intro-overlay.counting.tw-go .tw-intro-count {
  color: #ffe26e;
}

.tw-intro-overlay.counting.tw-go {
  pointer-events: none;
}

@keyframes twCountdownYellowV21 {
  0% { opacity: 0.72; transform: scale(1.22); }
  34%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes twStartYellowV21 {
  0% { opacity: 0.78; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.perf-lite #tug-war .tw-stage.tw-pulling .tw-referee[data-motion] .tw-referee-body.tw-referee-motion-live {
    animation-duration: 8s !important;
  }

  body.perf-lite #tug-war .tw-referee.tw-referee-whistle .tw-referee-body {
    animation-duration: 3.6s !important;
  }
}

/* 遠景／中景／近景／空氣光霧：同一張 GPT 場景以柔邊遮罩分層，避免拼接線與黑邊。 */
.tw-wrap[data-scene="mud"] {
  --tw-depth-image: url("/assets/img/tug-war/bg-meadow.webp?v=3");
  --tw-depth-far-filter: saturate(0.96) contrast(0.98) brightness(1.01);
  --tw-depth-mid-filter: saturate(1.05) contrast(1.02) brightness(1.015);
  --tw-depth-near-filter: saturate(1.12) contrast(1.06) brightness(0.98);
  --tw-depth-haze: radial-gradient(ellipse at 20% 24%, rgba(255, 238, 153, 0.26), transparent 35%), linear-gradient(108deg, transparent 18%, rgba(187, 247, 208, 0.12) 48%, transparent 74%);
  --tw-depth-ground-mist: linear-gradient(180deg, transparent, rgba(220, 252, 231, 0.14));
}

.tw-wrap[data-scene="river"] {
  --tw-depth-image: url("/assets/img/tug-war/bg-river.webp?v=3");
  --tw-depth-far-filter: saturate(0.93) contrast(0.98) brightness(1.015) hue-rotate(-2deg);
  --tw-depth-mid-filter: saturate(1.08) contrast(1.03) brightness(1.02);
  --tw-depth-near-filter: saturate(1.15) contrast(1.07) brightness(0.97);
  --tw-depth-haze: radial-gradient(ellipse at 68% 27%, rgba(165, 243, 252, 0.25), transparent 34%), linear-gradient(102deg, transparent 12%, rgba(125, 211, 252, 0.14) 52%, transparent 82%);
  --tw-depth-ground-mist: linear-gradient(180deg, transparent, rgba(103, 232, 249, 0.15));
}

.tw-wrap[data-scene="cliff"] {
  --tw-depth-image: url("/assets/img/tug-war/bg-cliff.webp?v=3");
  --tw-depth-far-filter: saturate(0.91) contrast(0.97) brightness(1.04);
  --tw-depth-mid-filter: saturate(1.05) contrast(1.03) brightness(1.01);
  --tw-depth-near-filter: saturate(1.12) contrast(1.08) brightness(0.96);
  --tw-depth-haze: radial-gradient(ellipse at 72% 22%, rgba(254, 215, 170, 0.27), transparent 34%), linear-gradient(108deg, transparent 12%, rgba(251, 146, 60, 0.13) 48%, transparent 82%);
  --tw-depth-ground-mist: linear-gradient(180deg, transparent, rgba(251, 191, 36, 0.12));
}

.tw-wrap[data-scene="snow"] {
  --tw-depth-image: url("/assets/img/tug-war/bg-snow.webp?v=3");
  --tw-depth-far-filter: saturate(0.88) contrast(0.97) brightness(1.045);
  --tw-depth-mid-filter: saturate(1.02) contrast(1.02) brightness(1.025);
  --tw-depth-near-filter: saturate(1.08) contrast(1.07) brightness(1.01);
  --tw-depth-haze: radial-gradient(ellipse at 31% 26%, rgba(224, 242, 254, 0.3), transparent 36%), linear-gradient(102deg, transparent 10%, rgba(186, 230, 253, 0.19) 50%, transparent 86%);
  --tw-depth-ground-mist: linear-gradient(180deg, transparent, rgba(240, 249, 255, 0.2));
}

.tw-wrap[data-scene="volcano"] {
  --tw-depth-image: url("/assets/img/tug-war/bg-volcano.webp?v=3");
  --tw-depth-far-filter: saturate(0.93) contrast(0.99) brightness(0.96);
  --tw-depth-mid-filter: saturate(1.08) contrast(1.04) brightness(0.99);
  --tw-depth-near-filter: saturate(1.16) contrast(1.1) brightness(0.94);
  --tw-depth-haze: radial-gradient(ellipse at 64% 23%, rgba(251, 146, 60, 0.27), transparent 34%), linear-gradient(104deg, transparent 10%, rgba(239, 68, 68, 0.13) 48%, transparent 82%);
  --tw-depth-ground-mist: linear-gradient(180deg, transparent, rgba(249, 115, 22, 0.17));
}

.tw-scene-bg,
.tw-scene-depth,
.tw-scene-haze {
  position: absolute;
  pointer-events: none;
}

.tw-scene-bg,
.tw-scene-depth {
  inset: -3%;
  z-index: 0;
  background-image: var(--tw-depth-image) !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center var(--tw-scene-y, 61%);
  backface-visibility: hidden;
  transform-origin: 50% 58%;
  will-change: transform;
}

.tw-scene-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center var(--tw-scene-y, 61%);
  filter: var(--tw-depth-far-filter, saturate(0.96) contrast(0.98));
  animation: twDepthFarFloat 26s ease-in-out infinite;
}

.tw-scene-depth {
  opacity: 0;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .tw-scene-depth { opacity: 0.98; }
}

.tw-scene-depth-mid {
  filter: var(--tw-depth-mid-filter, saturate(1.04) contrast(1.02));
  -webkit-mask-image: linear-gradient(to bottom, transparent 5%, rgba(0, 0, 0, 0.16) 17%, #000 31%, #000 68%, rgba(0, 0, 0, 0.22) 79%, transparent 91%);
  mask-image: linear-gradient(to bottom, transparent 5%, rgba(0, 0, 0, 0.16) 17%, #000 31%, #000 68%, rgba(0, 0, 0, 0.22) 79%, transparent 91%);
  animation: twDepthMidFloat 17s ease-in-out infinite;
}

.tw-scene-depth-near {
  filter: var(--tw-depth-near-filter, saturate(1.1) contrast(1.06));
  -webkit-mask-image: linear-gradient(to bottom, transparent 47%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.76) 68%, #000 82%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 47%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.76) 68%, #000 82%, #000 100%);
  animation: twDepthNearFloat 10.5s ease-in-out infinite;
}

.tw-scene-haze {
  inset: -12%;
  z-index: 1;
  overflow: hidden;
  background: var(--tw-depth-haze);
  opacity: 0.5;
  mix-blend-mode: screen;
  transform-origin: center;
  animation: twDepthHazeFloat 14s ease-in-out infinite;
  will-change: transform, opacity;
}

.tw-scene-haze::before,
.tw-scene-haze::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tw-scene-haze::before {
  inset: 16% 4% 30%;
  background:
    radial-gradient(circle at 11% 28%, rgba(255, 255, 255, 0.6) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 66%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 22%, rgba(255, 255, 255, 0.5) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 86% 58%, rgba(255, 255, 255, 0.44) 0 1px, transparent 2px);
  opacity: 0.55;
  animation: twDepthAirOrbit 19s linear infinite;
}

.tw-scene-haze::after {
  left: 2%;
  right: 2%;
  bottom: 4%;
  height: 42%;
  background: var(--tw-depth-ground-mist);
  opacity: 0.46;
  animation: twDepthGroundBreathe 8s ease-in-out infinite alternate;
}

@keyframes twDepthFarFloat {
  0%, 100% { transform: translate3d(calc(var(--tw-depth-far-react-x, 0px) - 0.24%), calc(var(--tw-depth-react-y, 0px) - 0.12%), 0) scale(1.035); }
  48% { transform: translate3d(calc(var(--tw-depth-far-react-x, 0px) + 0.26%), calc(var(--tw-depth-react-y, 0px) + 0.16%), 0) scale(1.047); }
}

@keyframes twDepthMidFloat {
  0%, 100% { transform: translate3d(calc(var(--tw-depth-mid-react-x, 0px) + 0.42%), calc(var(--tw-depth-react-y, 0px) + 0.18%), 0) scale(1.052); }
  52% { transform: translate3d(calc(var(--tw-depth-mid-react-x, 0px) - 0.43%), calc(var(--tw-depth-react-y, 0px) - 0.2%), 0) scale(1.066); }
}

@keyframes twDepthNearFloat {
  0%, 100% { transform: translate3d(calc(var(--tw-depth-near-react-x, 0px) - 0.62%), calc(var(--tw-depth-react-y, 0px) - 0.25%), 0) scale(1.075); }
  46% { transform: translate3d(calc(var(--tw-depth-near-react-x, 0px) + 0.68%), calc(var(--tw-depth-react-y, 0px) + 0.31%), 0) scale(1.094); }
}

@keyframes twDepthHazeFloat {
  0%, 100% { transform: translate3d(calc(var(--tw-depth-haze-react-x, 0px) - 1.2%), -0.35%, 0) scale(1.02); opacity: 0.38; }
  50% { transform: translate3d(calc(var(--tw-depth-haze-react-x, 0px) + 1.35%), 0.45%, 0) scale(1.055); opacity: 0.56; }
}

@keyframes twDepthAirOrbit {
  from { transform: translate3d(-2.2%, 1%, 0); }
  to { transform: translate3d(3.2%, -2%, 0); }
}

@keyframes twDepthGroundBreathe {
  from { transform: translate3d(-1%, 1.5%, 0) scaleX(0.97); }
  to { transform: translate3d(1.2%, -1%, 0) scaleX(1.04); }
}

/* 空氣粒子也分景深：模糊小粒子最慢，銳利大粒子最快。 */
.tw-weather i:nth-child(3n + 1) {
  width: calc(var(--tw-weather-size, 4px) * 0.68);
  height: calc(var(--tw-weather-size, 4px) * 0.68);
  filter: blur(0.7px);
}

.tw-weather i:nth-child(3n + 2) {
  width: calc(var(--tw-weather-size, 4px) * 0.92);
  height: calc(var(--tw-weather-size, 4px) * 0.92);
  filter: blur(0.25px);
}

.tw-weather i:nth-child(3n) {
  width: calc(var(--tw-weather-size, 4px) * 1.3);
  height: calc(var(--tw-weather-size, 4px) * 1.3);
  filter: none;
}

body.perf-lite #tug-war .tw-scene-bg {
  animation: twDepthFarFloat 26s ease-in-out infinite !important;
}

body.perf-lite #tug-war .tw-scene-depth-mid {
  animation: twDepthMidFloat 17s ease-in-out infinite !important;
}

body.perf-lite #tug-war .tw-scene-depth-near {
  animation: twDepthNearFloat 10.5s ease-in-out infinite !important;
}

body.perf-lite #tug-war .tw-scene-haze {
  animation: twDepthHazeFloat 14s ease-in-out infinite !important;
}

body.perf-lite #tug-war .tw-scene-haze::before {
  animation: twDepthAirOrbit 19s linear infinite alternate !important;
}

body.perf-lite #tug-war .tw-scene-haze::after {
  animation: twDepthGroundBreathe 8s ease-in-out infinite alternate !important;
}

body.perf-lite #tug-war .tw-weather i:nth-child(3n + 1) { animation-duration: 7.8s !important; }
body.perf-lite #tug-war .tw-weather i:nth-child(3n + 2) { animation-duration: 5.8s !important; }
body.perf-lite #tug-war .tw-weather i:nth-child(3n) { animation-duration: 4.2s !important; }

@media (prefers-reduced-motion: reduce) {
  #tug-war .tw-scene-bg,
  #tug-war .tw-scene-depth-mid,
  #tug-war .tw-scene-depth-near,
  #tug-war .tw-scene-haze,
  #tug-war .tw-scene-haze::before,
  #tug-war .tw-scene-haze::after,
  body.perf-lite #tug-war .tw-scene-bg,
  body.perf-lite #tug-war .tw-scene-depth-mid,
  body.perf-lite #tug-war .tw-scene-depth-near,
  body.perf-lite #tug-war .tw-scene-haze,
  body.perf-lite #tug-war .tw-scene-haze::before,
  body.perf-lite #tug-war .tw-scene-haze::after {
    animation: none !important;
  }
}