:root {
  color-scheme: dark;
  --blue: #2f80ff;
  --red: #ff4b4b;
  --gold: #ffd66b;
  --ink: #f8fbff;
  --muted: rgba(248, 251, 255, 0.78);
  --stroke: rgba(0, 0, 0, 0.82);
  --soft-stroke: rgba(0, 0, 0, 0.58);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  --motion-scale: 1;
  --tug-distance: 13px;
  --tug-blue-distance: -13px;
  --flag-wave-duration: 3.8s;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: transparent;
}

body[data-animation-intensity="low"] { --motion-scale: 0.58; --tug-distance: 8px; --tug-blue-distance: -8px; --flag-wave-duration: 5s; }
body[data-animation-intensity="high"] { --motion-scale: 1.42; --tug-distance: 18px; --tug-blue-distance: -18px; --flag-wave-duration: 3s; }
body[data-animation-intensity="off"] { --motion-scale: 0; --tug-distance: 0px; --tug-blue-distance: 0px; }

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2px 6px;
  color: var(--ink);
}

.overlay-shell {
  position: relative;
  width: min(640px, calc(100vw - 12px));
  padding: 0 4px;
  background: transparent;
  overflow: visible;
}

.smart-event-banner,
.experience-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 4px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 214, 107, 0.72);
  border-radius: 999px;
  color: #fff7d8;
  background: linear-gradient(90deg, rgba(36, 26, 5, 0.92), rgba(74, 45, 9, 0.86));
  box-shadow:
    0 0 16px rgba(255, 214, 107, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.44);
  text-shadow: 0 1px 2px var(--stroke);
}

.smart-event-banner[hidden] {
  display: none;
}

.smart-event-banner span,
.smart-event-banner strong,
.experience-banner span,
.experience-banner strong {
  min-width: 0;
  white-space: nowrap;
}

.smart-event-banner span,
.experience-banner span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.smart-event-banner strong,
.experience-banner strong {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 950;
  text-overflow: ellipsis;
}

.experience-banner {
  margin-bottom: 5px;
  border-color: rgba(126, 231, 255, 0.62);
  color: #e8fbff;
  background: linear-gradient(90deg, rgba(8, 23, 42, 0.92), rgba(17, 47, 75, 0.86));
  box-shadow:
    0 0 14px rgba(126, 231, 255, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.44);
}

.experience-banner[hidden] {
  display: none;
}

.overlay-shell.has-smart-event {
  filter: drop-shadow(0 0 12px rgba(255, 214, 107, 0.18));
}

.overlay-shell.has-experience-mode {
  filter: drop-shadow(0 0 10px rgba(126, 231, 255, 0.14));
}

.overlay-shell.experience-double-coins .experience-banner,
.overlay-shell.experience-tug-frenzy .experience-banner {
  border-color: rgba(255, 214, 107, 0.7);
  color: #fff7d8;
  background: linear-gradient(90deg, rgba(39, 28, 6, 0.92), rgba(79, 50, 10, 0.86));
  box-shadow: 0 0 14px rgba(255, 214, 107, 0.28);
}

.overlay-shell.experience-reverse-pull .experience-banner,
.overlay-shell.experience-chaos-hour .experience-banner {
  border-color: rgba(255, 141, 152, 0.72);
  color: #ffe8eb;
  background: linear-gradient(90deg, rgba(47, 12, 23, 0.92), rgba(90, 25, 39, 0.86));
  box-shadow: 0 0 14px rgba(255, 95, 109, 0.24);
}

.overlay-shell.experience-comeback .experience-banner {
  border-color: rgba(141, 245, 190, 0.72);
  color: #edfff5;
  background: linear-gradient(90deg, rgba(8, 39, 27, 0.92), rgba(20, 76, 52, 0.86));
  box-shadow: 0 0 14px rgba(141, 245, 190, 0.24);
}

.overlay-shell.smart-event-underdog-boost .smart-event-banner {
  border-color: rgba(126, 231, 255, 0.72);
  color: #e8fbff;
  background: linear-gradient(90deg, rgba(6, 32, 44, 0.92), rgba(19, 64, 81, 0.86));
  box-shadow: 0 0 16px rgba(126, 231, 255, 0.3);
}

.overlay-shell.smart-event-final-push .smart-event-banner,
.overlay-shell.smart-event-freeze-frame .smart-event-banner {
  border-color: rgba(255, 141, 152, 0.74);
  color: #ffe8eb;
  background: linear-gradient(90deg, rgba(47, 12, 23, 0.92), rgba(90, 25, 39, 0.86));
  box-shadow: 0 0 16px rgba(255, 95, 109, 0.28);
}

.overlay-shell.smart-event-momentum-swing .smart-event-banner {
  border-color: rgba(141, 245, 190, 0.74);
  color: #edfff5;
  background: linear-gradient(90deg, rgba(8, 39, 27, 0.92), rgba(20, 76, 52, 0.86));
  box-shadow: 0 0 16px rgba(141, 245, 190, 0.28);
}

.scoreboard {
  display: grid;
  grid-template-columns: minmax(120px, 0.95fr) minmax(310px, 1.75fr) minmax(120px, 0.95fr);
  gap: 5px;
  align-items: end;
}

.team-panel,
.match-status {
  min-width: 0;
  background: transparent;
}

.team-panel {
  position: relative;
  min-height: 49px;
  padding: 6px 14px 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  backdrop-filter: blur(2px);
}

.team-panel--blue {
  text-align: left;
  border-color: rgba(47, 128, 255, 0.58);
  background: linear-gradient(90deg, rgba(20, 92, 215, 0.34), rgba(47, 128, 255, 0.08) 72%, transparent);
  box-shadow: inset 12px 0 20px rgba(47, 128, 255, 0.12);
}

.team-panel--red {
  text-align: right;
  border-color: rgba(255, 75, 75, 0.58);
  background: linear-gradient(270deg, rgba(211, 43, 58, 0.34), rgba(255, 75, 75, 0.08) 72%, transparent);
  box-shadow: inset -12px 0 20px rgba(255, 75, 75, 0.12);
}

.team-panel::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 5px;
  border-radius: 999px;
  box-shadow: 0 0 7px currentColor;
}

.team-panel--blue::before {
  left: -1px;
  color: var(--blue);
  background: var(--blue);
}

.team-panel--red::before {
  right: -1px;
  color: var(--red);
  background: var(--red);
}

body[data-winner="blue"] .team-panel--blue strong,
body[data-winner="red"] .team-panel--red strong {
  animation: winner-pop 900ms ease-in-out infinite alternate;
}

body[data-leader="blue"] .team-panel--blue,
body[data-tug="blue"] .team-panel--blue,
body[data-lead-change="blue"] .team-panel--blue {
  border-color: rgba(114, 180, 255, 0.95);
  box-shadow:
    inset 16px 0 24px rgba(47, 128, 255, 0.22),
    0 0 14px rgba(47, 128, 255, 0.32);
}

body[data-leader="red"] .team-panel--red,
body[data-tug="red"] .team-panel--red,
body[data-lead-change="red"] .team-panel--red {
  border-color: rgba(255, 132, 132, 0.95);
  box-shadow:
    inset -16px 0 24px rgba(255, 75, 75, 0.22),
    0 0 14px rgba(255, 75, 75, 0.32);
}

body[data-tug="blue"] .team-panel--blue,
body[data-tug="red"] .team-panel--red {
  animation: team-tug-pulse 560ms ease-out;
}

body[data-lead-change="blue"] .team-panel--blue,
body[data-lead-change="red"] .team-panel--red {
  animation: lead-takeover 760ms ease-out;
}

body[data-winner="blue"] .team-panel--blue::before,
body[data-winner="red"] .team-panel--red::before {
  box-shadow:
    0 0 9px currentColor,
    0 0 18px currentColor;
}

.team-label,
.match-status span:last-child {
  display: block;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 900;
  line-height: 0.92;
  text-shadow:
    0 1px 2px var(--stroke),
    0 0 7px var(--stroke),
    0 0 12px var(--soft-stroke);
  text-transform: uppercase;
  overflow: visible;
  white-space: nowrap;
}

.team-panel--blue .team-label {
  color: #a9d2ff;
}

.team-panel--red .team-label {
  color: #ffb4b4;
}

.team-label[hidden] {
  display: none;
}

.team-label[data-size="small"] {
  font-size: 0.76rem;
}

.team-label[data-size="tiny"] {
  font-size: 0.6rem;
  line-height: 0.88;
}

.team-panel strong {
  display: block;
  margin-top: 3px;
  max-width: 100%;
  overflow: visible;
  font-size: 2.05rem;
  font-weight: 1000;
  line-height: 0.84;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow:
    0 2px 0 var(--stroke),
    0 0 10px var(--stroke),
    0 0 18px var(--soft-stroke);
}

.team-panel--blue strong {
  color: #eef7ff;
  filter: drop-shadow(0 0 5px rgba(47, 128, 255, 0.62));
}

.team-panel--red strong {
  color: #fff2f2;
  filter: drop-shadow(0 0 5px rgba(255, 75, 75, 0.62));
}

.team-panel strong[data-size="large"] {
  font-size: 1.66rem;
}

.team-panel strong[data-size="huge"] {
  font-size: 1.36rem;
}

.match-status {
  display: grid;
  grid-template-rows: 31px 12px;
  place-items: center;
  gap: 1px;
  padding-bottom: 0;
  text-align: center;
}

#lead-text {
  max-width: 100%;
  font-size: clamp(1.08rem, 3.6vw, 1.48rem);
  font-weight: 1000;
  line-height: 1;
  overflow: visible;
  white-space: nowrap;
  text-shadow:
    0 2px 0 var(--stroke),
    0 0 10px var(--stroke),
    0 0 18px var(--soft-stroke);
}

#lead-text[data-size="small"] {
  font-size: clamp(0.88rem, 3vw, 1.12rem);
}

#lead-text[data-size="tiny"] {
  font-size: clamp(0.72rem, 2.45vw, 0.92rem);
}

#goal-text {
  display: block;
  max-width: 100%;
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#goal-text[hidden] {
  display: block;
  visibility: hidden;
}

.rope-stage {
  position: relative;
  height: 43px;
  margin-top: -1px;
  overflow: visible;
  animation: none;
  transform-origin: center;
  will-change: transform;
}

.rope {
  position: absolute;
  top: 20px;
  left: 1%;
  right: 1%;
  height: 9px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      115deg,
      #76552d 0 9px,
      #d2a65d 9px 18px,
      #5f4120 18px 27px
    );
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.34),
    0 2px 0 rgba(0, 0, 0, 0.75),
    0 0 9px rgba(0, 0, 0, 0.62);
  animation: none;
  will-change: transform, background-position;
}

.rope::before,
.rope::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 19px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  transform: translateY(-50%);
}

.rope::before {
  left: -4px;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue);
}

.rope::after {
  right: -4px;
  background: var(--red);
  box-shadow: 0 0 12px var(--red);
}

body[data-tug="blue"] .rope-stage {
  animation: tug-blue 600ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

body[data-tug="red"] .rope-stage {
  animation: tug-red 600ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.center-marker,
.goal-marker {
  position: absolute;
  top: 8px;
  width: 2px;
  height: 33px;
  border-radius: 999px;
}

.center-marker {
  left: 50%;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.8);
}

.goal-marker--blue {
  left: 1%;
  background: var(--blue);
  box-shadow: 0 0 7px var(--blue);
}

.goal-marker--red {
  right: 1%;
  background: var(--red);
  box-shadow: 0 0 7px var(--red);
}

.flag {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 58px;
  transform: translateX(-50%);
  transition: left 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: left;
  z-index: 2;
}

.flag-motion {
  position: absolute;
  inset: 0;
  transform: translateX(0);
  will-change: transform;
}

body[data-tug="blue"] .flag-motion {
  animation: flag-tug-blue 600ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

body[data-tug="red"] .flag-motion {
  animation: flag-tug-red 600ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.flag-pole {
  position: absolute;
  left: 10px;
  top: 0;
  width: 5px;
  height: 58px;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.7),
    0 0 9px rgba(0, 0, 0, 0.7);
}

.flag-cloth {
  position: absolute;
  top: 4px;
  left: 15px;
  width: 40px;
  height: 25px;
  border-radius: 2px 5px 5px 2px;
  background: linear-gradient(90deg, #fff7cc, var(--gold));
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.62),
    0 0 10px rgba(0, 0, 0, 0.52);
  transform-origin: left center;
  animation: none;
  will-change: transform, clip-path;
}

.flag-cloth {
  animation: none;
}

.flag[data-edge="red"] .flag-cloth {
  right: 14px;
  left: auto;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  transform-origin: right center;
}

.flag[data-edge="blue"] .flag-cloth {
  right: auto;
  left: 15px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform-origin: left center;
}

.flag[data-edge="blue"] .flag-cloth,
.flag[data-edge="red"] .flag-cloth {
  animation: none;
}

.winner-message {
  min-height: 17px;
  margin: -5px 0 0;
  font-size: 1.08rem;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 2px 0 var(--stroke),
    0 0 9px var(--stroke);
}

.winner-message[data-winner="blue"] {
  color: #9fcdff;
}

.winner-message[data-winner="red"] {
  color: #ffb0b0;
}

.pull-toast {
  position: absolute;
  left: 50%;
  bottom: -6px;
  z-index: 9;
  max-width: min(560px, calc(100vw - 24px));
  padding: 6px 12px;
  border: 1px solid rgba(248, 251, 255, 0.22);
  border-radius: 999px;
  color: #f8fbff;
  background: rgba(10, 14, 24, 0.82);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 14px rgba(126, 231, 255, 0.18);
  font-size: 0.86rem;
  font-weight: 950;
  text-align: center;
  text-shadow: 0 1px 2px var(--stroke);
  transform: translate(-50%, 6px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pull-toast[hidden] {
  display: none;
}

.pull-toast--show {
  animation: pull-toast-pop 2600ms ease-out forwards;
}

.victory-burst {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: visible;
  pointer-events: none;
}

.victory-burst i {
  --x: 0px;
  --y: -25px;
  position: absolute;
  top: 48%;
  left: 50%;
  width: 6px;
  height: 11px;
  border-radius: 2px;
  opacity: 0;
}

body[data-winner="blue"] .victory-burst i {
  background: #65aaff;
}

body[data-winner="red"] .victory-burst i {
  background: #ff6f79;
}

body[data-victory-confetti="true"][data-winner] .victory-burst i {
  animation: victory-confetti 1.15s ease-out both;
}

.event-effects {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: visible;
  pointer-events: none;
}

.particle-effect {
  position: absolute;
  inset: 0;
}

.particle-effect i {
  --particle-x: 90px;
  --particle-y: -75px;
  position: absolute;
  top: 52%;
  left: 50%;
  width: 6px;
  height: 11px;
  border-radius: 2px;
  background: var(--gold);
  opacity: 0;
  animation: rule-particle var(--effect-duration, 900ms) ease-out both;
}

.particle-effect[data-team="blue"] i { background: #66b0ff; }
.particle-effect[data-team="red"] i { background: #ff7883; }
.particle-effect[data-intensity="low"] { transform: scale(0.72); }
.particle-effect[data-intensity="high"] { transform: scale(1.28); }
.particle-effect--sparkles i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.particle-effect i:nth-child(3n + 1) { --particle-x: -180px; --particle-y: -70px; animation-delay: 30ms; }
.particle-effect i:nth-child(3n + 2) { --particle-x: 180px; --particle-y: -42px; animation-delay: 90ms; }
.particle-effect i:nth-child(4n) { --particle-x: -70px; --particle-y: 28px; animation-delay: 150ms; }
.particle-effect i:nth-child(5n) { --particle-x: 70px; --particle-y: 22px; animation-delay: 60ms; }

.effect-glow { animation: effect-glow var(--effect-duration, 650ms) ease-out; }
.effect-pulse { animation: effect-pulse var(--effect-duration, 700ms) ease-out; }
.effect-rope-tug[data-effect-team="blue"] { animation: tug-blue var(--effect-duration, 650ms) ease-out; }
.effect-rope-tug[data-effect-team="red"] { animation: tug-red var(--effect-duration, 650ms) ease-out; }
.effect-rope-bounce { animation: effect-rope-bounce var(--effect-duration, 700ms) ease-out; }
.effect-flag-bounce { animation: effect-flag-bounce var(--effect-duration, 700ms) ease-out; }
.effect-winner-banner { animation: effect-winner-banner var(--effect-duration, 900ms) ease-out; }

[data-effect-intensity="low"] { --effect-brightness: 1.25; --effect-pulse-size: 1.03; --effect-bounce-height: -5px; }
[data-effect-intensity="medium"] { --effect-brightness: 1.5; --effect-pulse-size: 1.055; --effect-bounce-height: -8px; }
[data-effect-intensity="high"] { --effect-brightness: 1.8; --effect-pulse-size: 1.085; --effect-bounce-height: -12px; }

.victory-burst i:nth-child(1) { --x: -210px; --y: -38px; }
.victory-burst i:nth-child(2) { --x: -170px; --y: 18px; animation-delay: 80ms; }
.victory-burst i:nth-child(3) { --x: -125px; --y: -52px; animation-delay: 140ms; }
.victory-burst i:nth-child(4) { --x: -76px; --y: 30px; animation-delay: 40ms; }
.victory-burst i:nth-child(5) { --x: -34px; --y: -44px; animation-delay: 180ms; }
.victory-burst i:nth-child(6) { --x: -10px; --y: 26px; animation-delay: 100ms; }
.victory-burst i:nth-child(7) { --x: 32px; --y: -42px; animation-delay: 60ms; }
.victory-burst i:nth-child(8) { --x: 74px; --y: 28px; animation-delay: 160ms; }
.victory-burst i:nth-child(9) { --x: 118px; --y: -50px; animation-delay: 20ms; }
.victory-burst i:nth-child(10) { --x: 158px; --y: 20px; animation-delay: 120ms; }
.victory-burst i:nth-child(11) { --x: 198px; --y: -36px; animation-delay: 70ms; }
.victory-burst i:nth-child(12) { --x: 225px; --y: 12px; animation-delay: 190ms; }

@keyframes winner-pop {
  from {
    transform: scale(1);
    filter: brightness(1);
  }

  to {
    transform: scale(1.07);
    filter: brightness(1.2);
  }
}

@keyframes pull-toast-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.96);
  }
  12%, 78% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -4px) scale(0.98);
  }
}

@keyframes flag-wave {
  0%, 100% { transform: rotate(-.7deg) skewY(-1.2deg) scaleX(.985); }
  50% { transform: rotate(.8deg) skewY(1.4deg) scaleX(1.018); }
}

@keyframes flag-tug-blue {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(var(--tug-blue-distance)); }
  58% { transform: translateX(3px); }
}

@keyframes flag-tug-red {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(var(--tug-distance)); }
  58% { transform: translateX(-3px); }
}

@keyframes tug-blue {
  0%, 100% { transform: translateX(0); }
  24% { transform: translateX(var(--tug-blue-distance)) rotate(-0.35deg); }
  52% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes tug-red {
  0%, 100% { transform: translateX(0); }
  24% { transform: translateX(var(--tug-distance)) rotate(0.35deg); }
  52% { transform: translateX(-4px); }
  75% { transform: translateX(2px); }
}

@keyframes effect-glow {
  0%, 100% { filter: brightness(1); }
  42% { filter: brightness(var(--effect-brightness, 1.5)); box-shadow: 0 0 24px currentColor; }
}

@keyframes effect-pulse {
  0%, 100% { transform: scale(1); }
  38% { transform: scale(var(--effect-pulse-size, 1.055)); }
}

@keyframes effect-rope-bounce {
  0%, 100% { transform: scaleX(1) translateY(0); }
  35% { transform: scaleX(var(--effect-pulse-size, 1.025)) translateY(-3px); }
  65% { transform: scaleX(0.99) translateY(1px); }
}

@keyframes effect-flag-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  35% { transform: translateX(-50%) translateY(var(--effect-bounce-height, -8px)); }
  65% { transform: translateX(-50%) translateY(2px); }
}

@keyframes effect-winner-banner {
  0% { opacity: 0; transform: scale(0.72); }
  45% { opacity: 1; transform: scale(var(--effect-pulse-size, 1.12)); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes rule-particle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), var(--particle-y)) rotate(260deg); }
}

body[data-animation-intensity="off"] *,
body[data-animation-intensity="off"] *::before,
body[data-animation-intensity="off"] *::after {
  animation: none !important;
}

@keyframes team-tug-pulse {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.035); }
}

@keyframes lead-takeover {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.42); }
}

@keyframes victory-confetti {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.6); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(280deg) scale(1); }
}

@media (max-width: 520px) {
  body {
    padding: 2px 5px;
  }

  .overlay-shell {
    width: calc(100vw - 10px);
    padding-inline: 4px;
  }

  .scoreboard {
    grid-template-columns: minmax(76px, 0.82fr) minmax(216px, 1.62fr) minmax(76px, 0.82fr);
    gap: 2px;
  }

  .team-panel {
    padding-inline: 9px;
  }

  .team-panel strong {
    font-size: 1.54rem;
  }

  .team-panel strong[data-size="large"] {
    font-size: 1.22rem;
  }

  .team-panel strong[data-size="huge"] {
    font-size: 1rem;
  }

  .team-label {
    font-size: 0.84rem;
  }

  .team-label[data-size="small"] {
    font-size: 0.64rem;
  }

  .team-label[data-size="tiny"] {
    font-size: 0.52rem;
  }

  #lead-text {
    font-size: clamp(0.82rem, 4.7vw, 1.04rem);
  }

  #lead-text[data-size="small"] {
    font-size: clamp(0.68rem, 3.8vw, 0.84rem);
  }

  #lead-text[data-size="tiny"] {
    font-size: clamp(0.56rem, 3.2vw, 0.72rem);
  }

  .match-status span:last-child {
    font-size: 0.58rem;
  }

  .rope-stage {
    height: 42px;
  }

  .rope {
    top: 20px;
  }

  .flag {
    top: 0;
  }
}

/* Final center-linked Experience hierarchy: scoreboard, one compact badge,
   then rope. Temporary Experiences replace the Base badge while active. */
.scoreboard { position: relative; z-index: 8; }
.match-status { position: relative; overflow: hidden; }
.match-status:has(.pull-toast:not([hidden])) > span { opacity: 0 !important; }

.match-status .pull-toast,
.match-status .pull-toast.pull-toast--above {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4;
  display: grid;
  place-content: center;
  gap: 2px;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 100%;
  margin: 0 !important;
  padding: 4px 8px !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  opacity: 1;
  transform: none !important;
}

.match-status .pull-toast[hidden] { display: none !important; }
.match-status .pull-toast.pull-toast--show { animation: center-toast-enter 2800ms ease-out forwards !important; }
.match-status .pull-toast strong {
  display: flex !important;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  font-size: clamp(.88rem, 2.15vw, 1.15rem) !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.pull-toast-username { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.pull-toast-points { flex: 0 0 auto; font-size: 1.08em; font-weight: 1000; }
.pull-toast-team { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72em; }
.match-status .pull-toast small {
  display: block !important;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(.5rem, 1.2vw, .62rem) !important;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-stack,
.streamer-hud-body[data-hud-size="small"] .mode-stack {
  position: relative !important;
  top: auto !important;
  z-index: 7;
  display: flex !important;
  min-height: 22px !important;
  margin: 2px 0 1px !important;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mode-stack .smart-event-banner,
.mode-stack .experience-banner,
body[data-overlay-text-size] .overlay-shell.has-smart-event .smart-event-banner:not([hidden]),
body[data-overlay-text-size] .overlay-shell.has-experience-mode .experience-banner:not([hidden]) {
  display: inline-grid !important;
  grid-template-columns: auto auto auto !important;
  align-items: center;
  justify-content: center;
  gap: 5px !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(360px, 52vw) !important;
  min-height: 18px !important;
  padding: 2px 8px !important;
  overflow: visible !important;
  border-radius: 7px !important;
  white-space: nowrap;
}

.mode-stack .experience-banner {
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.86) !important;
  background: rgba(3,8,14,.56) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.24) !important;
}

.mode-stack .smart-event-banner {
  border-color: color-mix(in srgb, currentColor 46%, transparent) !important;
  color: #ffd86f !important;
  background: rgba(3,8,14,.82) !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.4), 0 0 7px color-mix(in srgb, currentColor 20%, transparent) !important;
}

.mode-stack .smart-event-banner[data-experience-id="comeback"] { color: #75f0a8 !important; }
.mode-stack .smart-event-banner[data-experience-id="reversePull"] { color: #75d9ff !important; }
.mode-stack .smart-event-banner[data-experience-id="tugFrenzy"] { color: #ffad62 !important; }
.mode-stack .smart-event-banner[data-experience-id="chaosHour"] { color: #c59aff !important; }
.mode-stack .smart-event-banner[data-experience-id="suddenDeath"] { color: #ff758e !important; }

.mode-stack .experience-icon,
body[data-overlay-text-size] .mode-stack .experience-icon {
  display: inline-grid !important;
  place-items: center;
  min-width: 13px !important;
  color: currentColor !important;
  font-size: .68rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.mode-stack .smart-event-banner span:not(.experience-icon),
.mode-stack .experience-banner span:not(.experience-icon),
body[data-overlay-text-size] .mode-stack .smart-event-banner span:not(.experience-icon),
body[data-overlay-text-size] .mode-stack .experience-banner span:not(.experience-icon) {
  display: block !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  color: #fff !important;
  font-size: .61rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.mode-stack .smart-event-banner strong,
.mode-stack .experience-banner strong,
body[data-overlay-text-size] .mode-stack .smart-event-banner strong,
body[data-overlay-text-size] .mode-stack .experience-banner strong {
  display: block !important;
  min-width: 0;
  max-width: none !important;
  overflow: visible !important;
  color: currentColor !important;
  font-size: .53rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .035em;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.mode-stack .smart-event-banner.is-activating {
  min-height: 22px !important;
  padding: 3px 10px !important;
  animation: experience-activate .9s cubic-bezier(.16,1,.3,1) both !important;
}

.overlay-shell.smart-event-ending .smart-event-banner { animation: experience-fade-out .7s ease forwards !important; }
.overlay-shell.smart-event-ending .experience-banner { opacity: 0 !important; }

@keyframes center-toast-enter {
  0% { opacity: 0; transform: translateY(4px) scale(.96); }
  10%, 84% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-2px); }
}
@keyframes experience-activate {
  0% { opacity: 0; transform: translateY(3px) scale(.96); }
  30%, 88% { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}
@keyframes experience-fade-out { to { opacity: 0; transform: translateY(2px); } }

@media (max-width: 620px) {
  .mode-stack .experience-banner strong { display: none !important; }
  .mode-stack .smart-event-banner:not(.is-activating) .experience-icon { display: none !important; }
  .mode-stack .smart-event-banner,
  .mode-stack .experience-banner { max-width: min(250px, 64vw) !important; padding-inline: 6px !important; }
}

@media (max-width: 420px) {
  .mode-stack .smart-event-banner.is-activating strong { display: none !important; }
  .mode-stack .experience-icon { display: none !important; }
  .match-status .pull-toast small { display: none !important; }
}

/* Advanced appearance controls. All color remains contained to the selected
   panel surfaces, their thin accent rules, and the rope. */
.overlay-shell {
  isolation: isolate;
}

.overlay-shell::before {
  content: none !important;
  position: absolute;
  z-index: -1;
  inset: -8px -10px;
  border-radius: 22px;
  pointer-events: none;
}

body[data-overlay-backdrop="subtle"] .overlay-shell::before {
  content: "" !important;
  background: rgba(0, 0, 0, 0.22) !important;
}

body[data-overlay-backdrop="custom"] .overlay-shell::before {
  content: "" !important;
  background: var(--overlay-backdrop-background) !important;
}

body[data-left-panel-style="off"] .team-panel--blue,
body[data-right-panel-style="off"] .team-panel--red,
body[data-center-panel-style="off"] .match-status,
body[data-center-panel-style="off"] .pull-toast {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body:not([data-left-panel-style="off"]) .team-panel--blue {
  background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 48%), var(--left-panel-background) !important;
}

body:not([data-right-panel-style="off"]) .team-panel--red {
  background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 48%), var(--right-panel-background) !important;
}

body:not([data-center-panel-style="off"]) .match-status,
body:not([data-center-panel-style="off"]) .pull-toast {
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 48%), var(--center-panel-background) !important;
}

body[data-left-panel-style="solid"] .team-panel--blue,
body[data-left-panel-style="custom"] .team-panel--blue,
body[data-right-panel-style="solid"] .team-panel--red,
body[data-right-panel-style="custom"] .team-panel--red,
body[data-center-panel-style="solid"] .match-status,
body[data-center-panel-style="custom"] .match-status,
body[data-center-panel-style="solid"] .pull-toast,
body[data-center-panel-style="custom"] .pull-toast {
  border-color: rgba(255,255,255,.17) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 7px 16px rgba(0,0,0,.48) !important;
}

body[data-match-left-accent="true"] .team-panel--blue::before {
  color: var(--left-panel-accent) !important;
  background: linear-gradient(90deg, var(--left-panel-accent), transparent) !important;
}

body[data-match-right-accent="true"] .team-panel--red::before {
  color: var(--right-panel-accent) !important;
  background: linear-gradient(270deg, var(--right-panel-accent), transparent) !important;
}

body[data-match-left-accent="false"] .team-panel--blue::before,
body[data-match-right-accent="false"] .team-panel--red::before {
  opacity: 0 !important;
}

.team-panel--blue,
.team-panel--blue .team-label,
.team-panel--blue strong {
  color: var(--left-text-color, #fff) !important;
}

.team-panel--red,
.team-panel--red .team-label,
.team-panel--red strong {
  color: var(--right-text-color, #fff) !important;
}

.match-status,
.match-status strong,
.winner-message,
.pull-toast,
.pull-toast strong,
.smart-event-banner strong,
.experience-banner strong {
  color: var(--center-text-color, #fff) !important;
}

.match-status span:last-child,
.pull-toast small,
.smart-event-banner span,
.experience-banner span {
  color: var(--secondary-text-color, #e6edf5) !important;
}

.team-panel,
.team-panel strong,
.team-label,
.match-status,
.match-status strong,
.match-status span,
.winner-message,
.pull-toast,
.pull-toast strong,
.pull-toast small,
.smart-event-banner span,
.smart-event-banner strong,
.experience-banner span,
.experience-banner strong {
  text-shadow: var(--appearance-text-effects, 0 2px 4px rgba(0,0,0,.78)) !important;
}

/* Neon is deliberately restrained to rope hardware; it never creates a HUD wash. */
body[data-appearance-preset="neon"] .rope-stage .rope {
  filter: saturate(1.12) brightness(1.05);
}

/* Premium livestream overlay skin. This section intentionally reuses the
   existing IDs/classes so gameplay, APIs, and animation triggers stay intact. */
:root {
  --premium-blue: #25a7ff;
  --premium-blue-deep: #0b3dff;
  --premium-red: #ff385f;
  --premium-red-deep: #9b102f;
  --premium-gold: #ffd86f;
  --premium-green: #6cffb2;
  --glass: rgba(8, 12, 24, 0.58);
  --glass-strong: rgba(8, 12, 24, 0.82);
  --edge-light: rgba(255, 255, 255, 0.2);
}

body {
  padding: 8px 10px 0;
  background: transparent;
}

.overlay-shell {
  isolation: isolate;
  width: min(860px, calc(100vw - 20px));
  min-height: 146px;
  padding: 12px 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(90deg, rgba(37, 167, 255, 0.12), rgba(8, 12, 24, 0.72) 45%, rgba(255, 56, 95, 0.12));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.44);
}

.overlay-backplate {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.arena-glow {
  position: absolute;
  top: -42px;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  filter: blur(20px);
  opacity: 0.46;
}

.arena-glow--blue {
  left: -82px;
  background: radial-gradient(circle, rgba(37, 167, 255, 0.85), transparent 66%);
}

.arena-glow--red {
  right: -82px;
  background: radial-gradient(circle, rgba(255, 56, 95, 0.85), transparent 66%);
}

.arena-sheen {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, 0.12) 45%, transparent 55% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 40px);
  opacity: 0.7;
}

.mode-stack {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  margin: -2px 0 7px;
  pointer-events: none;
}

.smart-event-banner,
.experience-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  width: auto;
  max-width: min(390px, 48vw);
  margin: 0;
  padding: 7px 13px 7px 12px;
  border-radius: 999px;
  overflow: hidden;
  backdrop-filter: blur(8px) saturate(1.3);
  transform-origin: center;
  animation: mode-card-enter 420ms cubic-bezier(0.2, 0.95, 0.2, 1) both;
}

.smart-event-banner::before,
.experience-banner::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 60%);
}

.smart-event-banner::after,
.experience-banner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 9px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  transform: translateY(-50%);
}

.smart-event-banner span,
.experience-banner span {
  padding-left: 12px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.smart-event-banner strong,
.experience-banner strong {
  font-size: 0.86rem;
  line-height: 1.05;
}

.smart-event-banner[hidden],
.experience-banner[hidden] {
  display: none;
}

.smart-event-banner {
  border-color: rgba(255, 216, 111, 0.92);
  color: #fff1b8;
  background:
    radial-gradient(circle at 14% 50%, rgba(255, 216, 111, 0.34), transparent 38%),
    linear-gradient(90deg, rgba(50, 32, 5, 0.9), rgba(102, 57, 8, 0.78));
  box-shadow:
    0 0 22px rgba(255, 216, 111, 0.34),
    0 12px 28px rgba(0, 0, 0, 0.26);
}

.experience-banner {
  border-color: rgba(116, 224, 255, 0.82);
  color: #dff8ff;
  background:
    radial-gradient(circle at 12% 50%, rgba(116, 224, 255, 0.26), transparent 40%),
    linear-gradient(90deg, rgba(6, 29, 53, 0.9), rgba(13, 61, 98, 0.74));
  box-shadow:
    0 0 20px rgba(116, 224, 255, 0.26),
    0 12px 28px rgba(0, 0, 0, 0.24);
}

.overlay-shell.has-smart-event {
  filter: drop-shadow(0 0 18px rgba(255, 216, 111, 0.2));
}

.overlay-shell.has-experience-mode {
  filter: drop-shadow(0 0 16px rgba(116, 224, 255, 0.18));
}

.overlay-shell.has-smart-event.has-experience-mode {
  filter:
    drop-shadow(0 0 16px rgba(255, 216, 111, 0.16))
    drop-shadow(0 0 14px rgba(116, 224, 255, 0.16));
}

.scoreboard {
  grid-template-columns: minmax(148px, 1fr) minmax(270px, 1.28fr) minmax(148px, 1fr);
  gap: 10px;
  align-items: stretch;
}

.team-panel {
  min-height: 78px;
  padding: 11px 16px 10px 58px;
  border-radius: 16px;
  background: var(--glass);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 12px 24px rgba(0, 0, 0, 0.18);
}

.team-panel::before {
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0;
}

.team-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 42%),
    radial-gradient(circle at 18% 50%, rgba(255, 255, 255, 0.16), transparent 34%);
  opacity: 0.75;
  pointer-events: none;
}

.team-panel--blue {
  border-color: rgba(69, 180, 255, 0.54);
  background:
    linear-gradient(90deg, rgba(16, 62, 154, 0.86), rgba(13, 23, 45, 0.72) 70%),
    var(--glass);
  box-shadow:
    inset 15px 0 32px rgba(37, 167, 255, 0.2),
    0 14px 26px rgba(0, 0, 0, 0.22);
}

.team-panel--red {
  padding-right: 58px;
  padding-left: 16px;
  border-color: rgba(255, 90, 121, 0.56);
  background:
    linear-gradient(270deg, rgba(148, 20, 50, 0.86), rgba(30, 14, 30, 0.72) 70%),
    var(--glass);
  box-shadow:
    inset -15px 0 32px rgba(255, 56, 95, 0.2),
    0 14px 26px rgba(0, 0, 0, 0.22);
}

.team-emblem {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  transform: translateY(-50%);
}

.team-panel--blue .team-emblem {
  left: 15px;
  background:
    radial-gradient(circle at 35% 30%, #aee6ff, var(--premium-blue) 45%, var(--premium-blue-deep));
  box-shadow: 0 0 20px rgba(37, 167, 255, 0.5);
}

.team-panel--red .team-emblem {
  right: 15px;
  background:
    radial-gradient(circle at 35% 30%, #ffd1d9, var(--premium-red) 45%, var(--premium-red-deep));
  box-shadow: 0 0 20px rgba(255, 56, 95, 0.5);
}

.team-label,
.match-status span:last-child {
  position: relative;
  z-index: 1;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  line-height: 1;
}

.team-panel strong {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-size: 2.24rem;
  line-height: 0.84;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.78),
    0 0 16px rgba(0, 0, 0, 0.88);
}

.team-panel strong[data-size="large"] {
  font-size: 1.78rem;
}

.team-panel strong[data-size="huge"] {
  font-size: 1.45rem;
}

body[data-leader="blue"] .team-panel--blue,
body[data-tug="blue"] .team-panel--blue,
body[data-lead-change="blue"] .team-panel--blue {
  border-color: rgba(137, 219, 255, 0.98);
  box-shadow:
    inset 20px 0 36px rgba(37, 167, 255, 0.34),
    0 0 28px rgba(37, 167, 255, 0.34),
    0 14px 26px rgba(0, 0, 0, 0.24);
}

body[data-leader="red"] .team-panel--red,
body[data-tug="red"] .team-panel--red,
body[data-lead-change="red"] .team-panel--red {
  border-color: rgba(255, 146, 164, 0.98);
  box-shadow:
    inset -20px 0 36px rgba(255, 56, 95, 0.34),
    0 0 28px rgba(255, 56, 95, 0.34),
    0 14px 26px rgba(0, 0, 0, 0.24);
}

.match-status {
  display: grid;
  grid-template-rows: auto minmax(28px, auto) auto;
  place-items: center;
  min-height: 78px;
  padding: 8px 18px 9px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% -50%, rgba(255, 216, 111, 0.22), transparent 56%),
    linear-gradient(180deg, rgba(10, 16, 31, 0.9), rgba(7, 10, 19, 0.66));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 16px 28px rgba(0, 0, 0, 0.22);
}

.battle-kicker {
  display: block;
  color: rgba(255, 216, 111, 0.92);
  font-size: 0.64rem;
  font-weight: 1000;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

#lead-text {
  margin-top: 2px;
  color: #ffffff;
  font-size: clamp(1.15rem, 2.8vw, 1.72rem);
  letter-spacing: 0;
  white-space: normal;
  line-height: 1.05;
}

#goal-text {
  max-width: 100%;
  margin-top: 1px;
  color: rgba(248, 251, 255, 0.72);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.rope-stage {
  height: 54px;
  margin-top: 8px;
}

.rope-stage__track {
  position: absolute;
  top: 20px;
  left: 1.5%;
  right: 1.5%;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(37, 167, 255, 0.24), rgba(255, 255, 255, 0.08) 50%, rgba(255, 56, 95, 0.24)),
    rgba(0, 0, 0, 0.24);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.58),
    0 0 20px rgba(0, 0, 0, 0.28);
}

.milestone {
  position: absolute;
  top: 17px;
  z-index: 1;
  width: 8px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
}

.milestone--blue {
  background: linear-gradient(180deg, rgba(148, 226, 255, 0.8), rgba(37, 167, 255, 0.28));
}

.milestone--red {
  background: linear-gradient(180deg, rgba(255, 178, 192, 0.8), rgba(255, 56, 95, 0.28));
}

.milestone--far.milestone--blue { left: 13%; }
.milestone--near.milestone--blue { left: 31%; }
.milestone--near.milestone--red { right: 31%; }
.milestone--far.milestone--red { right: 13%; }

.center-marker,
.goal-marker {
  top: 13px;
  z-index: 2;
  width: 3px;
  height: 34px;
}

.center-marker {
  width: 4px;
  background: #ffffff;
  box-shadow:
    0 0 9px rgba(255, 255, 255, 0.7),
    0 0 18px rgba(255, 216, 111, 0.36);
}

.goal-marker--blue,
.goal-marker--red {
  width: 5px;
  height: 38px;
}

.rope {
  top: 26px;
  left: 2.2%;
  right: 2.2%;
  z-index: 3;
  height: 12px;
  border: 1px solid rgba(255, 237, 194, 0.3);
  background:
    repeating-linear-gradient(116deg, #5c3617 0 8px, #e7ba68 8px 16px, #7b4c22 16px 24px),
    linear-gradient(180deg, #f6cf7b, #6a421f);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.38),
    inset 0 -2px 2px rgba(0, 0, 0, 0.42),
    0 4px 0 rgba(0, 0, 0, 0.62),
    0 0 22px rgba(255, 216, 111, 0.14);
}

.rope::before,
.rope::after {
  top: 50%;
  width: 24px;
  height: 20px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.46);
  border-radius: 7px;
}

.rope::before {
  left: -8px;
  background: linear-gradient(135deg, #a7e6ff, var(--premium-blue));
}

.rope::after {
  right: -8px;
  background: linear-gradient(135deg, #ffc4d0, var(--premium-red));
}

.flag {
  top: -2px;
  z-index: 5;
  width: 32px;
  height: 66px;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.55));
  transition:
    left 520ms cubic-bezier(0.18, 0.95, 0.2, 1),
    filter 220ms ease;
}

.flag-pole {
  left: 13px;
  width: 6px;
  height: 66px;
  background: linear-gradient(90deg, #d9e7f7, #ffffff 48%, #8ba2bd);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.68),
    0 0 13px rgba(255, 255, 255, 0.34);
}

.flag-cloth {
  top: 5px;
  left: 19px;
  width: 48px;
  height: 31px;
  border-radius: 4px 8px 8px 4px;
  background:
    linear-gradient(135deg, #fff8d0, var(--premium-gold) 54%, #ffad42),
    linear-gradient(90deg, #fff, var(--premium-gold));
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.6),
    0 0 16px rgba(255, 216, 111, 0.42);
}

body[data-tug="blue"] .flag,
body[data-tug="red"] .flag {
  filter:
    drop-shadow(0 7px 8px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 13px rgba(255, 216, 111, 0.38));
}

.winner-message {
  position: relative;
  z-index: 6;
  min-height: 23px;
  margin: 2px 0 -4px;
  font-size: clamp(1rem, 2.6vw, 1.42rem);
  letter-spacing: 0.02em;
}

body[data-winner] .winner-message {
  animation: winner-banner-slam 720ms cubic-bezier(0.2, 1.15, 0.2, 1) both;
}

body[data-winner] .overlay-shell {
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.36),
    0 0 42px rgba(255, 216, 111, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.pull-toast {
  bottom: 3px;
  z-index: 10;
  max-width: min(660px, calc(100vw - 36px));
  padding: 8px 16px;
  border-color: rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 48%),
    rgba(6, 10, 20, 0.88);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(116, 224, 255, 0.2);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.pull-toast[data-effect-kind="boost"] {
  border-color: rgba(255, 216, 111, 0.64);
  color: #fff1b8;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(255, 216, 111, 0.34);
}

.pull-toast[data-effect-kind="reverse"] {
  border-color: rgba(255, 91, 121, 0.7);
  color: #ffe3e8;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(255, 56, 95, 0.3);
}

.pull-toast[data-effect-kind="final"] {
  border-color: rgba(108, 255, 178, 0.7);
  color: #e7fff2;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(108, 255, 178, 0.28);
}

body[data-winner] .pull-toast {
  bottom: -28px;
}

.pull-toast--show {
  animation: premium-pull-toast 2850ms cubic-bezier(0.18, 0.96, 0.22, 1) forwards;
}

.overlay-shell.experience-double-coins .experience-banner,
.overlay-shell.experience-tug-frenzy .experience-banner {
  border-color: rgba(255, 216, 111, 0.84);
  color: #fff2be;
}

.overlay-shell.experience-reverse-pull .experience-banner,
.overlay-shell.experience-chaos-hour .experience-banner {
  border-color: rgba(255, 91, 121, 0.88);
  color: #ffe3e8;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 91, 121, 0.28), transparent 40%),
    linear-gradient(90deg, rgba(68, 12, 29, 0.92), rgba(115, 19, 47, 0.74));
}

.overlay-shell.experience-comeback .experience-banner {
  border-color: rgba(108, 255, 178, 0.84);
  color: #e7fff2;
  background:
    radial-gradient(circle at 12% 50%, rgba(108, 255, 178, 0.26), transparent 40%),
    linear-gradient(90deg, rgba(7, 50, 33, 0.92), rgba(18, 94, 61, 0.74));
}

.overlay-shell.smart-event-double-pull .smart-event-banner::after,
.overlay-shell.smart-event-final-push .smart-event-banner::after {
  animation: live-dot 860ms ease-in-out infinite alternate;
}

.overlay-shell.smart-event-underdog-boost .smart-event-banner {
  border-color: rgba(108, 255, 178, 0.84);
  color: #e7fff2;
  background:
    radial-gradient(circle at 12% 50%, rgba(108, 255, 178, 0.26), transparent 40%),
    linear-gradient(90deg, rgba(7, 50, 33, 0.92), rgba(18, 94, 61, 0.74));
}

.overlay-shell.smart-event-final-push .smart-event-banner,
.overlay-shell.smart-event-freeze-frame .smart-event-banner {
  border-color: rgba(255, 91, 121, 0.88);
  color: #ffe3e8;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 91, 121, 0.3), transparent 40%),
    linear-gradient(90deg, rgba(68, 12, 29, 0.92), rgba(115, 19, 47, 0.74));
}

.overlay-shell.smart-event-momentum-swing .smart-event-banner {
  border-color: rgba(116, 224, 255, 0.84);
  color: #e1f9ff;
  background:
    radial-gradient(circle at 12% 50%, rgba(116, 224, 255, 0.3), transparent 40%),
    linear-gradient(90deg, rgba(7, 42, 63, 0.92), rgba(17, 83, 119, 0.74));
}

.victory-burst i {
  width: 8px;
  height: 14px;
  border-radius: 3px;
  box-shadow: 0 0 10px currentColor;
}

body[data-victory-confetti="true"][data-winner] .victory-burst i {
  animation: premium-victory-confetti 1.4s ease-out both;
}

.particle-effect i {
  width: 7px;
  height: 13px;
  box-shadow: 0 0 10px currentColor;
}

@keyframes mode-card-enter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes live-dot {
  from {
    transform: translateY(-50%) scale(0.85);
    opacity: 0.62;
  }
  to {
    transform: translateY(-50%) scale(1.25);
    opacity: 1;
  }
}

@keyframes premium-pull-toast {
  0% {
    opacity: 0;
    transform: translate(-50%, 14px) scale(0.92);
  }
  11% {
    opacity: 1;
    transform: translate(-50%, -2px) scale(1.04);
  }
  20%,
  78% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -12px) scale(0.98);
  }
}

@keyframes winner-banner-slam {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.86);
  }
  55% {
    opacity: 1;
    transform: translateY(-3px) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes premium-victory-confetti {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.48);
  }
  14% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) - 24px)) rotate(420deg) scale(1.06);
  }
}

@media (max-width: 700px) {
  body {
    padding: 6px 6px 0;
  }

  .overlay-shell {
    width: calc(100vw - 12px);
    min-height: 138px;
    padding: 10px 10px 16px;
    border-radius: 16px;
  }

  .mode-stack {
    min-height: 27px;
    gap: 5px;
    margin-bottom: 6px;
  }

  .smart-event-banner,
  .experience-banner {
    max-width: 48vw;
    padding: 6px 10px;
    gap: 6px;
  }

  .smart-event-banner span,
  .experience-banner span {
    display: none;
  }

  .smart-event-banner strong,
  .experience-banner strong {
    font-size: 0.72rem;
  }

  .scoreboard {
    grid-template-columns: minmax(86px, 0.9fr) minmax(142px, 1.2fr) minmax(86px, 0.9fr);
    gap: 5px;
  }

  .team-panel {
    min-height: 67px;
    padding: 9px 9px 8px 42px;
    border-radius: 12px;
  }

  .team-panel--red {
    padding-right: 42px;
    padding-left: 9px;
  }

  .team-emblem {
    width: 25px;
    height: 25px;
    font-size: 0.64rem;
  }

  .team-panel--blue .team-emblem {
    left: 10px;
  }

  .team-panel--red .team-emblem {
    right: 10px;
  }

  .team-label {
    font-size: 0.62rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .team-panel strong {
    margin-top: 7px;
    font-size: 1.46rem;
  }

  .team-panel strong[data-size="large"] {
    font-size: 1.16rem;
  }

  .team-panel strong[data-size="huge"] {
    font-size: 0.92rem;
  }

  .match-status {
    min-height: 67px;
    padding: 7px 8px 8px;
    border-radius: 13px;
  }

  .battle-kicker {
    font-size: 0.52rem;
    letter-spacing: 0.1em;
  }

  #lead-text {
    font-size: clamp(0.78rem, 4.5vw, 1.08rem);
    max-width: 100%;
    line-height: 1.05;
    white-space: normal;
  }

  #lead-text[data-size="small"] {
    font-size: clamp(0.66rem, 3.8vw, 0.88rem);
  }

  #lead-text[data-size="tiny"] {
    font-size: clamp(0.54rem, 3.2vw, 0.72rem);
  }

  #goal-text {
    font-size: 0.54rem;
  }

  .rope-stage {
    height: 48px;
    margin-top: 5px;
  }

  .rope-stage__track {
    top: 19px;
    height: 18px;
  }

  .rope {
    top: 25px;
    height: 10px;
  }

  .flag {
    width: 26px;
    height: 58px;
  }

  .flag-pole {
    left: 11px;
    height: 58px;
  }

  .flag-cloth {
    left: 17px;
    width: 39px;
    height: 26px;
  }

  .winner-message {
    min-height: 19px;
    font-size: clamp(0.82rem, 4.1vw, 1.1rem);
  }

  .pull-toast {
    bottom: 0;
    max-width: calc(100vw - 24px);
    padding: 7px 10px;
    font-size: 0.76rem;
  }
}

@media (max-width: 520px) {
  body {
    overflow: hidden;
    padding-inline: 4px !important;
    justify-content: flex-start !important;
  }

  .overlay-shell {
    position: fixed !important;
    top: 4px !important;
    left: 4px !important;
    width: 600px !important;
    max-width: 600px !important;
    min-width: 0 !important;
    overflow: visible;
    transform: scale(0.64) !important;
    transform-origin: top left !important;
  }

  .scoreboard {
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 31%) minmax(0, 38%) minmax(0, 31%) !important;
    gap: 2px !important;
    padding-inline: 2px !important;
    overflow: visible;
  }

  .team-panel {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 5px 5px 4px !important;
  }

  .team-panel--red {
    padding: 5px 5px 4px !important;
  }

  .team-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.6rem, 3vw, 0.72rem) !important;
  }

  .team-panel strong,
  .team-panel strong[data-size="large"],
  .team-panel strong[data-size="huge"] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.94rem, 4.25vw, 1.16rem) !important;
  }

  #lead-text,
  #lead-text[data-size="small"],
  #lead-text[data-size="tiny"] {
    font-size: clamp(0.78rem, 3.7vw, 0.96rem) !important;
  }

  .rope-stage {
    width: 100% !important;
    max-width: 100% !important;
    height: 45px !important;
    overflow: visible;
  }

  .rope-stage .rope {
    left: 4px !important;
    right: 4px !important;
    width: auto !important;
    max-width: none !important;
  }

  .pull-toast {
    max-width: calc(100vw - 72px) !important;
  }
}

/* Flagless territory tug battle. This final overlay layer keeps the compact HUD
   footprint and uses server-provided progress for the rope territory seam. */
.overlay-shell {
  --territory-position: 50%;
  --territory-seam-left: 50%;
  --event-countdown-deg: 360deg;
}

.battle-kicker,
.center-marker,
.goal-marker,
.team-emblem,
body[data-battle-marker-style="territory"] .flag {
  display: none !important;
}

body[data-battle-marker-style="flag"] .flag,
body[data-battle-marker-style="ring"] .flag {
  display: block !important;
}

.scoreboard {
  grid-template-columns: minmax(108px, 0.74fr) minmax(230px, 1.4fr) minmax(108px, 0.74fr);
  padding-inline: 28px;
}

.match-status {
  min-height: 32px;
  padding-top: 0;
}

#lead-text {
  margin-top: 0;
  font-size: clamp(0.88rem, 1.9vw, 1.08rem);
  opacity: 0.9;
}

.team-panel {
  min-height: 34px;
  padding: 3px 9px;
  padding-bottom: 3px;
}

.team-panel strong {
  margin-top: 2px;
  font-size: 1.08rem;
}

.team-panel strong[data-size="large"],
.team-panel strong[data-size="huge"] {
  font-size: 0.92rem;
}

.team-panel::before {
  bottom: -1px;
  width: 100%;
}

.team-panel--blue {
  background:
    linear-gradient(90deg, rgba(40, 184, 255, 0.2), rgba(40, 184, 255, 0.04) 68%, transparent);
}

.team-panel--red {
  padding-right: 9px;
  background:
    linear-gradient(270deg, rgba(255, 61, 100, 0.2), rgba(255, 61, 100, 0.04) 68%, transparent);
}

.rope-stage {
  height: 44px;
  margin-top: -8px;
}

.rope-stage__track {
  top: 17px;
  left: 5%;
  right: 5%;
  height: 18px;
  background:
    linear-gradient(
      90deg,
      rgba(40, 184, 255, 0.8) 0%,
      rgba(40, 184, 255, 0.42) calc(var(--territory-position) - 8%),
      rgba(245, 250, 255, 0.34) calc(var(--territory-position) - 1.2%),
      rgba(245, 250, 255, 0.52) var(--territory-position),
      rgba(255, 85, 130, 0.34) calc(var(--territory-position) + 1.2%),
      rgba(255, 61, 100, 0.42) calc(var(--territory-position) + 8%),
      rgba(255, 61, 100, 0.8) 100%
    );
  opacity: 0.58;
  box-shadow:
    0 0 12px rgba(40, 184, 255, 0.24),
    0 0 12px rgba(255, 61, 100, 0.22);
}

.rope-stage__track::before,
.rope-stage__track::after {
  top: 50%;
  width: 45%;
  height: 1px;
  opacity: 0.72;
}

.rope {
  top: 18px;
  left: 5%;
  right: 5%;
  height: 18px;
  border-color: rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at var(--territory-position) 50%, rgba(255, 255, 255, 0.98) 0 0.8%, rgba(98, 230, 255, 0.72) 1.1%, rgba(255, 72, 136, 0.62) 2.1%, transparent 3.4%),
    linear-gradient(
      90deg,
      rgb(26, 166, 255) 0%,
      rgb(30, 155, 248) calc(var(--territory-position) - 7%),
      rgba(224, 242, 255, 0.72) calc(var(--territory-position) - 0.7%),
      rgba(255, 255, 255, 0.94) var(--territory-position),
      rgba(255, 150, 190, 0.72) calc(var(--territory-position) + 0.7%),
      rgb(247, 46, 93) calc(var(--territory-position) + 7%),
      rgb(255, 54, 96) 100%
    ),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.34) 0 3px, rgba(0, 0, 0, 0.3) 3px 7px, rgba(255, 255, 255, 0.2) 7px 11px, rgba(0, 0, 0, 0.34) 11px 15px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 34% 68%, rgba(0, 0, 0, 0.5));
  background-blend-mode: screen, normal, overlay, overlay;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.36),
    inset 0 -3px 4px rgba(0, 0, 0, 0.5),
    0 5px 0 rgba(0, 0, 0, 0.48),
    0 10px 18px rgba(0, 0, 0, 0.28);
}

.rope::before,
.rope::after {
  top: 50%;
  width: 22px;
  height: 22px;
}

.rope::before {
  left: -10px;
}

.rope::after {
  right: -10px;
}

.rope-stage::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 2px;
  left: var(--territory-seam-left);
  z-index: 6;
  width: 3px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, transparent, rgba(107, 229, 255, 0.65), rgba(255, 255, 255, 0.88), rgba(255, 84, 145, 0.58), transparent);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.45),
    0 0 12px rgba(70, 220, 255, 0.24),
    0 0 12px rgba(255, 72, 136, 0.2);
  transform: translateX(-50%);
  pointer-events: none;
}

.rope-stage::after {
  content: "";
  position: absolute;
  top: 16px;
  left: var(--territory-seam-left);
  z-index: 7;
  width: 20px;
  height: 16px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 36%, rgba(98, 230, 255, 0.78) 0 7%, transparent 8%),
    radial-gradient(circle at 78% 62%, rgba(255, 72, 136, 0.72) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.22), transparent 48%);
  filter: blur(0.2px);
  opacity: 0.9;
  transform: translateX(-50%);
  animation: seam-sparks 1.1s ease-in-out infinite alternate;
  pointer-events: none;
}

body[data-tug="blue"] .rope,
body[data-tug="red"] .rope {
  animation: territory-rope-surge 620ms cubic-bezier(0.18, 0.9, 0.2, 1);
}

body[data-tug="blue"] .rope-stage::before,
body[data-tug="blue"] .rope-stage::after {
  animation: seam-surge-blue 620ms cubic-bezier(0.18, 0.9, 0.2, 1);
}

body[data-tug="red"] .rope-stage::before,
body[data-tug="red"] .rope-stage::after {
  animation: seam-surge-red 620ms cubic-bezier(0.18, 0.9, 0.2, 1);
}

.milestone {
  top: 18px;
  z-index: 4;
  width: 10px;
  height: 18px;
  opacity: 0.38;
  background:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.1) 0 2px, rgba(0, 0, 0, 0.14) 2px 4px),
    rgba(112, 76, 39, 0.72);
}

.mode-stack {
  top: 34px;
}

.experience-banner {
  max-width: 94px;
  min-width: 28px;
  min-height: 20px;
  padding: 3px 8px;
  opacity: 0.78;
}

.experience-banner strong {
  display: none;
}

.experience-banner span {
  padding-left: 8px;
  font-size: 0.52rem;
}

.smart-event-banner {
  display: grid;
  place-items: center;
  min-width: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    conic-gradient(currentColor var(--event-countdown-deg), rgba(255, 255, 255, 0.18) 0),
    rgba(5, 8, 14, 0.72);
  color: var(--hud-gold);
  box-shadow:
    0 0 14px rgba(255, 212, 95, 0.34),
    0 7px 16px rgba(0, 0, 0, 0.24);
  animation: event-icon-enter 760ms cubic-bezier(0.2, 1.15, 0.2, 1) both;
}

.smart-event-banner::before {
  content: "";
  display: block;
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: rgba(5, 8, 14, 0.9);
}

.smart-event-banner::after {
  display: none;
}

.smart-event-banner span {
  position: relative;
  z-index: 1;
  padding: 0;
  color: currentColor;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0;
}

.smart-event-banner strong {
  position: absolute;
  right: -16px;
  bottom: -4px;
  z-index: 1;
  display: block;
  min-width: 20px;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(5, 8, 14, 0.78);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.5rem;
  line-height: 1;
}

.overlay-shell.smart-event-double-pull .smart-event-banner {
  color: var(--hud-gold);
}

.overlay-shell.smart-event-underdog-boost .smart-event-banner {
  color: #8dffbd;
}

.overlay-shell.smart-event-final-push .smart-event-banner {
  color: #ff704f;
}

.overlay-shell.smart-event-momentum-swing .smart-event-banner {
  color: #83e8ff;
}

.overlay-shell.smart-event-freeze-frame .smart-event-banner {
  color: var(--hud-ice);
}

.overlay-shell.smart-event-double-pull .rope {
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.36),
    inset 0 -3px 4px rgba(0, 0, 0, 0.5),
    0 5px 0 rgba(0, 0, 0, 0.48),
    0 0 24px rgba(255, 212, 95, 0.48);
}

.overlay-shell.smart-event-double-pull .rope-stage__track {
  box-shadow:
    0 0 16px rgba(255, 212, 95, 0.42),
    0 0 10px rgba(40, 184, 255, 0.18),
    0 0 10px rgba(255, 61, 100, 0.18);
}

.overlay-shell.smart-event-double-pull .rope-stage .rope {
  animation-duration: 480ms;
}

.overlay-shell.smart-event-underdog-boost[data-underdog="blue"] .team-panel--blue,
.overlay-shell.smart-event-underdog-boost[data-underdog="red"] .team-panel--red {
  animation: underdog-hope 1.25s ease-in-out infinite alternate;
}

.overlay-shell.smart-event-final-push .rope {
  filter: saturate(1.18) brightness(1.08);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.36),
    inset 0 -3px 4px rgba(0, 0, 0, 0.5),
    0 5px 0 rgba(0, 0, 0, 0.48),
    0 0 22px rgba(255, 112, 79, 0.42);
}

.overlay-shell.smart-event-momentum-swing .rope-stage__track {
  background-position: 0 0;
  animation: momentum-flow 650ms linear infinite;
}

.overlay-shell.smart-event-freeze-frame .rope {
  filter: saturate(0.42) brightness(1.16);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.36),
    inset 0 -3px 4px rgba(0, 0, 0, 0.5),
    0 5px 0 rgba(0, 0, 0, 0.48),
    0 0 24px rgba(191, 244, 255, 0.38);
}

.overlay-shell.smart-event-freeze-frame .rope-stage::after {
  animation: none;
  opacity: 0.42;
}

.overlay-shell.smart-event-ending .rope,
.overlay-shell.smart-event-ending .rope-stage__track,
.overlay-shell.smart-event-ending .rope-stage::after {
  animation: event-visuals-out 700ms ease-out both;
}

.overlay-shell.experience-double-coins .rope {
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.36),
    inset 0 -3px 4px rgba(0, 0, 0, 0.5),
    0 5px 0 rgba(0, 0, 0, 0.48),
    0 0 18px rgba(255, 212, 95, 0.28);
}

.overlay-shell.experience-sudden-death .rope-stage::before {
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.42),
    0 0 20px rgba(255, 61, 100, 0.4);
}

.overlay-shell.experience-reverse-pull .rope-stage__track::before {
  background: linear-gradient(90deg, rgba(255, 61, 100, 0.9), rgba(255, 61, 100, 0.04));
}

.overlay-shell.experience-reverse-pull .rope-stage__track::after {
  background: linear-gradient(270deg, rgba(40, 184, 255, 0.9), rgba(40, 184, 255, 0.04));
}

.overlay-shell.experience-chaos-hour .rope-stage::after {
  filter: hue-rotate(52deg) saturate(1.8);
}

.overlay-shell.experience-chaos-hour .rope {
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.36),
    inset 0 -3px 4px rgba(0, 0, 0, 0.5),
    0 5px 0 rgba(0, 0, 0, 0.48),
    0 0 20px rgba(180, 92, 255, 0.34);
}

body[data-animation-intensity="off"] .rope-stage::after,
body[data-animation-intensity="off"] .smart-event-banner,
body[data-animation-intensity="off"] .rope,
body[data-animation-intensity="off"] .team-panel {
  animation: none !important;
}

body[data-battle-marker-style="flag"] .flag {
  top: 5px;
  width: 28px;
  height: 38px;
}

body[data-battle-marker-style="flag"] .flag-pole {
  display: block;
  left: 12px;
  top: 5px;
  width: 4px;
  height: 31px;
}

body[data-battle-marker-style="flag"] .flag-knot {
  top: 5px;
  left: 16px;
  width: 28px;
  height: 18px;
  border: 0;
  border-radius: 2px 7px 7px 2px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 211, 93, 0.92));
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.42),
    0 0 10px rgba(255, 211, 93, 0.36);
}

body[data-battle-marker-style="ring"] .flag {
  top: 7px;
  width: 28px;
  height: 34px;
}

body[data-battle-marker-style="ring"] .flag-pole {
  display: none;
}

body[data-battle-marker-style="ring"] .flag-knot {
  top: 7px;
  left: 3px;
  width: 22px;
  height: 22px;
  border: 3px solid rgba(220, 232, 245, 0.95);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 38%, rgba(255, 255, 255, 0.18) 42% 54%, rgba(50, 58, 70, 0.84) 58%);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.42),
    0 0 10px rgba(255, 255, 255, 0.38),
    0 4px 7px rgba(0, 0, 0, 0.4);
}

body[data-battle-marker-style="territory"] .rope-stage::before,
body[data-battle-marker-style="territory"] .rope-stage::after {
  opacity: 0.92;
}

/* Release marker styles: Territory stays markerless; other styles reuse the
   server-positioned marker container without changing scoring or progress. */
body[data-battle-marker-style="territory"] .flag {
  display: none !important;
}

body[data-battle-marker-style="flag"] .flag,
body[data-battle-marker-style="ring"] .flag,
body[data-battle-marker-style="streamerLogo"] .flag {
  display: block !important;
}

body[data-battle-marker-style="flag"] .flag {
  top: 1px;
  width: 46px;
  height: 40px;
}

body[data-battle-marker-style="flag"] .flag-pole {
  display: block;
  left: 12px;
  top: 5px;
  width: 3px;
  height: 31px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5d6878, #f5f8ff 48%, #768394);
}

body[data-battle-marker-style="flag"] .flag-cloth {
  display: grid;
  place-items: center;
  position: absolute;
  left: 15px;
  top: 4px;
  width: 31px;
  height: 20px;
  border-radius: 3px 9px 7px 3px;
  clip-path: polygon(0 0, 91% 0, 100% 16%, 88% 50%, 100% 84%, 91% 100%, 0 100%);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.42), transparent 36%),
    linear-gradient(180deg, rgba(230, 236, 246, 0.96), rgba(155, 169, 188, 0.95));
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.42),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2),
    0 3px 7px rgba(0, 0, 0, 0.42);
  transform-origin: left center;
}

body[data-flag-color="white"] .flag-cloth {
  background: linear-gradient(180deg, #ffffff, #d8e1ee);
}

body[data-flag-color="gold"] .flag-cloth {
  background: linear-gradient(180deg, #ffe88d, #d99b22);
}

body[data-flag-color="blue"] .flag-cloth {
  background: linear-gradient(180deg, #5ed7ff, #1467f1);
}

body[data-flag-color="red"] .flag-cloth {
  background: linear-gradient(180deg, #ff8ba1, #d71943);
}

body[data-battle-marker-style="flag"] .flag-knot {
  display: block;
  top: 13px;
  left: 8px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(236, 242, 251, 0.94);
  border-radius: 999px;
  clip-path: none;
  background: radial-gradient(circle at 34% 28%, #ffffff, #8c9aa9 54%, #2c3441);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.42);
}

body[data-flag-wind="true"] .flag-cloth {
  animation: flag-wave var(--flag-wave-duration) ease-in-out infinite;
}

.flag-logo {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.32));
}

body[data-battle-marker-style="ring"] .flag {
  top: 7px;
  width: 30px;
  height: 30px;
}

body[data-battle-marker-style="ring"] .flag-pole,
body[data-battle-marker-style="ring"] .flag-cloth,
body[data-battle-marker-style="ring"] .streamer-logo-marker {
  display: none !important;
}

body[data-battle-marker-style="ring"] .flag-knot {
  display: block;
  top: 4px;
  left: 3px;
  width: 24px;
  height: 24px;
  border: 4px solid rgba(214, 225, 238, 0.96);
  border-radius: 999px;
  clip-path: none;
  background:
    radial-gradient(circle, transparent 0 35%, rgba(255, 255, 255, 0.2) 37% 48%, rgba(72, 82, 96, 0.9) 52%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(67, 76, 91, 0.5));
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.58),
    inset 0 -2px 3px rgba(0, 0, 0, 0.42),
    0 4px 8px rgba(0, 0, 0, 0.46);
}

body[data-battle-marker-style="streamerLogo"] .flag {
  top: 0;
  width: 48px;
  height: 48px;
}

body[data-battle-marker-style="streamerLogo"] .flag-pole,
body[data-battle-marker-style="streamerLogo"] .flag-cloth,
body[data-battle-marker-style="streamerLogo"] .flag-knot {
  display: none !important;
}

/* Final overlay HUD pass: compact game presentation over gameplay. */
body {
  padding: 4px 8px;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.78),
    0 0 8px rgba(0, 0, 0, 0.55);
}

.overlay-shell {
  width: min(760px, calc(100vw - 16px));
  --hud-blue: #14a7ff;
  --hud-red: #ff315c;
  --hud-neutral: rgba(238, 247, 255, 0.92);
  --hud-shadow: rgba(0, 0, 0, 0.78);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}

.overlay-backplate {
  display: none;
}

.mode-stack {
  position: relative;
  z-index: 7;
  min-height: 26px;
  margin-bottom: -2px;
  pointer-events: none;
}

.scoreboard {
  position: relative;
  z-index: 4;
  grid-template-columns: minmax(126px, 0.92fr) minmax(220px, 1.32fr) minmax(126px, 0.92fr);
  gap: 0;
  align-items: end;
  padding: 0 10px;
}

.scoreboard::before {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 3px;
  left: 7px;
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(20, 167, 255, 0.42), rgba(235, 245, 255, 0.16) 48%, rgba(255, 49, 92, 0.42));
  filter: blur(7px);
  opacity: 0.85;
  pointer-events: none;
}

.team-emblem {
  display: none !important;
}

.team-panel,
.match-status {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(11, 18, 31, 0.86), rgba(5, 8, 16, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 18px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(3px);
}

.team-panel {
  display: grid;
  align-content: center;
  min-height: 52px;
  padding: 7px 13px 8px;
  border-radius: 10px 0 0 10px;
}

.team-panel--blue {
  border-color: rgba(20, 167, 255, 0.62);
  border-right-width: 0;
  background:
    linear-gradient(90deg, rgba(13, 99, 198, 0.9), rgba(12, 27, 52, 0.76) 70%, rgba(6, 11, 21, 0.45));
}

.team-panel--red {
  border-color: rgba(255, 49, 92, 0.62);
  border-left-width: 0;
  border-radius: 0 10px 10px 0;
  background:
    linear-gradient(270deg, rgba(202, 28, 68, 0.9), rgba(52, 13, 26, 0.76) 70%, rgba(6, 11, 21, 0.45));
}

.team-panel::before {
  top: auto;
  right: 9px;
  bottom: 5px;
  left: 9px;
  width: auto;
  height: 3px;
  border-radius: 999px;
  opacity: 0.95;
  box-shadow: 0 0 12px currentColor;
}

.team-panel--blue::before {
  background: linear-gradient(90deg, var(--hud-blue), transparent);
}

.team-panel--red::before {
  background: linear-gradient(270deg, var(--hud-red), transparent);
}

.team-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 42%);
  pointer-events: none;
}

.team-label {
  max-width: 100%;
  overflow: hidden;
  color: rgba(245, 250, 255, 0.96);
  font-size: clamp(0.66rem, 1.55vw, 0.84rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-panel strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  margin-top: 2px;
  color: #ffffff;
  font-size: clamp(1.22rem, 2.9vw, 1.66rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.72),
    0 0 10px currentColor;
}

.team-panel strong[data-size="large"],
.team-panel strong[data-size="huge"] {
  font-size: clamp(1rem, 2.35vw, 1.3rem);
}

.team-panel--blue strong {
  color: #dff3ff;
}

.team-panel--red strong {
  color: #ffe5ec;
}

.match-status {
  display: grid;
  place-items: center;
  min-height: 45px;
  padding: 5px 12px 7px;
  border-radius: 8px 8px 4px 4px;
  border-color: rgba(237, 247, 255, 0.2);
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.17), transparent 54%),
    linear-gradient(180deg, rgba(13, 18, 30, 0.76), rgba(4, 7, 14, 0.54));
}

.battle-kicker {
  color: rgba(228, 239, 255, 0.78);
  font-size: clamp(0.48rem, 1.2vw, 0.58rem);
  font-weight: 850;
  letter-spacing: 0.08em;
}

#lead-text {
  max-width: 100%;
  overflow: hidden;
  color: #ffffff;
  font-size: clamp(0.9rem, 2.1vw, 1.16rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.04;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#goal-text {
  color: rgba(228, 239, 255, 0.78);
  font-size: clamp(0.58rem, 1.25vw, 0.68rem);
  font-weight: 800;
}

.rope-stage {
  z-index: 5;
  height: 78px;
  margin-top: -5px;
  filter:
    drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.12));
}

.rope-stage__track {
  top: 31px;
  height: 18px;
  border-radius: 999px;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(20, 167, 255, 0.28), transparent 44%, transparent 56%, rgba(255, 49, 92, 0.28)),
    radial-gradient(circle at var(--territory-position) 50%, rgba(255, 255, 255, 0.82) 0 1.8%, rgba(20, 167, 255, 0.36) 2.4%, rgba(255, 49, 92, 0.32) 3.4%, transparent 5.8%);
  box-shadow:
    0 0 16px rgba(20, 167, 255, 0.28),
    0 0 16px rgba(255, 49, 92, 0.24);
}

.rope-stage__track::before,
.rope-stage__track::after {
  height: 3px;
  opacity: 0.95;
}

.rope-stage .rope {
  top: 28px;
  height: 24px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(122deg, rgba(255, 255, 255, 0.42) 0 4px, rgba(0, 0, 0, 0.34) 4px 8px, rgba(255, 255, 255, 0.22) 8px 12px, rgba(0, 0, 0, 0.38) 12px 16px),
    radial-gradient(circle at var(--territory-position) 50%, rgba(255, 255, 255, 1) 0 0.9%, rgba(129, 236, 255, 0.9) 1.1%, rgba(255, 123, 164, 0.8) 2.2%, transparent 3.8%),
    linear-gradient(
      90deg,
      #129eff 0%,
      #129eff calc(max(7%, var(--territory-position) - 7%)),
      rgba(223, 247, 255, 0.96) calc(var(--territory-position) - 0.8%),
      #ffffff var(--territory-position),
      rgba(255, 196, 215, 0.96) calc(var(--territory-position) + 0.8%),
      #ff305d calc(min(93%, var(--territory-position) + 7%)),
      #ff305d 100%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), transparent 36%, rgba(0, 0, 0, 0.58));
  background-blend-mode: overlay, screen, normal, overlay;
  box-shadow:
    inset 0 4px 5px rgba(255, 255, 255, 0.24),
    inset 0 -6px 8px rgba(0, 0, 0, 0.46),
    0 0 16px rgba(20, 167, 255, 0.3),
    0 0 16px rgba(255, 49, 92, 0.28),
    0 7px 11px rgba(0, 0, 0, 0.58);
}

.rope-stage .rope::before {
  opacity: 0.42;
  background:
    repeating-linear-gradient(62deg, transparent 0 10px, rgba(255, 255, 255, 0.42) 10px 13px, transparent 13px 22px);
}

.rope-stage .rope::after {
  background:
    radial-gradient(circle at var(--territory-position) 50%, rgba(255, 255, 255, 0.98) 0 5px, rgba(255, 214, 107, 0.55) 6px, transparent 13px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 48%, rgba(0, 0, 0, 0.2));
  opacity: 1;
}

body[data-battle-marker-style="territory"] .rope-stage::after {
  content: "";
  position: absolute;
  top: 19px;
  left: var(--territory-position);
  width: 2px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 0 9px rgba(255, 255, 255, 0.72),
    -7px 0 16px rgba(20, 167, 255, 0.55),
    7px 0 16px rgba(255, 49, 92, 0.52);
  transform: translateX(-50%);
  pointer-events: none;
}

body[data-tug="blue"] .rope-stage .rope,
body[data-tug="red"] .rope-stage .rope {
  animation: final-rope-impact 620ms cubic-bezier(0.18, 0.95, 0.22, 1);
}

body[data-tug="blue"] .rope-stage {
  --impact-color: rgba(20, 167, 255, 0.68);
}

body[data-tug="red"] .rope-stage {
  --impact-color: rgba(255, 49, 92, 0.68);
}

body[data-tug] .rope-stage::before {
  content: "";
  position: absolute;
  inset: 17px 5% 12px;
  border-radius: 999px;
  background: radial-gradient(circle at var(--territory-position) 50%, var(--impact-color), transparent 36%);
  animation: final-team-surge 620ms ease-out;
  pointer-events: none;
}

@keyframes final-rope-impact {
  0% { transform: translateX(0) scaleX(1); filter: brightness(1); }
  20% { transform: translateX(var(--pull-shift, 4px)) scaleX(1.025); filter: brightness(1.26); }
  52% { transform: translateX(var(--pull-recoil-shift, -3px)) scaleX(0.988); }
  100% { transform: translateX(0) scaleX(1); filter: brightness(1); }
}

@keyframes final-team-surge {
  0% { opacity: 0; transform: scaleX(0.86); }
  25% { opacity: 1; transform: scaleX(1.04); }
  100% { opacity: 0; transform: scaleX(1.16); }
}

@media (max-width: 700px) {
  body {
    padding: 3px 5px;
  }

  .overlay-shell {
    width: min(100vw - 10px, 620px);
  }

  .mode-stack {
    min-height: 20px;
  }

  .scoreboard {
    grid-template-columns: minmax(84px, 0.86fr) minmax(130px, 1.15fr) minmax(84px, 0.86fr);
    padding: 0 4px;
  }

  .team-panel {
    min-height: 43px;
    padding: 6px 8px 7px;
  }

  .team-label {
    font-size: clamp(0.54rem, 2.8vw, 0.66rem);
  }

  .team-panel strong,
  .team-panel strong[data-size="large"],
  .team-panel strong[data-size="huge"] {
    font-size: clamp(0.95rem, 4.4vw, 1.2rem);
  }

  .match-status {
    min-height: 39px;
    padding-inline: 5px;
  }

  #lead-text,
  #lead-text[data-size="small"],
  #lead-text[data-size="tiny"] {
    font-size: clamp(0.72rem, 3.4vw, 0.94rem);
  }

  .rope-stage {
    height: 58px;
    margin-top: -4px;
  }

  .rope-stage__track {
    top: 23px;
  }

  .rope-stage .rope {
    top: 21px;
    height: 20px;
  }

  body[data-battle-marker-style="territory"] .rope-stage::after {
    top: 15px;
    height: 34px;
  }
}

.streamer-hud-body {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  padding: 8px;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
}

.streamer-hud-drag-handle {
  position: fixed;
  inset: 0;
  z-index: 0;
  -webkit-app-region: drag;
}

.streamer-hud-body[data-hud-locked="true"] .streamer-hud-drag-handle {
  -webkit-app-region: no-drag;
  pointer-events: none;
}

.streamer-hud-shell {
  z-index: 1;
  width: min(100%, 100vw - 16px);
  pointer-events: none;
}

.streamer-hud-body .scoreboard {
  grid-template-columns: minmax(116px, 0.9fr) minmax(240px, 1.45fr) minmax(116px, 0.9fr);
}

.streamer-hud-body .team-panel {
  min-height: 42px;
  padding-top: 5px;
  padding-bottom: 4px;
}

.streamer-hud-body .rope-stage {
  margin-top: 4px;
}

.streamer-hud-body[data-hud-size="small"] {
  font-size: 0.88rem;
}

.streamer-hud-body[data-hud-size="small"] .mode-stack {
  display: none;
}

.streamer-hud-body[data-hud-size="large"] {
  font-size: 1.08rem;
}

.streamer-hud-body[data-hud-size="large"] .rope-stage {
  min-height: 92px;
}

.overlay-shell.has-smart-event .smart-event-banner {
  grid-template-columns: auto auto;
  max-width: min(460px, calc(100vw - 20px));
  padding: 6px 12px;
}

.overlay-shell.has-smart-event .smart-event-banner span {
  font-size: clamp(1.15rem, 3.2vw, 2rem);
  line-height: 1;
}

.overlay-shell.smart-event-double-coins .smart-event-banner span,
.overlay-shell.experience-double-coins .smart-event-banner span {
  color: #ffd66b;
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  letter-spacing: 0;
  text-shadow:
    0 0 10px rgba(255, 214, 107, 0.54),
    0 2px 2px rgba(0, 0, 0, 0.55);
}

.overlay-shell.has-smart-event .smart-event-banner strong {
  font-size: clamp(0.78rem, 1.9vw, 1rem);
  max-width: 260px;
}

.pull-toast {
  display: grid;
  gap: 2px;
  min-width: min(280px, calc(100vw - 24px));
  max-width: min(390px, calc(100vw - 24px));
  white-space: normal;
}

.pull-toast strong,
.pull-toast small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pull-toast strong {
  font-size: clamp(1rem, 2.4vw, 1.35rem);
}

.pull-toast small {
  color: rgba(248, 251, 255, 0.78);
  font-size: clamp(0.72rem, 1.8vw, 0.88rem);
  font-weight: 850;
}

/* Release regression fix: Flag mode must render as cloth plus rope attachment,
   never as a framed logo box or reused ring marker. */
body[data-battle-marker-style="flag"] .flag {
  width: 46px !important;
  height: 38px !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body[data-battle-marker-style="flag"] .flag-motion {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body[data-battle-marker-style="flag"] .flag-pole {
  display: block !important;
  left: 12px !important;
  top: 5px !important;
  width: 3px !important;
  height: 31px !important;
  border: 0 !important;
  background: linear-gradient(90deg, #566273, #f8fbff 48%, #6f7b8c) !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.42),
    0 0 5px rgba(255, 255, 255, 0.2) !important;
}

body[data-battle-marker-style="flag"] .flag-cloth {
  display: grid !important;
  place-items: center;
  left: 15px !important;
  top: 4px !important;
  width: 31px !important;
  height: 20px !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 3px 8px 7px 3px !important;
  clip-path: polygon(0 0, 91% 0, 100% 16%, 88% 50%, 100% 84%, 91% 100%, 0 100%) !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.36),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2),
    0 2px 5px rgba(0, 0, 0, 0.36) !important;
}

body[data-battle-marker-style="flag"] .flag-knot {
  display: block !important;
  top: 18px !important;
  left: 9px !important;
  width: 9px !important;
  height: 7px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  clip-path: none !important;
  background: linear-gradient(180deg, #f6fbff, #778596) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.5),
    0 0 5px rgba(255, 255, 255, 0.2) !important;
}

body[data-battle-marker-style="flag"] .streamer-logo-marker {
  display: none !important;
}

body[data-battle-marker-style="flag"] .flag-logo {
  display: block;
  width: 78%;
  height: 78%;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  box-shadow: none;
}

body[data-battle-marker-style="flag"] .flag-logo[hidden] {
  display: none !important;
}

.streamer-logo-marker {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.52));
  pointer-events: none;
}

body[data-logo-size="small"] .streamer-logo-marker {
  width: 28px;
  height: 28px;
}

body[data-logo-size="large"] .streamer-logo-marker {
  width: 42px;
  height: 42px;
}

body[data-logo-shape="circle"] .streamer-logo-marker {
  border-radius: 999px;
}

body[data-logo-shape="roundedSquare"] .streamer-logo-marker {
  border-radius: 9px;
}

body[data-logo-border="true"] .streamer-logo-marker {
  border: 2px solid rgba(255, 255, 255, 0.88);
  background: rgba(7, 10, 18, 0.28);
}

body[data-logo-glow="true"] .streamer-logo-marker {
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.26);
}

body[data-battle-marker-style="streamerLogo"] .pull-toast,
body[data-battle-marker-style="flag"] .pull-toast,
body[data-battle-marker-style="ring"] .pull-toast {
  max-width: min(320px, calc(100vw - 28px));
}

.overlay-shell[data-pull-size="medium"] .rope {
  animation-duration: 720ms;
}

.overlay-shell[data-pull-size="large"] .rope {
  animation-duration: 840ms;
}

.overlay-shell[data-pull-size="large"] .rope-stage::after {
  filter: blur(0.1px) brightness(1.35);
}

@keyframes seam-sparks {
  from {
    opacity: 0.58;
    transform: translateX(-50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes territory-rope-surge {
  0%, 100% { transform: scaleX(1) translateX(0); }
  22% { transform: scaleX(var(--pull-stretch, 1.018)) translateX(var(--pull-shift, 3px)); }
  46% { transform: scaleX(var(--pull-recoil, 0.992)) translateX(var(--pull-recoil-shift, -2px)); }
  64% { transform: translateX(var(--pull-settle-shift, 1px)); }
}

@keyframes seam-surge-blue {
  0%, 100% { transform: translateX(-50%); }
  35% { transform: translateX(calc(-50% + 12px)); }
  68% { transform: translateX(calc(-50% - 4px)); }
}

@keyframes seam-surge-red {
  0%, 100% { transform: translateX(-50%); }
  35% { transform: translateX(calc(-50% - 12px)); }
  68% { transform: translateX(calc(-50% + 4px)); }
}

@keyframes event-icon-enter {
  0% {
    opacity: 0;
    transform: translateY(-4px) scale(0.72);
  }
  45% {
    opacity: 1;
    transform: translateY(0) scale(1.18);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes event-visuals-out {
  from {
    opacity: 1;
    filter: brightness(1.08);
  }
  to {
    opacity: 0.72;
    filter: brightness(1);
  }
}

@media (max-width: 700px) {
  .scoreboard {
    grid-template-columns: minmax(74px, 0.75fr) minmax(122px, 1.14fr) minmax(74px, 0.75fr);
    padding-inline: 10px;
  }

  .team-panel {
    min-height: 31px;
    padding: 2px 5px;
  }

  .team-panel strong,
  .team-panel strong[data-size="large"],
  .team-panel strong[data-size="huge"] {
    font-size: 0.82rem;
  }

  .team-label {
    font-size: 0.48rem;
  }

  #lead-text,
  #lead-text[data-size="small"],
  #lead-text[data-size="tiny"] {
    font-size: clamp(0.58rem, 3.4vw, 0.78rem);
  }

  .rope-stage {
    height: 39px;
    margin-top: -8px;
  }

  .rope {
    top: 17px;
    height: 16px;
  }

  .rope-stage__track {
    top: 16px;
  }

  .mode-stack {
    top: 33px;
  }

  .smart-event-banner {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  .smart-event-banner span {
    font-size: 0.66rem;
  }

  .smart-event-banner strong {
    display: none;
  }

  .experience-banner {
    display: none;
  }
}

/* Compact in-game HUD skin. Overrides the premium card treatment above while
   preserving the same server data, DOM IDs, and animation trigger classes. */
:root {
  --hud-blue: #28b8ff;
  --hud-blue-core: #1674ff;
  --hud-red: #ff3d64;
  --hud-red-core: #d5163d;
  --hud-gold: #ffd45f;
  --hud-purple: #b45cff;
  --hud-ice: #bff4ff;
}

body {
  padding: 4px 8px 0;
}

.overlay-shell {
  width: min(760px, calc(100vw - 16px));
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  filter: none;
}

.overlay-backplate {
  display: none;
}

.mode-stack {
  position: absolute;
  top: 30px;
  left: 50%;
  z-index: 8;
  display: flex;
  min-height: 0;
  margin: 0;
  gap: 5px;
  transform: translateX(-50%);
}

.smart-event-banner,
.experience-banner {
  max-width: min(260px, 42vw);
  min-height: 21px;
  padding: 4px 9px;
  border-width: 1px;
  border-radius: 999px;
  background: rgba(5, 8, 14, 0.66);
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(5px);
}

.smart-event-banner::before,
.experience-banner::before {
  display: none;
}

.smart-event-banner::after,
.experience-banner::after {
  left: 7px;
  width: 5px;
  height: 5px;
}

.smart-event-banner span,
.experience-banner span {
  padding-left: 9px;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.smart-event-banner strong,
.experience-banner strong {
  font-size: 0.68rem;
  font-weight: 900;
  max-width: 150px;
}

.experience-banner {
  color: #dff8ff;
  border-color: rgba(117, 220, 255, 0.62);
}

.smart-event-banner {
  color: var(--hud-gold);
  border-color: rgba(255, 212, 95, 0.78);
}

.scoreboard {
  position: relative;
  z-index: 4;
  grid-template-columns: minmax(112px, 0.8fr) minmax(230px, 1.35fr) minmax(112px, 0.8fr);
  gap: 8px;
  align-items: start;
  padding: 0 18px;
}

.team-panel {
  min-height: 43px;
  padding: 6px 9px 5px 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.team-panel::before {
  top: auto;
  bottom: -5px;
  width: 90%;
  height: 2px;
  border-radius: 999px;
}

.team-panel::after {
  display: none;
}

.team-panel--blue {
  background: linear-gradient(90deg, rgba(40, 184, 255, 0.16), transparent 76%);
  box-shadow: none;
}

.team-panel--red {
  padding-right: 38px;
  padding-left: 9px;
  background: linear-gradient(270deg, rgba(255, 61, 100, 0.16), transparent 76%);
  box-shadow: none;
}

.team-panel--blue::before {
  left: 0;
  color: var(--hud-blue);
  background: linear-gradient(90deg, var(--hud-blue), transparent);
}

.team-panel--red::before {
  right: 0;
  color: var(--hud-red);
  background: linear-gradient(270deg, var(--hud-red), transparent);
}

.team-emblem {
  width: 24px;
  height: 24px;
  border-color: rgba(255, 255, 255, 0.2);
  font-size: 0.58rem;
}

.team-panel--blue .team-emblem {
  left: 7px;
}

.team-panel--red .team-emblem {
  right: 7px;
}

.team-label {
  max-width: 100%;
  color: rgba(238, 247, 255, 0.86);
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-panel--blue .team-label {
  color: #bceaff;
}

.team-panel--red .team-label {
  color: #ffc0cc;
}

.team-panel strong {
  margin-top: 4px;
  font-size: 1.28rem;
  line-height: 0.92;
  color: #ffffff;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.86),
    0 0 10px rgba(0, 0, 0, 0.72);
}

.team-panel strong[data-size="large"],
.team-panel strong[data-size="huge"] {
  font-size: 1.04rem;
}

.match-status {
  min-height: 44px;
  padding: 3px 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.battle-kicker {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
}

#lead-text {
  margin-top: 3px;
  font-size: clamp(0.92rem, 2.2vw, 1.22rem);
  line-height: 1.02;
  text-wrap: balance;
}

#goal-text {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.56rem;
}

body[data-leader="blue"] .team-panel--blue,
body[data-tug="blue"] .team-panel--blue,
body[data-lead-change="blue"] .team-panel--blue,
body[data-leader="red"] .team-panel--red,
body[data-tug="red"] .team-panel--red,
body[data-lead-change="red"] .team-panel--red {
  border-color: transparent;
  box-shadow: none;
}

body[data-leader="blue"] .team-panel--blue strong,
body[data-tug="blue"] .team-panel--blue strong {
  filter: drop-shadow(0 0 10px rgba(40, 184, 255, 0.72));
}

body[data-leader="red"] .team-panel--red strong,
body[data-tug="red"] .team-panel--red strong {
  filter: drop-shadow(0 0 10px rgba(255, 61, 100, 0.72));
}

.rope-stage {
  z-index: 3;
  height: 50px;
  margin-top: -4px;
  overflow: visible;
}

.rope-stage__track {
  top: 20px;
  left: 3%;
  right: 3%;
  height: 15px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(40, 184, 255, 0.74), rgba(40, 184, 255, 0.08) 41%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 61, 100, 0.08) 59%, rgba(255, 61, 100, 0.74)),
    transparent;
  box-shadow:
    0 0 14px rgba(40, 184, 255, 0.22),
    0 0 14px rgba(255, 61, 100, 0.2);
}

.rope-stage__track::before,
.rope-stage__track::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 43%;
  height: 2px;
  border-radius: 999px;
  transform: translateY(-50%);
}

.rope-stage__track::before {
  left: 0;
  background: linear-gradient(90deg, var(--hud-blue), rgba(40, 184, 255, 0.04));
  box-shadow: 0 0 12px rgba(40, 184, 255, 0.82);
}

.rope-stage__track::after {
  right: 0;
  background: linear-gradient(270deg, var(--hud-red), rgba(255, 61, 100, 0.04));
  box-shadow: 0 0 12px rgba(255, 61, 100, 0.82);
}

.milestone {
  top: 18px;
  width: 14px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  opacity: 0.72;
  background:
    radial-gradient(circle, rgba(255, 244, 212, 0.82) 0 22%, rgba(117, 76, 35, 0.95) 24% 52%, rgba(0, 0, 0, 0.12) 54% 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.24),
    0 2px 5px rgba(0, 0, 0, 0.44);
}

.milestone--far.milestone--blue { left: 17%; }
.milestone--near.milestone--blue { left: 34%; }
.milestone--near.milestone--red { right: 34%; }
.milestone--far.milestone--red { right: 17%; }

.center-marker {
  top: 12px;
  left: 50%;
  z-index: 5;
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.8),
    0 0 14px rgba(255, 255, 255, 0.28);
}

.center-marker::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 18%, rgba(20, 25, 34, 0.82) 22% 50%, transparent 52%);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.38),
    inset 0 0 7px rgba(255, 255, 255, 0.26);
  transform: translate(-50%, -50%);
}

.goal-marker--blue,
.goal-marker--red {
  top: 12px;
  width: 3px;
  height: 32px;
  opacity: 0.72;
}

.rope {
  top: 21px;
  left: 5%;
  right: 5%;
  height: 16px;
  border: 1px solid rgba(255, 234, 191, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 250, 230, 0.42), transparent 28% 72%, rgba(0, 0, 0, 0.36)),
    repeating-linear-gradient(118deg, #4b2b12 0 7px, #e4b66b 7px 14px, #7c4c22 14px 21px, #2f1b0d 21px 28px);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.34),
    inset 0 -3px 3px rgba(0, 0, 0, 0.44),
    0 5px 0 rgba(0, 0, 0, 0.52),
    0 9px 18px rgba(0, 0, 0, 0.32);
}

.rope::before,
.rope::after {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
}

.rope::before {
  left: -11px;
  background:
    radial-gradient(circle at 32% 28%, #ddf7ff, var(--hud-blue) 46%, var(--hud-blue-core));
  box-shadow: 0 0 14px rgba(40, 184, 255, 0.88);
}

.rope::after {
  right: -11px;
  background:
    radial-gradient(circle at 32% 28%, #ffd7de, var(--hud-red) 46%, var(--hud-red-core));
  box-shadow: 0 0 14px rgba(255, 61, 100, 0.88);
}

.flag {
  top: 6px;
  z-index: 7;
  width: 34px;
  height: 42px;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.65));
}

.flag-pole {
  left: 15px;
  top: 3px;
  width: 4px;
  height: 36px;
  background: linear-gradient(90deg, #8d9aaa, #ffffff 48%, #677484);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.42),
    0 3px 0 rgba(0, 0, 0, 0.5);
}

.flag-cloth {
  display: none;
}

.flag-knot {
  position: absolute;
  top: 12px;
  left: 6px;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.96), rgba(201, 211, 222, 0.88) 30%, rgba(55, 63, 75, 0.92) 62%, rgba(11, 15, 22, 0.9));
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.42),
    inset 0 -2px 3px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(255, 255, 255, 0.46);
}

.flag[data-edge="red"] .flag-knot,
.flag[data-edge="blue"] .flag-knot {
  transform-origin: center;
}

body[data-flag-wind="true"] .flag-knot {
  animation: marker-pulse var(--flag-wave-duration) ease-in-out infinite;
}

.winner-message {
  min-height: 18px;
  margin: -7px 0 0;
  font-size: clamp(0.92rem, 2.2vw, 1.22rem);
}

body[data-winner] .winner-message {
  margin-top: -3px;
  padding: 4px 16px;
  border-radius: 999px;
  background: rgba(7, 10, 18, 0.7);
  display: block;
  width: fit-content;
  max-width: min(560px, calc(100vw - 24px));
  margin-inline: auto;
  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.14),
    0 8px 18px rgba(0, 0, 0, 0.32);
}

body[data-winner="blue"] .winner-message {
  color: #d7f3ff;
  box-shadow:
    0 0 26px rgba(40, 184, 255, 0.34),
    0 8px 18px rgba(0, 0, 0, 0.32);
}

body[data-winner="red"] .winner-message {
  color: #ffe0e6;
  box-shadow:
    0 0 26px rgba(255, 61, 100, 0.34),
    0 8px 18px rgba(0, 0, 0, 0.32);
}

body[data-winner] .overlay-shell {
  animation: hud-victory-flash 900ms ease-out;
  box-shadow: none;
}

body[data-winner] .rope-stage {
  animation: rope-impact 760ms cubic-bezier(0.2, 1.1, 0.2, 1);
}

.pull-toast {
  bottom: -12px;
  max-width: min(520px, calc(100vw - 24px));
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(5, 8, 14, 0.78);
  font-size: 0.76rem;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.26),
    0 0 14px rgba(255, 255, 255, 0.1);
}

body[data-winner] .pull-toast {
  bottom: -25px;
}

.overlay-shell.experience-double-coins .rope,
.overlay-shell.smart-event-double-pull .rope {
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.34),
    inset 0 -3px 3px rgba(0, 0, 0, 0.44),
    0 5px 0 rgba(0, 0, 0, 0.52),
    0 0 24px rgba(255, 212, 95, 0.34);
}

.overlay-shell.smart-event-double-pull .rope-stage::after,
.overlay-shell.smart-event-final-push .rope-stage::after {
  content: "";
  position: absolute;
  inset: 11px 4% 7px;
  z-index: 2;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 212, 95, 0.28), transparent),
    repeating-linear-gradient(115deg, transparent 0 16px, rgba(255, 212, 95, 0.9) 16px 18px, transparent 18px 34px);
  filter: blur(0.2px);
  opacity: 0.86;
  animation: energy-sweep 820ms linear infinite;
  pointer-events: none;
}

.overlay-shell.smart-event-underdog-boost body,
.overlay-shell.smart-event-underdog-boost .rope-stage__track {
  filter: none;
}

.overlay-shell.smart-event-underdog-boost .team-panel:not([hidden]) {
  animation: underdog-hope 1.25s ease-in-out infinite alternate;
}

.overlay-shell.smart-event-final-push .smart-event-banner {
  border-color: rgba(255, 61, 100, 0.9);
  color: #ffe4e9;
}

.overlay-shell.smart-event-momentum-swing .rope-stage__track::before,
.overlay-shell.smart-event-momentum-swing .rope-stage__track::after {
  animation: momentum-flow 720ms linear infinite;
}

.overlay-shell.smart-event-freeze-frame {
  filter: saturate(0.65) brightness(1.08);
}

.overlay-shell.smart-event-freeze-frame .rope-stage {
  box-shadow: 0 0 22px rgba(191, 244, 255, 0.24);
}

.overlay-shell.smart-event-freeze-frame .rope,
.overlay-shell.smart-event-freeze-frame .team-panel {
  animation-play-state: paused !important;
}

.overlay-shell.smart-event-freeze-frame .rope-stage::before {
  content: "";
  position: absolute;
  inset: 7px 4% 3px;
  z-index: 6;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(191, 244, 255, 0.0), rgba(191, 244, 255, 0.22), rgba(191, 244, 255, 0.0)),
    repeating-linear-gradient(45deg, rgba(191, 244, 255, 0.18) 0 1px, transparent 1px 11px);
  pointer-events: none;
}

.overlay-shell.experience-reverse-pull .rope-stage__track::before {
  background: linear-gradient(90deg, rgba(255, 61, 100, 0.9), rgba(255, 61, 100, 0.04));
  box-shadow: 0 0 12px rgba(255, 61, 100, 0.82);
}

.overlay-shell.experience-reverse-pull .rope-stage__track::after {
  background: linear-gradient(270deg, rgba(40, 184, 255, 0.9), rgba(40, 184, 255, 0.04));
  box-shadow: 0 0 12px rgba(40, 184, 255, 0.82);
}

.overlay-shell.experience-chaos-hour .rope-stage__track,
.overlay-shell.experience-chaos-hour .smart-event-banner,
.overlay-shell.experience-chaos-hour .experience-banner {
  border-color: rgba(180, 92, 255, 0.7);
  color: #eddcff;
  text-shadow:
    1px 0 rgba(40, 184, 255, 0.48),
    -1px 0 rgba(255, 61, 100, 0.38);
}

.overlay-shell.experience-chaos-hour .rope {
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.34),
    inset 0 -3px 3px rgba(0, 0, 0, 0.44),
    0 5px 0 rgba(0, 0, 0, 0.52),
    0 0 18px rgba(180, 92, 255, 0.36);
}

.overlay-shell.experience-sudden-death .center-marker::before,
.overlay-shell.smart-event-final-push .center-marker::before {
  border-color: rgba(255, 61, 100, 0.92);
  box-shadow:
    0 0 14px rgba(255, 61, 100, 0.55),
    inset 0 0 7px rgba(255, 255, 255, 0.26);
}

.overlay-shell.experience-double-coins .experience-banner {
  border-color: rgba(255, 212, 95, 0.75);
  color: #ffe9a6;
}

@keyframes marker-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.06); filter: brightness(1.18); }
}

@keyframes energy-sweep {
  from { background-position: 0 0, 0 0; }
  to { background-position: 90px 0, 90px 0; }
}

@keyframes momentum-flow {
  from { background-position: 0 0; }
  to { background-position: 80px 0; }
}

@keyframes underdog-hope {
  from { opacity: 0.84; }
  to { opacity: 1; filter: drop-shadow(0 0 9px rgba(108, 255, 178, 0.42)); }
}

@keyframes rope-impact {
  0%, 100% { transform: translateX(0) scaleX(1); }
  28% { transform: translateX(-8px) scaleX(1.018); }
  56% { transform: translateX(6px) scaleX(0.992); }
}

@keyframes hud-victory-flash {
  0% { filter: brightness(1); }
  26% { filter: brightness(1.55) saturate(1.3); }
  100% { filter: brightness(1); }
}

@media (max-width: 700px) {
  body {
    padding: 4px 5px 0;
  }

  .overlay-shell {
    width: calc(100vw - 10px);
    min-height: 0;
    padding: 0;
    border-radius: 0;
  }

  .mode-stack {
    top: 28px;
    gap: 3px;
  }

  .smart-event-banner,
  .experience-banner {
    max-width: 42vw;
    min-height: 18px;
    padding: 3px 7px;
  }

  .smart-event-banner span,
  .experience-banner span {
    display: block;
    font-size: 0.48rem;
  }

  .smart-event-banner strong,
  .experience-banner strong {
    display: none;
  }

  .scoreboard {
    grid-template-columns: minmax(76px, 0.78fr) minmax(130px, 1.15fr) minmax(76px, 0.78fr);
    gap: 4px;
    padding: 0 6px;
  }

  .team-panel {
    min-height: 38px;
    padding: 5px 6px 4px 31px;
  }

  .team-panel--red {
    padding-right: 31px;
    padding-left: 6px;
  }

  .team-emblem {
    width: 20px;
    height: 20px;
  }

  .team-panel--blue .team-emblem {
    left: 5px;
  }

  .team-panel--red .team-emblem {
    right: 5px;
  }

  .team-label {
    font-size: 0.54rem;
  }

  .team-panel strong,
  .team-panel strong[data-size="large"],
  .team-panel strong[data-size="huge"] {
    font-size: 0.95rem;
  }

  .match-status {
    min-height: 38px;
    padding-inline: 4px;
  }

  .battle-kicker {
    font-size: 0.46rem;
  }

  #lead-text,
  #lead-text[data-size="small"],
  #lead-text[data-size="tiny"] {
    font-size: clamp(0.66rem, 3.8vw, 0.86rem);
  }

  #goal-text {
    font-size: 0.48rem;
  }

  .rope-stage {
    height: 43px;
    margin-top: -5px;
  }

  .rope-stage__track {
    top: 18px;
  }

  .rope {
    top: 19px;
    height: 14px;
  }

  .flag {
    top: 4px;
    transform: translateX(-50%) scale(0.88);
  }

  .winner-message {
    min-height: 16px;
    margin-top: -8px;
    font-size: clamp(0.72rem, 3.8vw, 0.94rem);
  }

  .pull-toast {
    bottom: -14px;
    max-width: calc(100vw - 16px);
    padding: 4px 9px;
    font-size: 0.66rem;
  }
}

.pull-toast {
  top: 74px;
  bottom: auto;
  max-width: min(500px, calc(100vw - 18px));
  transform: translate(-50%, 0);
  z-index: 30;
  color: #ffffff;
  background: rgba(4, 8, 15, 0.94);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.62),
    0 12px 26px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(255, 255, 255, 0.08);
}

.pull-toast.pull-toast--above {
  top: 5px;
  bottom: auto;
}

body[data-winner] .pull-toast {
  top: 74px;
  bottom: auto;
}

body[data-winner] .pull-toast.pull-toast--above {
  top: 5px;
  bottom: auto;
}

@media (max-width: 700px) {
  .pull-toast {
    bottom: 6px;
    max-width: calc(100vw - 12px);
  }

  .pull-toast.pull-toast--above {
    top: 30px;
  }
}

.pull-toast.pull-toast--show {
  animation: hud-pull-toast 2600ms ease-out forwards;
}

.rope::before,
.rope::after {
  z-index: 2;
}

.rope-stage .rope {
  background:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.32) 0 3px, rgba(0, 0, 0, 0.28) 3px 7px, rgba(255, 255, 255, 0.18) 7px 11px, rgba(0, 0, 0, 0.32) 11px 15px),
    linear-gradient(
      90deg,
      rgb(25, 161, 255) 0%,
      rgb(25, 161, 255) calc(var(--territory-position) - 5%),
      rgba(235, 250, 255, 0.92) calc(var(--territory-position) - 0.6%),
      rgb(255, 255, 255) var(--territory-position),
      rgba(255, 182, 205, 0.92) calc(var(--territory-position) + 0.6%),
      rgb(255, 48, 91) calc(var(--territory-position) + 5%),
      rgb(255, 48, 91) 100%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 38%, rgba(0, 0, 0, 0.42));
  background-blend-mode: overlay, normal, overlay;
}

@keyframes hud-pull-toast {
  0%,
  82% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -4px) scale(0.98);
  }
}

/* Final paid-release marker overrides. Keep this block last so older prototype
   marker styles cannot override the compact HUD marker choices. */
body[data-battle-marker-style="territory"] .flag {
  display: none !important;
}

body[data-battle-marker-style="flag"] .flag,
body[data-battle-marker-style="ring"] .flag,
body[data-battle-marker-style="streamerLogo"] .flag {
  display: block !important;
}

body[data-battle-marker-style="flag"] .flag-knot {
  clip-path: none !important;
  border-radius: 999px !important;
}

body[data-battle-marker-style="flag"] .flag-cloth {
  display: grid !important;
}

body[data-battle-marker-style="ring"] .flag-cloth,
body[data-battle-marker-style="ring"] .flag-pole,
body[data-battle-marker-style="ring"] .streamer-logo-marker,
body[data-battle-marker-style="streamerLogo"] .flag-cloth,
body[data-battle-marker-style="streamerLogo"] .flag-pole,
body[data-battle-marker-style="streamerLogo"] .flag-knot {
  display: none !important;
}

/* Final release overlay clarity: remove prototype decorative event badges and
   keep temporary Experiences as compact text/countdown HUD pills. */
.smart-event-banner::before,
.smart-event-banner::after,
.experience-banner::before,
.experience-banner::after {
  content: none !important;
  display: none !important;
}

.smart-event-banner,
.experience-banner {
  isolation: isolate;
  animation: director-pill-enter 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.overlay-shell.smart-event-ending .smart-event-banner {
  animation: director-pill-exit 520ms ease forwards;
}

.overlay-shell.has-smart-event .smart-event-banner {
  width: auto;
  height: auto;
  min-width: 68px;
  min-height: 25px;
  display: inline-grid;
  grid-template-columns: auto;
  place-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  overflow: visible;
  background:
    conic-gradient(from -90deg, var(--hud-gold, #ffd45f) var(--event-countdown-deg, 360deg), rgba(255, 255, 255, 0.1) 0),
    rgba(4, 10, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 0 14px rgba(255, 212, 95, 0.2),
    inset 0 0 0 3px rgba(4, 10, 18, 0.78);
}

.overlay-shell.has-smart-event .smart-event-banner span {
  display: block;
  color: #fff4b8;
  font-size: 0.72rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  line-height: 1;
}

.overlay-shell.has-smart-event .smart-event-banner strong {
  display: none !important;
}

.overlay-shell.smart-event-double-pull .smart-event-banner span,
.overlay-shell.experience-double-coins.has-smart-event .smart-event-banner span {
  font-size: 0;
}

.overlay-shell.smart-event-double-pull .smart-event-banner span::after,
.overlay-shell.experience-double-coins.has-smart-event .smart-event-banner span::after {
  content: "2X";
  display: inline;
  font-size: 1.2rem;
  font-weight: 1000;
  color: #ffd45f;
  text-shadow:
    0 0 8px rgba(255, 212, 95, 0.78),
    0 1px 2px rgba(0, 0, 0, 0.75);
}

.overlay-shell.smart-event-final-push .smart-event-banner span {
  color: #ff9a4f;
}

.overlay-shell.smart-event-underdog-boost .smart-event-banner span {
  color: #77ffba;
}

.overlay-shell.smart-event-freeze-frame .smart-event-banner span {
  color: #bff4ff;
}

.overlay-shell.experience-sudden-death .rope-stage__track {
  box-shadow:
    inset 0 0 0 1px rgba(255, 61, 100, 0.22),
    0 0 20px rgba(255, 61, 100, 0.16);
}

.overlay-shell.experience-double-coins .rope-stage__track {
  box-shadow:
    inset 0 0 0 1px rgba(255, 212, 95, 0.26),
    0 0 20px rgba(255, 212, 95, 0.22);
}

/* Visualization modes: Territory Fill uses the blue/red seam as the only
   progress indicator. Moving Marker uses a neutral rope plus flag/ring/logo. */
body:not([data-battle-marker-style="territory"]) .rope-stage .rope {
  background:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.3) 0 3px, rgba(0, 0, 0, 0.3) 3px 7px, rgba(255, 255, 255, 0.16) 7px 11px, rgba(0, 0, 0, 0.34) 11px 15px),
    linear-gradient(90deg, rgba(38, 158, 235, 0.22), rgba(235, 240, 244, 0.9) 34%, rgba(235, 240, 244, 0.94) 66%, rgba(255, 61, 100, 0.22)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 38%, rgba(0, 0, 0, 0.42));
  background-blend-mode: overlay, normal, overlay;
}

body:not([data-battle-marker-style="territory"]) .rope-stage::after {
  content: none !important;
  display: none !important;
}

@keyframes director-pill-enter {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes director-pill-exit {
  to {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
  }
}

/* Final readability polish: keep the compact HUD, but make every viewer-facing
   text element survive bright, dark, and fast-moving gameplay. */
.overlay-shell {
  --hud-text-outline:
    0 1px 0 rgba(0, 0, 0, 0.92),
    0 -1px 0 rgba(0, 0, 0, 0.74),
    1px 0 0 rgba(0, 0, 0, 0.82),
    -1px 0 0 rgba(0, 0, 0, 0.82),
    0 2px 5px rgba(0, 0, 0, 0.92);
}

.scoreboard {
  align-items: center;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.44));
}

.team-panel {
  min-height: 43px;
  padding-block: 6px 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 42%, transparent),
    rgba(3, 9, 18, 0.78);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(0, 0, 0, 0.42);
}

.team-panel--blue {
  background:
    linear-gradient(90deg, rgba(20, 162, 255, 0.46), rgba(3, 9, 18, 0.76) 74%),
    rgba(3, 9, 18, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(115, 216, 255, 0.22),
    -12px 0 28px rgba(20, 162, 255, 0.26),
    0 8px 18px rgba(0, 0, 0, 0.38);
}

.team-panel--red {
  background:
    linear-gradient(270deg, rgba(255, 48, 91, 0.5), rgba(3, 9, 18, 0.76) 74%),
    rgba(3, 9, 18, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 132, 162, 0.2),
    12px 0 28px rgba(255, 48, 91, 0.26),
    0 8px 18px rgba(0, 0, 0, 0.38);
}

.team-label {
  color: #ffffff;
  font-size: clamp(0.68rem, 1.45vw, 0.82rem);
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 1;
  text-shadow: var(--hud-text-outline);
}

.team-panel strong,
.team-panel strong[data-size="large"],
.team-panel strong[data-size="huge"] {
  color: #ffffff;
  font-size: clamp(1.06rem, 2.45vw, 1.42rem);
  font-weight: 1000;
  line-height: 0.95;
  letter-spacing: 0;
  text-shadow: var(--hud-text-outline);
}

#lead-text,
#lead-text[data-size="small"],
#lead-text[data-size="tiny"] {
  color: #ffffff;
  font-size: clamp(0.92rem, 2.1vw, 1.32rem);
  font-weight: 1000;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.98),
    0 -1px 0 rgba(0, 0, 0, 0.86),
    1px 0 0 rgba(0, 0, 0, 0.92),
    -1px 0 0 rgba(0, 0, 0, 0.92),
    0 0 10px rgba(255, 255, 255, 0.16),
    0 3px 7px rgba(0, 0, 0, 0.94);
}

.battle-kicker,
#goal-text,
.winner-message {
  font-weight: 900;
  text-shadow: var(--hud-text-outline);
}

.pull-toast {
  top: 74px;
  min-width: min(340px, calc(100vw - 18px));
  padding: 8px 18px 9px;
  border: 1px solid rgba(255, 221, 116, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 45%),
    rgba(3, 7, 13, 0.95);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 10px 24px rgba(0, 0, 0, 0.62),
    0 0 18px rgba(255, 211, 87, 0.26);
}

.pull-toast strong {
  color: #fff8d8;
  font-size: clamp(1.24rem, 3vw, 1.72rem);
  font-weight: 1000;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.98),
    1px 0 0 rgba(0, 0, 0, 0.88),
    -1px 0 0 rgba(0, 0, 0, 0.88),
    0 0 12px rgba(255, 223, 122, 0.34),
    0 3px 8px rgba(0, 0, 0, 0.94);
}

.pull-toast small {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.78rem, 1.7vw, 0.98rem);
  font-weight: 900;
  text-shadow: var(--hud-text-outline);
}

.smart-event-banner,
.experience-banner {
  border-color: rgba(255, 255, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 48%),
    rgba(2, 7, 14, 0.9);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.72),
    0 8px 18px rgba(0, 0, 0, 0.48);
}

.overlay-shell.has-smart-event .smart-event-banner {
  min-width: 92px;
  min-height: 28px;
  padding: 5px 14px;
  background:
    conic-gradient(from -90deg, var(--hud-gold, #ffd45f) var(--event-countdown-deg, 360deg), rgba(255, 255, 255, 0.14) 0),
    rgba(2, 7, 14, 0.92);
}

.overlay-shell.has-smart-event .smart-event-banner span,
.experience-banner span {
  color: #ffffff;
  font-size: clamp(0.78rem, 1.9vw, 1rem);
  font-weight: 1000;
  text-shadow: var(--hud-text-outline);
}

.overlay-shell.has-smart-event .smart-event-banner strong,
.experience-banner strong {
  display: block !important;
  color: rgba(255, 255, 255, 0.95);
  max-width: 280px;
  font-size: clamp(0.66rem, 1.5vw, 0.84rem);
  font-weight: 950;
  line-height: 1.05;
  text-shadow: var(--hud-text-outline);
}

.overlay-shell.smart-event-double-pull .smart-event-banner span::after,
.overlay-shell.experience-double-coins.has-smart-event .smart-event-banner span::after {
  font-size: clamp(1.35rem, 3.5vw, 1.8rem);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.95),
    1px 0 0 rgba(0, 0, 0, 0.86),
    -1px 0 0 rgba(0, 0, 0, 0.86),
    0 0 16px rgba(255, 212, 95, 0.82),
    0 3px 8px rgba(0, 0, 0, 0.94);
}

.rope {
  height: 26px;
}

@media (max-width: 700px) {
  .overlay-shell {
    width: calc(100vw - 8px);
    max-width: calc(100vw - 8px);
  }

  .scoreboard {
    width: 100%;
    grid-template-columns: minmax(78px, 0.78fr) minmax(108px, 1fr) minmax(78px, 0.78fr);
    gap: 2px;
    padding-inline: 3px;
  }

  .team-panel {
    min-height: 40px;
    padding-inline: 6px;
    padding-block: 5px 4px;
  }

  .team-label {
    font-size: clamp(0.64rem, 3.2vw, 0.76rem);
  }

  .team-panel strong,
  .team-panel strong[data-size="large"],
  .team-panel strong[data-size="huge"] {
    font-size: clamp(1rem, 4.5vw, 1.26rem);
  }

  #lead-text,
  #lead-text[data-size="small"],
  #lead-text[data-size="tiny"] {
    font-size: clamp(0.8rem, 4vw, 1rem);
  }

  .pull-toast {
    top: 62px;
    min-width: 0;
    width: auto;
    max-width: calc(100vw - 42px);
    padding: 6px 12px;
  }

  .pull-toast strong {
    font-size: clamp(0.96rem, 4.8vw, 1.22rem);
  }

  .pull-toast small {
    display: none;
  }

  .overlay-shell.has-smart-event .smart-event-banner strong,
  .experience-banner strong {
    display: none !important;
  }
}

/* Final color revert: restore the darker compact blue/red HUD treatment from
   the previous overlay while preserving the bold readability typography. */
.scoreboard {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.34));
}

.team-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 44%, transparent),
    rgba(3, 8, 15, 0.74);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 5px 12px rgba(0, 0, 0, 0.3);
}

.team-panel--blue {
  background:
    linear-gradient(90deg, rgba(8, 58, 91, 0.88), rgba(4, 12, 22, 0.66) 68%, rgba(4, 8, 14, 0.12)),
    rgba(3, 8, 15, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(74, 162, 220, 0.12),
    -5px 0 14px rgba(25, 110, 175, 0.18),
    0 6px 12px rgba(0, 0, 0, 0.32);
}

.team-panel--red {
  background:
    linear-gradient(270deg, rgba(107, 20, 43, 0.9), rgba(18, 7, 14, 0.68) 68%, rgba(4, 8, 14, 0.12)),
    rgba(3, 8, 15, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(218, 74, 108, 0.11),
    5px 0 14px rgba(180, 28, 68, 0.17),
    0 6px 12px rgba(0, 0, 0, 0.32);
}

.match-status {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 48%),
    rgba(2, 5, 10, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 5px 12px rgba(0, 0, 0, 0.22);
}

.scoreboard::before,
.scoreboard::after {
  opacity: 0.12;
}

.rope-stage__track {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 12px rgba(0, 0, 0, 0.42);
}

.rope-stage .rope {
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.26),
    inset 0 -3px 3px rgba(0, 0, 0, 0.46),
    0 4px 0 rgba(0, 0, 0, 0.48),
    0 0 11px rgba(20, 42, 64, 0.28);
}

body[data-battle-marker-style="territory"] .rope-stage::after {
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.42),
    0 0 12px rgba(42, 169, 255, 0.22),
    0 0 12px rgba(255, 58, 100, 0.18);
}

.overlay-shell.experience-double-coins .rope-stage__track,
.overlay-shell.experience-sudden-death .rope-stage__track {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 12px rgba(0, 0, 0, 0.44);
}

.overlay-shell.smart-event-double-pull .rope-stage::before,
.overlay-shell.smart-event-final-push .rope-stage::before {
  opacity: 0.48;
}

@media (max-width: 520px) {
  body {
    justify-content: flex-start !important;
    padding-inline: 4px !important;
    overflow: hidden;
  }

  .overlay-shell {
    position: fixed !important;
    top: 4px !important;
    left: 4px !important;
    width: 600px !important;
    max-width: 600px !important;
    min-width: 0 !important;
    transform: scale(0.64) !important;
    transform-origin: top left !important;
  }
}

/* Overlay presentation settings. Keep this as the final overlay layer: older
   skins above remain available to the app, while these user-controlled choices
   consistently preserve a transparent, neutral HUD around the rope. */
.overlay-shell {
  --rope-left-color: #28b8ff;
  --rope-right-color: #ff3d64;
  --overlay-scale: 1;
  flex: 0 0 auto;
  width: 760px !important;
  max-width: none !important;
  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scale: var(--overlay-scale);
  transform-origin: top center;
}

.overlay-backplate,
.arena-glow,
.arena-sheen,
.scoreboard::before,
.scoreboard::after {
  content: none !important;
  display: none !important;
}

/* Overall size is handled with the individual scale property so rope tugs,
   winner shakes, and other transform animations can continue to compose. */
body[data-overlay-size="compact"] .overlay-shell {
  --overlay-requested-scale: 0.85;
}

body[data-overlay-size="standard"] .overlay-shell {
  --overlay-requested-scale: 1;
}

body[data-overlay-size="large"] .overlay-shell {
  --overlay-requested-scale: 1.15;
}

/* Text size is intentionally independent of HUD scale. Long labels and win
   totals keep their existing fit classes rather than increasing panel height. */
body[data-overlay-text-size="small"] {
  --overlay-team-label-size: 0.66rem;
  --overlay-team-label-small-size: 0.58rem;
  --overlay-team-label-tiny-size: 0.52rem;
  --overlay-wins-size: 1.04rem;
  --overlay-wins-long-size: 0.9rem;
  --overlay-toast-primary-size: 1.22rem;
  --overlay-experience-name-size: 0.7rem;
  --overlay-experience-detail-size: 0.62rem;
  --overlay-countdown-size: 0.9rem;
}

body[data-overlay-text-size="medium"] {
  --overlay-team-label-size: 0.74rem;
  --overlay-team-label-small-size: 0.64rem;
  --overlay-team-label-tiny-size: 0.56rem;
  --overlay-wins-size: 1.2rem;
  --overlay-wins-long-size: 0.96rem;
  --overlay-toast-primary-size: 1.42rem;
  --overlay-experience-name-size: 0.82rem;
  --overlay-experience-detail-size: 0.7rem;
  --overlay-countdown-size: 1.02rem;
}

body[data-overlay-text-size="large"] {
  --overlay-team-label-size: 0.82rem;
  --overlay-team-label-small-size: 0.7rem;
  --overlay-team-label-tiny-size: 0.6rem;
  --overlay-wins-size: 1.38rem;
  --overlay-wins-long-size: 1.02rem;
  --overlay-toast-primary-size: 1.64rem;
  --overlay-experience-name-size: 0.94rem;
  --overlay-experience-detail-size: 0.8rem;
  --overlay-countdown-size: 1.16rem;
}

body[data-overlay-text-size] .team-label {
  font-size: var(--overlay-team-label-size) !important;
}

body[data-overlay-text-size] .team-label[data-size="small"] {
  font-size: var(--overlay-team-label-small-size) !important;
}

body[data-overlay-text-size] .team-label[data-size="tiny"] {
  font-size: var(--overlay-team-label-tiny-size) !important;
}

body[data-overlay-text-size] .team-panel strong {
  font-size: var(--overlay-wins-size) !important;
}

body[data-overlay-text-size] .team-panel strong[data-size="large"],
body[data-overlay-text-size] .team-panel strong[data-size="huge"] {
  font-size: var(--overlay-wins-long-size) !important;
}

body[data-overlay-text-size] .pull-toast strong {
  font-size: var(--overlay-toast-primary-size) !important;
}

body[data-overlay-text-size] .overlay-shell.has-smart-event .smart-event-banner span,
body[data-overlay-text-size] .experience-banner span {
  font-size: var(--overlay-experience-name-size) !important;
}

body[data-overlay-text-size] .overlay-shell.has-smart-event .smart-event-banner strong,
body[data-overlay-text-size] .experience-banner strong {
  font-size: var(--overlay-experience-detail-size) !important;
}

body[data-overlay-text-size] .winner-message {
  font-size: var(--overlay-countdown-size) !important;
}

body[data-overlay-text-size] .smart-event-banner[hidden],
body[data-overlay-text-size] .experience-banner[hidden] {
  display: none !important;
}

body[data-overlay-text-size] .overlay-shell.has-smart-event .smart-event-banner:not([hidden]),
body[data-overlay-text-size] .overlay-shell.has-experience-mode .experience-banner:not([hidden]) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: min(420px, calc(100vw - 16px));
}

body[data-overlay-text-size] .overlay-shell.has-smart-event .smart-event-banner strong,
body[data-overlay-text-size] .overlay-shell.has-experience-mode .experience-banner strong {
  display: block !important;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Panels are always neutral. Team colors are limited to a short accent rule,
   with opacity adjusted by the selected readability treatment. */
.match-status {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 48%),
    rgba(2, 5, 10, 0.5) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 5px 12px rgba(0, 0, 0, 0.24) !important;
}

body[data-team-panel-background] .team-panel,
body[data-team-panel-background] .team-panel--blue,
body[data-team-panel-background] .team-panel--red {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 46%),
    rgba(3, 8, 15, 0.74) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 5px 12px rgba(0, 0, 0, 0.3) !important;
  filter: none;
}

body[data-team-panel-background="off"] .team-panel,
body[data-team-panel-background="off"] .team-panel--blue,
body[data-team-panel-background="off"] .team-panel--red {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-team-panel-background="solid"] .team-panel,
body[data-team-panel-background="solid"] .team-panel--blue,
body[data-team-panel-background="solid"] .team-panel--red {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), transparent 42%),
    rgba(2, 5, 10, 0.94) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 7px 16px rgba(0, 0, 0, 0.5) !important;
}

body[data-team-panel-background] .team-panel::after {
  content: none !important;
  display: none !important;
}

body[data-team-panel-background] .team-panel::before {
  content: "" !important;
  display: block !important;
  top: auto !important;
  bottom: 0 !important;
  width: 42% !important;
  height: 2px !important;
  opacity: 0.52;
  box-shadow: none !important;
}

body[data-team-panel-background="off"] .team-panel::before {
  opacity: 0.34;
}

body[data-team-panel-background="solid"] .team-panel::before {
  opacity: 0.68;
}

body[data-team-panel-background] .team-panel--blue::before {
  right: auto !important;
  left: 0 !important;
  color: var(--rope-left-color) !important;
  background: linear-gradient(90deg, var(--rope-left-color), transparent) !important;
}

body[data-team-panel-background] .team-panel--red::before {
  right: 0 !important;
  left: auto !important;
  color: var(--rope-right-color) !important;
  background: linear-gradient(270deg, var(--rope-right-color), transparent) !important;
}

body[data-team-panel-background][data-leader="blue"] .team-panel--blue,
body[data-team-panel-background][data-tug="blue"] .team-panel--blue,
body[data-team-panel-background][data-lead-change="blue"] .team-panel--blue,
body[data-team-panel-background][data-leader="red"] .team-panel--red,
body[data-team-panel-background][data-tug="red"] .team-panel--red,
body[data-team-panel-background][data-lead-change="red"] .team-panel--red {
  border-color: rgba(255, 255, 255, 0.12) !important;
  filter: none !important;
}

body[data-team-panel-background="off"][data-leader] .team-panel,
body[data-team-panel-background="off"][data-tug] .team-panel,
body[data-team-panel-background="off"][data-lead-change] .team-panel {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-team-panel-background] .team-panel.effect-glow {
  animation: presentation-panel-pulse var(--effect-duration, 650ms) ease-out !important;
}

body[data-leader="blue"] .team-panel--blue strong,
body[data-tug="blue"] .team-panel--blue strong,
body[data-leader="red"] .team-panel--red strong,
body[data-tug="red"] .team-panel--red strong {
  filter: none !important;
}

body[data-winner="blue"] .winner-message,
body[data-winner="red"] .winner-message {
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.42) !important;
}

body[data-team-panel-background] .team-panel--blue .team-label,
body[data-team-panel-background] .team-panel--red .team-label {
  color: #ffffff !important;
}

.pull-toast,
.pull-toast[data-effect-kind="boost"],
.pull-toast[data-effect-kind="reverse"],
.pull-toast[data-effect-kind="final"] {
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 45%),
    rgba(3, 7, 13, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 10px 24px rgba(0, 0, 0, 0.62) !important;
}

.pull-toast strong,
.pull-toast small {
  color: #ffffff !important;
}

body[data-winner="blue"] .victory-burst i,
.particle-effect[data-team="blue"] i {
  color: var(--rope-left-color) !important;
  background: var(--rope-left-color) !important;
}

body[data-winner="red"] .victory-burst i,
.particle-effect[data-team="red"] i {
  color: var(--rope-right-color) !important;
  background: var(--rope-right-color) !important;
}

/* The track is only a neutral support shadow. Vivid theme color lives on the
   rope, its end caps, its seam, and brief score-pull effects. */
.rope-stage__track {
  border-color: rgba(255, 255, 255, 0.06) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(5, 8, 13, 0.62)),
    rgba(2, 5, 10, 0.5) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 0 12px rgba(0, 0, 0, 0.44) !important;
}

.rope-stage__track::before,
.rope-stage__track::after {
  content: none !important;
  display: none !important;
}

body[data-battle-marker-style="territory"] .rope-stage .rope {
  background:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.34) 0 3px, rgba(0, 0, 0, 0.3) 3px 7px, rgba(255, 255, 255, 0.19) 7px 11px, rgba(0, 0, 0, 0.34) 11px 15px),
    linear-gradient(
      90deg,
      var(--rope-left-color) 0%,
      var(--rope-left-color) calc(var(--territory-position) - 5%),
      color-mix(in srgb, var(--rope-left-color) 24%, white) calc(var(--territory-position) - 0.6%),
      #ffffff var(--territory-position),
      color-mix(in srgb, var(--rope-right-color) 24%, white) calc(var(--territory-position) + 0.6%),
      var(--rope-right-color) calc(var(--territory-position) + 5%),
      var(--rope-right-color) 100%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 38%, rgba(0, 0, 0, 0.44)) !important;
  background-blend-mode: overlay, normal, overlay !important;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.28),
    inset 0 -3px 3px rgba(0, 0, 0, 0.48),
    0 4px 0 rgba(0, 0, 0, 0.5),
    0 0 11px rgba(0, 0, 0, 0.38) !important;
}

body[data-battle-marker-style="territory"] .rope-stage .rope::before,
body[data-neutral-rope-style="fixedSplit"]:not([data-battle-marker-style="territory"]) .rope-stage .rope::before {
  border-color: rgba(255, 255, 255, 0.34) !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.92), var(--rope-left-color) 48%, color-mix(in srgb, var(--rope-left-color) 68%, black)) !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--rope-left-color) 48%, transparent) !important;
}

body[data-battle-marker-style="territory"] .rope-stage .rope::after,
body[data-neutral-rope-style="fixedSplit"]:not([data-battle-marker-style="territory"]) .rope-stage .rope::after {
  border-color: rgba(255, 255, 255, 0.34) !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.92), var(--rope-right-color) 48%, color-mix(in srgb, var(--rope-right-color) 68%, black)) !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--rope-right-color) 48%, transparent) !important;
}

body[data-battle-marker-style="territory"] .rope-stage::after {
  display: block !important;
  left: var(--territory-position) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.52),
    -6px 0 11px color-mix(in srgb, var(--rope-left-color) 40%, transparent),
    6px 0 11px color-mix(in srgb, var(--rope-right-color) 40%, transparent) !important;
}

body:not([data-battle-marker-style="territory"]) .rope-stage::after {
  content: none !important;
  display: none !important;
}

body[data-neutral-rope-style="natural"]:not([data-battle-marker-style="territory"]) .rope-stage .rope {
  border-color: rgba(255, 234, 191, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 230, 0.42), transparent 30% 70%, rgba(0, 0, 0, 0.38)),
    repeating-linear-gradient(118deg, #4b2b12 0 7px, #ddb069 7px 14px, #784820 14px 21px, #2d1a0c 21px 28px) !important;
  background-blend-mode: normal !important;
}

body[data-neutral-rope-style="natural"]:not([data-battle-marker-style="territory"]) .rope-stage .rope::before,
body[data-neutral-rope-style="natural"]:not([data-battle-marker-style="territory"]) .rope-stage .rope::after {
  border-color: rgba(255, 235, 198, 0.34) !important;
  background: radial-gradient(circle at 32% 28%, #f1d6a0, #96602c 48%, #36200e) !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.54) !important;
}

body[data-neutral-rope-style="dark"]:not([data-battle-marker-style="territory"]) .rope-stage .rope {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 34% 68%, rgba(0, 0, 0, 0.55)),
    repeating-linear-gradient(118deg, #111720 0 7px, #3b4654 7px 14px, #202833 14px 21px, #090d13 21px 28px) !important;
  background-blend-mode: normal !important;
}

body[data-neutral-rope-style="dark"]:not([data-battle-marker-style="territory"]) .rope-stage .rope::before,
body[data-neutral-rope-style="dark"]:not([data-battle-marker-style="territory"]) .rope-stage .rope::after {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: radial-gradient(circle at 32% 28%, #8f9aaa, #303946 48%, #090d13) !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.62) !important;
}

body[data-neutral-rope-style="fixedSplit"]:not([data-battle-marker-style="territory"]) .rope-stage .rope {
  border-color: rgba(255, 255, 255, 0.26) !important;
  background:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.32) 0 3px, rgba(0, 0, 0, 0.3) 3px 7px, rgba(255, 255, 255, 0.17) 7px 11px, rgba(0, 0, 0, 0.34) 11px 15px),
    linear-gradient(90deg, var(--rope-left-color) 0 49.55%, #ffffff 49.8% 50.2%, var(--rope-right-color) 50.45% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 38%, rgba(0, 0, 0, 0.44)) !important;
  background-blend-mode: overlay, normal, overlay !important;
}

body[data-tug="blue"] .rope-stage {
  --impact-color: color-mix(in srgb, var(--rope-left-color) 62%, transparent);
}

body[data-tug="red"] .rope-stage {
  --impact-color: color-mix(in srgb, var(--rope-right-color) 62%, transparent);
}

body[data-battle-marker-style="territory"][data-tug] .rope-stage::before {
  background: radial-gradient(circle at var(--territory-position) 50%, var(--impact-color), transparent 36%) !important;
}

body:not([data-battle-marker-style="territory"])[data-tug] .rope-stage::before {
  background: radial-gradient(circle at 50% 50%, var(--impact-color), transparent 36%) !important;
}

@keyframes presentation-panel-pulse {
  0%, 100% { filter: brightness(1); }
  42% { filter: brightness(1.08); }
}

@media (max-width: 700px) {
  body[data-overlay-text-size] .overlay-shell.has-smart-event .smart-event-banner:not([hidden]),
  body[data-overlay-text-size] .overlay-shell.has-experience-mode .experience-banner:not([hidden]) {
    max-width: 430px;
  }

  body[data-overlay-text-size] .overlay-shell.has-smart-event .smart-event-banner strong,
  body[data-overlay-text-size] .overlay-shell.has-experience-mode .experience-banner strong {
    display: block !important;
  }
}

@media (max-width: 520px) {
  .overlay-shell {
    width: 600px !important;
    max-width: 600px !important;
    transform: none !important;
    scale: var(--overlay-scale) !important;
    transform-origin: top left !important;
  }
}

/* Final advanced appearance cascade. */
.overlay-shell { isolation: isolate; }
.overlay-shell::before { content: none !important; position: absolute; z-index: -1; inset: -8px -10px; border-radius: 22px; pointer-events: none; }
body[data-overlay-backdrop="subtle"] .overlay-shell::before { content: "" !important; background: rgba(0,0,0,.22) !important; }
body[data-overlay-backdrop="custom"] .overlay-shell::before { content: "" !important; background: var(--overlay-backdrop-background) !important; }
body[data-left-panel-style="off"] .team-panel--blue,
body[data-right-panel-style="off"] .team-panel--red,
body[data-center-panel-style="off"] .match-status,
body[data-center-panel-style="off"] .pull-toast { border-color: transparent !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
body:not([data-left-panel-style="off"]) .team-panel--blue { background: linear-gradient(180deg,rgba(255,255,255,.055),transparent 48%),var(--left-panel-background) !important; }
body:not([data-right-panel-style="off"]) .team-panel--red { background: linear-gradient(180deg,rgba(255,255,255,.055),transparent 48%),var(--right-panel-background) !important; }
body:not([data-center-panel-style="off"]) .match-status,
body:not([data-center-panel-style="off"]) .pull-toast { background: linear-gradient(180deg,rgba(255,255,255,.05),transparent 48%),var(--center-panel-background) !important; }
body[data-left-panel-style="solid"] .team-panel--blue,
body[data-left-panel-style="custom"] .team-panel--blue,
body[data-right-panel-style="solid"] .team-panel--red,
body[data-right-panel-style="custom"] .team-panel--red,
body[data-center-panel-style="solid"] .match-status,
body[data-center-panel-style="custom"] .match-status,
body[data-center-panel-style="solid"] .pull-toast,
body[data-center-panel-style="custom"] .pull-toast { border-color: rgba(255,255,255,.17) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05),0 7px 16px rgba(0,0,0,.48) !important; }
body[data-match-left-accent="true"] .team-panel--blue::before { color: var(--left-panel-accent) !important; background: linear-gradient(90deg,var(--left-panel-accent),transparent) !important; }
body[data-match-right-accent="true"] .team-panel--red::before { color: var(--right-panel-accent) !important; background: linear-gradient(270deg,var(--right-panel-accent),transparent) !important; }
body[data-match-left-accent="false"] .team-panel--blue::before,
body[data-match-right-accent="false"] .team-panel--red::before { opacity: 0 !important; }
.team-panel--blue,.team-panel--blue .team-label,.team-panel--blue strong { color: var(--left-text-color,#fff) !important; }
.team-panel--red,.team-panel--red .team-label,.team-panel--red strong { color: var(--right-text-color,#fff) !important; }
.match-status,.match-status strong,.winner-message,.pull-toast,.pull-toast strong,.smart-event-banner strong,.experience-banner strong { color: var(--center-text-color,#fff) !important; }
.match-status span:last-child,.pull-toast small,.smart-event-banner span,.experience-banner span { color: var(--secondary-text-color,#e6edf5) !important; }
.team-panel,.team-panel strong,.team-label,.match-status,.match-status strong,.match-status span,.winner-message,.pull-toast,.pull-toast strong,.pull-toast small,.smart-event-banner span,.smart-event-banner strong,.experience-banner span,.experience-banner strong { text-shadow: var(--appearance-text-effects,0 2px 4px rgba(0,0,0,.78)) !important; }
body[data-appearance-preset="neon"] .rope-stage .rope { filter: saturate(1.12) brightness(1.05); }

/* Compact Experience status hierarchy: pull result, temporary Experience,
   Base Experience, scoreboard, then rope. Each item remains in normal flow. */
.mode-stack,
.streamer-hud-body[data-hud-size="small"] .mode-stack {
  position: relative !important;
  top: auto !important;
  z-index: 12;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px !important;
  min-height: 0 !important;
  margin: 0 0 4px !important;
  pointer-events: none;
}

.mode-stack .pull-toast,
.mode-stack .pull-toast.pull-toast--above {
  position: static !important;
  inset: auto !important;
  width: max-content;
  min-width: 0 !important;
  max-width: min(560px, calc(100vw - 16px));
  margin: 0 0 2px;
  transform: none !important;
}

.mode-stack .pull-toast.pull-toast--show {
  animation: compact-pull-toast 2600ms ease-out forwards !important;
}

.smart-event-banner,
.experience-banner,
body[data-overlay-text-size] .overlay-shell.has-smart-event .smart-event-banner:not([hidden]),
body[data-overlay-text-size] .overlay-shell.has-experience-mode .experience-banner:not([hidden]) {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: max-content !important;
  min-height: 0 !important;
  align-items: center;
  justify-content: center;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 2px 7px !important;
  overflow: visible !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 6px !important;
  background: rgba(3,8,14,.76) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.38) !important;
}

.smart-event-banner[hidden],
.experience-banner[hidden],
body[data-overlay-text-size] .smart-event-banner[hidden],
body[data-overlay-text-size] .experience-banner[hidden] {
  display: none !important;
}

.overlay-shell.has-smart-event .smart-event-banner span,
.overlay-shell.has-experience-mode .experience-banner span,
body[data-overlay-text-size] .overlay-shell.has-smart-event .smart-event-banner span,
body[data-overlay-text-size] .overlay-shell.has-experience-mode .experience-banner span {
  display: block !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  color: #fff !important;
  font-size: .62rem !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: .045em !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.overlay-shell.has-experience-mode .experience-banner span {
  color: rgba(255,255,255,.86) !important;
  font-size: .56rem !important;
}

.overlay-shell.has-smart-event .smart-event-banner strong,
.overlay-shell.has-experience-mode .experience-banner strong {
  display: none !important;
}

.overlay-shell.smart-event-double-pull .smart-event-banner span,
.overlay-shell.experience-double-coins.has-smart-event .smart-event-banner span {
  font-size: .62rem !important;
}

.overlay-shell.smart-event-double-pull .smart-event-banner span::after,
.overlay-shell.experience-double-coins.has-smart-event .smart-event-banner span::after {
  content: none !important;
  display: none !important;
}

@keyframes compact-pull-toast {
  0%, 82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-3px); }
}

@media (max-width: 520px) {
  .overlay-shell.has-smart-event .smart-event-banner span,
  body[data-overlay-text-size] .overlay-shell.has-smart-event .smart-event-banner span {
    font-size: .54rem !important;
    letter-spacing: .025em !important;
  }
}