/* Compact Live Bar is presentation-only. Every selector is layout-scoped so
   the existing Classic overlay remains the untouched fallback. */
body[data-overlay-layout="compactBar"] {
  /* Overlay Size resizes the bar itself rather than scaling the rendered
     result. Classic has to scale, because its shell is a fixed 760px that must
     shrink to fit; Compact's width is already a share of the viewport, so
     scaling it only ever cost text crispness — and, once the fit clamp bit,
     silently collapsed all three presets onto the same rendered size. */
  --compact-size-scale: 1;
  --compact-bar-base-width: min(82vw, 760px);
  --compact-bar-base-height: 88px;
  --compact-bar-width: calc(var(--compact-bar-base-width) * var(--compact-size-scale));
  --compact-bar-height: calc(var(--compact-bar-base-height) * var(--compact-size-scale));
  /* Internal proportions, so every preset gets the same composition rather
     than one absolute geometry that only holds at a single bar height. */
  --compact-label-band-ratio: .58;
  --compact-label-band: calc(var(--compact-label-band-ratio) * 100%);
  --compact-marker-lane-height: calc(var(--compact-bar-height) * (1 - var(--compact-label-band-ratio)));
  --compact-marker-size: clamp(18px, calc(var(--compact-marker-lane-height) * .92), 46px);
  --compact-bar-radius: 15px;
  --compact-bar-top: var(--overlay-top-offset, 0px);
  /* The band is two lines of type. A grid item's min-height is auto, so a
     label taller than its share does not get clipped — it pushes the panel
     past the band and down into the marker lane. Ceilings tied to the band
     keep the wording inside it at every preset, rather than only at the one
     bar height the type sizes happened to suit. */
  --compact-label-line-share: .55;
  --compact-score-line-share: .32;
  --compact-band-height: calc(var(--compact-bar-height) * var(--compact-label-band-ratio));
  --compact-label-font-ceiling: calc(var(--compact-band-height) * var(--compact-label-line-share) / 1.05);
  --compact-score-font-ceiling: calc(var(--compact-band-height) * var(--compact-score-line-share) / 1.05);
  --compact-team-name-font-size: min(calc(clamp(.94rem, 2.65vw, 1.38rem) * var(--compact-size-scale)), var(--compact-label-font-ceiling));
  display: block !important;
  padding: 0 !important;
}

/* With no score line the name may use almost the whole band. */
body[data-overlay-layout="compactBar"][data-compact-show-score="off"] { --compact-label-line-share: .86; }

body[data-overlay-layout="compactBar"][data-overlay-size="compact"] { --compact-size-scale: .85; }
body[data-overlay-layout="compactBar"][data-overlay-size="standard"] { --compact-size-scale: 1; }
body[data-overlay-layout="compactBar"][data-overlay-size="large"] { --compact-size-scale: 1.15; }

html:has(body[data-overlay-layout="compactBar"]),
body[data-overlay-layout="compactBar"] { background: transparent !important; }
body[data-overlay-layout="compactBar"] > :not(.overlay-shell):not(.compact-experience-strip):not(.compact-points-needed) { background: transparent !important; }
/* The requirement line sits above the bar, so the bar starts below it. */
body[data-overlay-layout="compactBar"][data-compact-goal-position="top"] { --compact-bar-top: calc(var(--overlay-top-offset, 0px) + 58px); }

body[data-overlay-layout="compactBar"][data-compact-bar-width="compact"] { --compact-bar-base-width: min(64vw, 600px); }
body[data-overlay-layout="compactBar"][data-compact-bar-width="wide"] { --compact-bar-base-width: min(92vw, 920px); }
/* Compact Bar Height picks the base; Overlay Size then scales it, so the two
   controls compose instead of one overwriting the other. */
body[data-overlay-layout="compactBar"][data-compact-bar-height="slim"] { --compact-bar-base-height: 72px; }
body[data-overlay-layout="compactBar"][data-compact-bar-height="thick"] { --compact-bar-base-height: 104px; }
body[data-overlay-layout="compactBar"][data-compact-team-name-size="small"] { --compact-team-name-font-size: min(calc(clamp(.76rem, 1.95vw, 1rem) * var(--compact-size-scale)), var(--compact-label-font-ceiling)); }
body[data-overlay-layout="compactBar"][data-compact-team-name-size="medium"] { --compact-team-name-font-size: min(calc(clamp(.94rem, 2.65vw, 1.38rem) * var(--compact-size-scale)), var(--compact-label-font-ceiling)); }
/* Large intentionally uses the available vertical room for short labels such
   as RESET, CATS, and DOGS. OverlayView marks longer names small/tiny first.
   The taller bar is what makes the bigger type possible: the ceiling is a
   share of that band, so Large is genuinely larger without leaving it. */
body[data-overlay-layout="compactBar"][data-compact-team-name-size="large"] {
  --compact-team-name-font-size: min(calc(clamp(2.1rem, 8.4vw, 4.5rem) * var(--compact-size-scale)), var(--compact-label-font-ceiling));
  --compact-bar-base-height: 126px;
}
body[data-overlay-layout="compactBar"][data-compact-corner-style="square"] { --compact-bar-radius: 3px; }
body[data-overlay-layout="compactBar"][data-compact-corner-style="pill"] { --compact-bar-radius: 999px; }

body[data-overlay-layout="compactBar"] .overlay-shell {
  position: fixed !important;
  z-index: 10;
  top: var(--compact-bar-top) !important;
  left: 0 !important;
  right: 0 !important;
  margin-inline: auto !important;
  width: var(--compact-bar-width) !important;
  height: var(--compact-bar-height) !important;
  min-height: 0 !important;
  max-height: var(--compact-bar-height) !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--overlay-border-color) 42%, transparent) !important;
  border-radius: var(--compact-bar-radius) !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: 0 7px 22px color-mix(in srgb, var(--overlay-shadow-color) 48%, transparent), 0 0 18px color-mix(in srgb, var(--overlay-glow-color) 24%, transparent), inset 0 0 0 1px rgba(0,0,0,.34) !important;
  /* OverlayView pins this to 1 for Compact and only backs off for a browser
     source shorter than the bar itself, so team names and scores are normally
     rasterised at their own font size on an untransformed parent. */
  scale: var(--overlay-scale) !important;
  transform: none !important;
  transform-origin: top center !important;
}

body[data-overlay-layout="compactBar"] .overlay-backplate,
body[data-overlay-layout="compactBar"] .milestone,
body[data-overlay-layout="compactBar"] .goal-marker,
body[data-overlay-layout="compactBar"] .battle-kicker,
body[data-overlay-layout="compactBar"] #lead-text,
body[data-overlay-layout="compactBar"] #goal-text,
body[data-overlay-layout="compactBar"] .victory-burst {
  display: none !important;
}

body[data-overlay-layout="compactBar"] .rope-stage {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  transform: none !important;
}

body[data-overlay-layout="compactBar"] .rope-stage__track {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--neutral-track-color) 78%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.5) !important;
}

body[data-overlay-layout="compactBar"] .rope-stage .rope {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[data-overlay-layout="compactBar"][data-progress-fill="territory"] .rope-stage .rope {
  background: linear-gradient(90deg,
    var(--rope-left-color) 0 var(--territory-position),
    var(--rope-right-color) var(--territory-position) 100%) !important;
  background-blend-mode: normal !important;
}

/* Moving Marker keeps creator team colors stable at 50/50. */
body[data-overlay-layout="compactBar"][data-progress-fill="marker"] .rope-stage .rope {
  background: linear-gradient(90deg,
    var(--rope-left-color) 0 50%,
    var(--rope-right-color) 50% 100%) !important;
  background-blend-mode: normal !important;
}

body[data-overlay-layout="compactBar"] .rope-stage .rope::before,
body[data-overlay-layout="compactBar"] .rope-stage .rope::after { content: none !important; display: none !important; }

body[data-overlay-layout="compactBar"][data-progress-fill="territory"] .rope-stage::after {
  z-index: 4 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--divider-color) !important;
}

body[data-overlay-layout="compactBar"] .scoreboard {
  position: absolute !important;
  z-index: 5 !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr minmax(70px, 18%) 1fr !important;
  gap: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

body[data-overlay-layout="compactBar"] .team-panel {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 1px !important;
  min-width: 0 !important;
  /* Grid items floor at their content height unless told otherwise, which is
     how the wording escaped the band; the ceilings above keep the type inside
     it, and this makes the band itself authoritative. */
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 var(--compact-pad-right, clamp(10px,2vw,22px)) 0 var(--compact-pad-left, clamp(10px,2vw,22px)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  /* The whole grid column is this panel's designer target, not just its
     text - without this, its padding area (most of the visible column)
     falls through to the rope beneath instead of selecting left/right-panel. */
  pointer-events: auto !important;
}

body[data-overlay-layout="compactBar"] .team-panel--blue { align-items: flex-start !important; text-align: left !important; }
body[data-overlay-layout="compactBar"] .team-panel--red { align-items: flex-end !important; text-align: right !important; }
body[data-overlay-layout="compactBar"][data-left-panel-style] .team-panel--blue,
body[data-overlay-layout="compactBar"][data-right-panel-style] .team-panel--red {
  background: transparent !important;
}
body[data-overlay-layout="compactBar"] .team-panel[data-compact-content-side="left"] { align-items: flex-start !important; text-align: left !important; }
body[data-overlay-layout="compactBar"] .team-panel[data-compact-content-side="right"] { align-items: flex-end !important; text-align: right !important; }
body[data-overlay-layout="compactBar"] .team-panel::before,
body[data-overlay-layout="compactBar"] .team-panel::after { content: none !important; display: none !important; }

body[data-overlay-layout="compactBar"] .team-label,
body[data-overlay-layout="compactBar"] .team-panel strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.05 !important;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* .scoreboard is pointer-events:none so empty grid space lets designer
     clicks pass through to the rope beneath; without this override that
     also swallows clicks on the team name/score text itself, since
     pointer-events is inherited. */
  pointer-events: auto !important;
}

body[data-overlay-layout="compactBar"] .team-label {
  width: 100% !important;
  min-width: 0 !important;
  font-size: var(--compact-team-name-font-size) !important;
  font-weight: 950 !important;
  letter-spacing: .045em !important;
}
body[data-overlay-layout="compactBar"][data-compact-team-name-size="large"] .team-label:not([data-size="small"]):not([data-size="tiny"]) {
  letter-spacing: .07em !important;
}
body[data-overlay-layout="compactBar"] .team-label[data-size="small"] { font-size: min(var(--compact-team-name-font-size), 1.35rem) !important; }
body[data-overlay-layout="compactBar"] .team-label[data-size="tiny"] { font-size: min(var(--compact-team-name-font-size), 1.04rem) !important; }
body[data-overlay-layout="compactBar"] .team-panel strong { font-size: min(calc(clamp(.72rem,1.8vw,1.1rem) * var(--compact-size-scale)), var(--compact-score-font-ceiling)) !important; font-weight: 900 !important; opacity: 1 !important; }

/* The team wording renders with no outline or shadow, always.
   Text Outline and Text Shadow exist because Classic's names can sit over
   whatever the streamer is filming, and white type on an unknown backdrop
   needs a hard edge. Compact's names never do: the rope fill spans the whole
   bar in an opaque team colour, so the effect protects nothing here and costs
   legibility — four 1px black offsets plus a 4px blur around 22px white type
   fill the counters of B, E and A, and the word reads grey and furry rather
   than white. Measured against the rendered pixels, not judged by eye.

   Deliberately not conditional on the Text Outline / Text Shadow settings:
   those still drive Classic, and the requirement line above the bar keeps its
   own outline (see [data-points-needed-outline]) because that one is over the
   video, outside the fill. */
body[data-overlay-layout="compactBar"] .team-label,
body[data-overlay-layout="compactBar"] .team-panel strong {
  text-shadow: none !important;
}
body[data-overlay-layout="compactBar"][data-compact-show-score="off"] .team-panel strong { display: none !important; }

/* Keep names clear of a marker that approaches their half. OverlayView sets
   these marker zones from the same authoritative progress position. */

body[data-overlay-layout="compactBar"] .match-status {
  position: relative !important;
  z-index: 6 !important;
  /* Explicitly the centre column.
     The label zones below take both .team-panel elements out of flow with
     position:absolute, which left .match-status as the only in-flow grid item —
     so it was auto-placed into column 1 and sat at the far left, 310.78px wide
     instead of the centre track's 136.44px. The toast's inset below is measured
     from this box, so from column 1 it spanned 1726px on a 760px bar and hung
     706px past the left edge and 259px past the right, painting its opaque
     background outside the overlay. From the centre column the same inset
     resolves to the bar's own width, which is what it was written for. */
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  /* Inherits pointer-events:none from .scoreboard; without this override the
     Center Status designer target is unreachable by click (same bug class as
     the team-label/score fix above). The marker sits above this at a higher
     z-index, so it still wins the hit test where they overlap. */
  pointer-events: auto !important;
}

body[data-overlay-layout="compactBar"] .match-status .pull-toast,
body[data-overlay-layout="compactBar"] .match-status .pull-toast.pull-toast--above {
  position: absolute !important;
  z-index: 12 !important;
  inset: 3px calc(-227% - 2px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 4px 12px !important;
  border-radius: calc(var(--compact-bar-radius) - 3px) !important;
  overflow: hidden !important;
}
body[data-overlay-layout="compactBar"] .pull-toast[hidden] { display: none !important; background: transparent !important; }

.compact-experience-strip[hidden],
body:not([data-overlay-layout="compactBar"]) .compact-experience-strip { display: none !important; }
body[data-overlay-layout="compactBar"] .compact-experience-strip {
  position: fixed;
  z-index: 12;
  top: calc(var(--compact-bar-top) + var(--compact-bar-height, 68px) + 5px);
  left: 0;
  width: var(--compact-bar-width);
  min-height: 0;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--event-accent-color) 52%, transparent);
  border-radius: 7px;
  color: #fff;
  background: color-mix(in srgb, #03070d 72%, transparent);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--overlay-shadow-color) 24%, transparent);
  transform: none;
  text-align: center;
  pointer-events: none;
}
body[data-overlay-layout="compactBar"] .compact-experience-strip strong,
body[data-overlay-layout="compactBar"] .compact-experience-strip span { display: block; overflow: visible; white-space: normal; text-overflow: clip; }
body[data-overlay-layout="compactBar"] .compact-experience-strip strong { font-size: clamp(.55rem, 1.4vw, .78rem); font-weight: 900; }
body[data-overlay-layout="compactBar"] .compact-experience-strip span { font-size: clamp(.48rem, 1.1vw, .68rem); opacity: .86; }

body[data-active-experience][data-experience-color-effects="accent"] .overlay-shell,
body[data-active-experience][data-experience-color-effects="accent"] .compact-experience-strip { --event-accent-color: #ffd66b; --divider-color: #ffd66b; --marker-border-color: #ffd66b; }
body[data-active-experience="criticalHit"] .overlay-shell { --event-accent-color: #ff6b8b; }
body[data-active-experience="chainBonus"] .overlay-shell { --event-accent-color: #a884ff; }
body[data-active-experience="luckySide"] .overlay-shell { --event-accent-color: #65e89b; }
body[data-active-experience][data-experience-color-effects="full"] .overlay-shell { --event-accent-color: #ffd66b; --overlay-border-color: #ffd66b; --divider-color: #ffe79a; --marker-border-color: #ffd66b; filter: saturate(1.12) brightness(1.04); }
body[data-overlay-layout="compactBar"] .pull-toast strong { font-size: clamp(.78rem,2vw,1.15rem) !important; }
body[data-overlay-layout="compactBar"] .pull-toast small { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.58rem,1.35vw,.78rem) !important; }

/* Critical Hit / Chain Bonus / Lucky Side: Classic keys these off
   .overlay-shell's transform/background/box-shadow, all locked !important
   above for bar positioning. Retargeted to .scoreboard and .rope-stage .rope,
   neither of which is position-critical here, so every Experience keeps its
   real visual identity in Compact instead of silently losing it. */
body[data-overlay-layout="compactBar"][data-critical-hit-impact]:not([data-idle-style-preset="still"]):not([data-idle-style-preset="subtle"]) .scoreboard {
  /* Only .scoreboard, not .rope-stage .rope: the rope already carries an
     !important idle-rope-tension animation, which would win over a non-
     !important shake here and silently swallow it. */
  animation: compact-critical-hit-shake 380ms ease-out both;
}
@keyframes compact-critical-hit-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

body[data-overlay-layout="compactBar"] .overlay-shell.experience-chain-bonus .scoreboard {
  box-shadow: 0 0 calc(8px + 22px * var(--chain-energy, 0)) color-mix(in srgb, var(--event-accent-color, #a884ff) calc(30% + 40% * var(--chain-energy, 0)), transparent);
  transition: box-shadow 400ms ease;
}
body[data-overlay-layout="compactBar"][data-chain-release] .overlay-shell.experience-chain-bonus .scoreboard {
  animation: compact-chain-release 900ms cubic-bezier(.2,.9,.3,1) both;
}
@keyframes compact-chain-release {
  0% { box-shadow: 0 0 30px color-mix(in srgb, var(--event-accent-color, #a884ff) 70%, transparent); }
  100% { box-shadow: 0 0 8px color-mix(in srgb, var(--event-accent-color, #a884ff) 30%, transparent); }
}

body[data-overlay-layout="compactBar"] .overlay-shell[data-lucky-side-team] .scoreboard {
  background: linear-gradient(var(--lucky-side-angle, 90deg), color-mix(in srgb, var(--event-accent-color, #65e89b) 16%, transparent), transparent 55%) !important;
}
body[data-overlay-layout="compactBar"][data-idle-style-preset]:not([data-idle-style-preset="still"]) .overlay-shell[data-lucky-side-team]:not([data-tug]) .flag {
  transform: translate(-50%,-50%) rotate(var(--lucky-side-lean, 0deg)) !important;
  transition: transform 500ms ease;
}
body[data-overlay-layout="compactBar"][data-idle-style-preset]:not([data-idle-style-preset="still"]) .overlay-shell[data-lucky-side-team]:not([data-tug]) .flag[data-edge="red"] {
  transform: translate(0,-50%) rotate(var(--lucky-side-lean, 0deg)) !important;
}
body[data-overlay-layout="compactBar"][data-idle-style-preset]:not([data-idle-style-preset="still"]) .overlay-shell[data-lucky-side-team]:not([data-tug]) .flag[data-edge="blue"] {
  transform: translate(-100%,-50%) rotate(var(--lucky-side-lean, 0deg)) !important;
}

/* The marker centres in its own lane below the label band, and is sized from
   the lane rather than the whole bar, so it stays inside it at every preset. */
body[data-overlay-layout="compactBar"] .flag {
  z-index: 8 !important;
  top: calc(50% + var(--compact-label-band-ratio) * 50%) !important;
  width: var(--compact-marker-size) !important;
  height: var(--compact-marker-size) !important;
  transform: translate(-50%,-50%) !important;
}
body[data-overlay-layout="compactBar"] .flag[data-edge="red"] { transform: translate(0,-50%) !important; }
body[data-overlay-layout="compactBar"] .flag[data-edge="blue"] { transform: translate(-100%,-50%) !important; }
body[data-overlay-layout="compactBar"] .flag-motion { width: 100% !important; height: 100% !important; }
body[data-overlay-layout="compactBar"][data-battle-marker-style="flag"] .flag-pole { height: 76% !important; top: 12% !important; }
body[data-overlay-layout="compactBar"][data-battle-marker-style="flag"] .flag-cloth { top: 10% !important; max-width: 72% !important; max-height: 58% !important; }
body[data-overlay-layout="compactBar"][data-battle-marker-style="ring"] .flag-knot { width: 54% !important; height: 54% !important; }

body[data-overlay-layout="compactBar"] .mode-stack {
  position: absolute !important;
  z-index: 11 !important;
  inset: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  transform: none !important;
  overflow: visible !important;
}

/* These banner backgrounds must be fully opaque, not just near-opaque: the
   scoreboard's team labels and scores render directly underneath at a lower
   z-index, and bright white text still reads as a legible ghost through a
   background under 100% opacity at this size. */
body[data-overlay-layout="compactBar"] .mode-stack > section:not([hidden]) {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  border-radius: calc(var(--compact-bar-radius) - 3px) !important;
  background: #03070d !important;
  overflow: hidden !important;
  /* .mode-stack itself stays pointer-events:none so empty space (no banner
     visible) still passes clicks through to the marker/rope beneath; the
     actual banner box needs its own override to be reachable by click. */
  pointer-events: auto !important;
}
body[data-overlay-layout="compactBar"][data-overlay-text-size] .overlay-shell.has-experience-mode .mode-stack .experience-banner[data-experience-id="classic"] { display: none !important; }

body[data-overlay-layout="compactBar"] .mode-stack span,
body[data-overlay-layout="compactBar"] .mode-stack strong {
  display: block !important;
  min-width: 0 !important;
  max-width: 44% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(.55rem,1.45vw,.82rem) !important;
}
body[data-overlay-layout="compactBar"] .mode-stack .experience-icon { flex: 0 0 auto; width: auto !important; }
body[data-overlay-layout="compactBar"] .mode-stack .smart-event-banner:not([hidden]),
body[data-overlay-layout="compactBar"] .mode-stack .experience-banner:not([hidden]) {
  inset: auto 24% -25px !important;
  min-height: 20px !important;
  padding: 2px 9px !important;
  border-radius: 7px !important;
  border: 1px solid color-mix(in srgb, var(--event-accent-color) 55%, transparent) !important;
  color: #fff !important;
  background: #03070d !important;
  text-shadow: 0 1px 2px #000 !important;
  overflow: visible !important;
}
body[data-overlay-layout="compactBar"] .mode-stack .smart-event-banner:not([hidden]) strong,
body[data-overlay-layout="compactBar"] .mode-stack .experience-banner:not([hidden]) strong {
  max-width: 62% !important;
  font-size: clamp(.62rem,1.6vw,.86rem) !important;
  font-weight: 950 !important;
}
body[data-overlay-layout="compactBar"] .mode-stack .smart-event-banner:not([hidden]) span,
body[data-overlay-layout="compactBar"] .mode-stack .experience-banner:not([hidden]) span {
  max-width: 32% !important;
  font-size: clamp(.54rem,1.35vw,.74rem) !important;
}
body[data-overlay-layout="compactBar"] .mode-stack .last-chance-counter-banner:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) auto !important;
  grid-template-rows: 1fr 3px !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 4px 8px !important;
}
body[data-overlay-layout="compactBar"] .last-chance-counter-banner strong,
body[data-overlay-layout="compactBar"] .last-chance-counter-banner #counter-detail,
body[data-overlay-layout="compactBar"] .last-chance-counter-banner #counter-numbers {
  grid-column: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  justify-self: stretch !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(.5rem,1.2vw,.72rem) !important;
}
body[data-overlay-layout="compactBar"] .last-chance-counter-banner #counter-numbers { justify-self: end !important; }
body[data-overlay-layout="compactBar"] .last-chance-counter-banner .counter-progress-track { position: absolute !important; right: 10%; bottom: 4px; left: 10%; width: auto !important; height: 3px !important; }

/* Victory's rope-impact bounce (styles.css) targets .rope-stage, whose
   transform is locked !important above for bar positioning, so it silently
   never plays here. Retargeted to .rope-stage .rope, which idle motion now
   yields (see :not([data-winner]) on idle-rope-tension) so they don't fight
   over the same element. */
body[data-overlay-layout="compactBar"][data-winner] .rope-stage .rope {
  animation: rope-impact 760ms cubic-bezier(0.2, 1.1, 0.2, 1);
}

body[data-overlay-layout="compactBar"] .winner-message {
  position: absolute !important;
  z-index: 14 !important;
  inset: 3px !important;
  /* The base Classic rule (styles.css) sets width:fit-content for its
     floating pill treatment. That rule isn't layout-scoped, so it still
     applies here; without an explicit width the inset above can't establish
     one, leaving this message left-anchored and narrower than the bar with
     raw scoreboard content visible past its right edge. */
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  border: 0 !important;
  border-radius: calc(var(--compact-bar-radius) - 3px) !important;
  overflow: hidden !important;
  color: #fff !important;
  background: color-mix(in srgb, var(--win-accent-color) 12%, #03070d) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* A mode-stack banner (Last Chance / Experience) or the winner message fully
   occupies the bar in compact mode. The pull toast sits underneath at a
   z-index below .mode-stack, and these banners are not fully opaque, so
   without this the toast's bright text visibly bleeds through both. */
body[data-overlay-layout="compactBar"]:has(.mode-stack > section:not([hidden])) .match-status .pull-toast,
body[data-overlay-layout="compactBar"][data-winner] .match-status .pull-toast {
  display: none !important;
}

body[data-overlay-layout="compactBar"] .smart-event-banner:not([hidden]),
body[data-overlay-layout="compactBar"] .experience-banner:not([hidden]) { border-color: var(--event-accent-color) !important; }
body[data-overlay-layout="compactBar"] .last-chance-counter-banner:not([hidden]) { border-color: var(--counter-accent-color) !important; }
body[data-overlay-layout="compactBar"] .pull-toast,
body[data-overlay-layout="compactBar"] .pull-toast[data-effect-kind] { color: var(--toast-text-color) !important; background: color-mix(in srgb, var(--toast-background-color) 94%, transparent) !important; }
body[data-overlay-layout="compactBar"] .pull-toast strong,
body[data-overlay-layout="compactBar"] .pull-toast small { color: var(--toast-text-color) !important; }
body[data-overlay-layout="compactBar"][data-battle-marker-style="ring"] .flag-knot { border-color: var(--marker-border-color) !important; background: var(--marker-fill-color) !important; }
body[data-overlay-layout="compactBar"][data-battle-marker-style="flag"] .flag-cloth { border-color: var(--marker-border-color) !important; }

/* Shared component colors also map to their Classic equivalents. Defaults
   match the existing visual identity, so Classic changes only when a creator
   intentionally customizes these values. */
body[data-overlay-layout="classic"][data-battle-marker-style="ring"] .flag-knot { border-color: var(--marker-border-color) !important; background: var(--marker-fill-color) !important; }
body[data-overlay-layout="classic"] .pull-toast { color: var(--toast-text-color) !important; background-color: var(--toast-background-color) !important; }
body[data-overlay-layout="classic"] .pull-toast strong,
body[data-overlay-layout="classic"] .pull-toast small { color: var(--toast-text-color) !important; }
body[data-overlay-layout="classic"] .last-chance-counter-banner { border-color: var(--counter-accent-color) !important; }
body[data-overlay-layout="classic"] .smart-event-banner,
body[data-overlay-layout="classic"] .experience-banner { border-color: var(--event-accent-color) !important; }
body[data-overlay-layout="compactBar"] .winner-message:empty { display: none !important; }
/* Compact special states stay inside the bar. The legacy external strip remains
   semantically updated for compatibility but is not rendered as a second line. */
body[data-overlay-layout="compactBar"] .compact-experience-strip { display: none !important; }

body[data-overlay-layout="compactBar"] .compact-points-needed {
  position: fixed;
  top: var(--overlay-top-offset, 0px);
  left: 0;
  right: 0;
  margin-inline: auto;
  z-index: 18;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  width: var(--compact-bar-width);
  min-height: 50px;
  padding: 5px 8px 7px;
  overflow: hidden;
  color: #fff;
  background: transparent !important;
  /* Never overlaps the bar/rope (it renders above or below it), so unlike
     .scoreboard there's no click-through case to preserve here — this just
     needs to be reachable for the designer's click-to-select. */
  pointer-events: auto;
}
body[data-overlay-layout="compactBar"][data-compact-goal-position="bottom"] .compact-points-needed {
  top: calc(var(--overlay-top-offset, 0px) + var(--compact-bar-height) + 8px);
}

/* The Compact Experience is one attached status line beneath the bar. Keep
   the icon hidden so multiplier text is never repeated (for example 2X twice). */
body[data-overlay-layout="compactBar"] .mode-stack .smart-event-banner:not([hidden]),
body[data-overlay-layout="compactBar"] .mode-stack .experience-banner:not([hidden]) {
  inset: auto 24% -25px !important;
  min-height: 20px !important;
  padding: 2px 9px !important;
  border: 1px solid color-mix(in srgb, var(--event-accent-color) 55%, transparent) !important;
  border-radius: 7px !important;
  color: #fff !important;
  background: #03070d !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.45) !important;
  opacity: 1 !important;
  overflow: visible !important;
  text-shadow: 0 1px 2px #000 !important;
}
body[data-overlay-layout="compactBar"] .mode-stack .experience-banner .experience-icon,
body[data-overlay-layout="compactBar"] .mode-stack .smart-event-banner .experience-icon {
  display: none !important;
}
body[data-overlay-layout="compactBar"] .compact-points-needed[hidden] { display: none !important; }
body[data-overlay-layout="compactBar"] .compact-points-needed strong,
body[data-overlay-layout="compactBar"] .compact-points-needed span {
  font-size: clamp(1.55rem, 5.2vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
}
/* A long custom Requirement Label + Extra Large size + a narrow bar width
   could otherwise overflow past the bar with no wrap/ellipsis, unlike
   .team-label's equivalent protection. The number itself (strong) always
   stays whole; only the label can truncate. */
body[data-overlay-layout="compactBar"] .compact-points-needed {
  max-width: 100%;
}
body[data-overlay-layout="compactBar"] .compact-points-needed span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-overlay-layout="compactBar"] .compact-points-needed strong {
  flex-shrink: 0;
}
body[data-overlay-layout="compactBar"][data-points-needed-size="medium"] .compact-points-needed strong,
body[data-overlay-layout="compactBar"][data-points-needed-size="medium"] .compact-points-needed span { font-size: clamp(1.3rem, 4.5vw, 2rem); }
body[data-overlay-layout="compactBar"][data-points-needed-size="extraLarge"] .compact-points-needed strong,
body[data-overlay-layout="compactBar"][data-points-needed-size="extraLarge"] .compact-points-needed span { font-size: clamp(1.8rem, 6.2vw, 2.8rem); }
body[data-overlay-layout="compactBar"][data-points-needed-color-mode="black"] .compact-points-needed { color: #050505; }
body[data-overlay-layout="compactBar"][data-points-needed-color-mode="white"] .compact-points-needed,
body[data-overlay-layout="compactBar"][data-points-needed-color-mode="auto"] .compact-points-needed { color: #fff; }
body[data-overlay-layout="compactBar"][data-points-needed-color-mode="custom"] .compact-points-needed { color: var(--points-needed-color); }
body[data-overlay-layout="compactBar"][data-points-needed-outline="on"] .compact-points-needed { text-shadow: 0 3px 5px #000, 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000; }

/* The rope covers the bar edge-to-edge with no exposed shell area, so unlike
   Classic there's nowhere left to click for the Background & Effects panel.
   This hotspot exists only to give it one, and only inside the designer's
   own preview iframe (body[data-designer-preview], set from ?preview=1 in
   main.js) - a real OBS/TikTok Studio browser source never sets that flag,
   so this never appears on the actual capture surface. */
body:not([data-designer-preview="true"]) .compact-background-hotspot,
body[data-overlay-layout="classic"] .compact-background-hotspot {
  display: none !important;
}
body[data-designer-preview="true"][data-overlay-layout="compactBar"] .compact-background-hotspot {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 25;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  opacity: 0;
  cursor: pointer;
  transition: opacity 160ms ease, background 160ms ease, transform 160ms ease;
}
body[data-designer-preview="true"][data-overlay-layout="compactBar"] .overlay-shell:hover .compact-background-hotspot,
body[data-designer-preview="true"][data-overlay-layout="compactBar"] .compact-background-hotspot[data-designer-selected] {
  opacity: 1;
}
body[data-designer-preview="true"][data-overlay-layout="compactBar"] .compact-background-hotspot:hover {
  background: rgba(255,255,255,.28);
  transform: scale(1.15);
}

/* Team identity and the authoritative boundary remain visible in every state. */

body[data-overlay-layout="compactBar"] .event-effects { position: absolute !important; inset: 0 !important; overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  body[data-overlay-layout="compactBar"] .overlay-shell,
  body[data-overlay-layout="compactBar"] .rope-stage,
  body[data-overlay-layout="compactBar"] .rope,
  body[data-overlay-layout="compactBar"] .flag-motion,
  body[data-overlay-layout="compactBar"] .scoreboard { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  /* Screen shake specifically must never run under reduced motion, matching
     Classic's rule - not just shortened like the other one-shot effects. */
  body[data-overlay-layout="compactBar"][data-critical-hit-impact] .scoreboard,
  body[data-overlay-layout="compactBar"][data-critical-hit-impact] .rope-stage .rope { animation: none !important; }
  body[data-overlay-layout="compactBar"] .overlay-shell.experience-chain-bonus .scoreboard { transition-duration: 1ms !important; }
  body[data-overlay-layout="compactBar"] .overlay-shell[data-lucky-side-team] .flag { transition-duration: 1ms !important; }
}

/* Compact keeps the shared viewer card beneath the bar, large enough for a
   real title and description instead of a debug-sized pill. */
body[data-overlay-layout="compactBar"] .mode-stack .experience-banner:not([hidden]) {
  inset: auto 17% -67px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 4px !important;
  min-height: 48px !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  background: #03070d !important;
  opacity: 1 !important;
  overflow: visible !important;
}
body[data-overlay-layout="compactBar"] .mode-stack .experience-banner .experience-icon {
  display: grid !important;
  grid-row: 1 / -1 !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 1rem !important;
}
body[data-overlay-layout="compactBar"] .mode-stack .experience-banner #experience-name {
  display: block !important;
  max-width: none !important;
  font-size: clamp(.68rem, 1.75vw, .9rem) !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body[data-overlay-layout="compactBar"] .mode-stack .experience-banner #experience-message {
  display: block !important;
  max-width: none !important;
  font-size: clamp(.59rem, 1.45vw, .74rem) !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body[data-overlay-layout="compactBar"] .mode-stack .experience-banner[data-display-mode="minimal"] {
  inset: auto 23% -45px !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  min-height: 30px !important;
  padding: 5px 9px !important;
}

body[data-overlay-layout="compactBar"] #experience-banner:not([hidden]),
body[data-overlay-layout="compactBar"] #smart-event-banner:not([hidden]) {
  background: #03070d !important;
  opacity: 1 !important;
}
body[data-overlay-layout="compactBar"] #experience-icon,
body[data-overlay-layout="compactBar"] #smart-event-icon {
  display: none !important;
}

/* Final specificity layer for the shared detailed card. */
body[data-overlay-layout="compactBar"] #experience-banner:not([hidden]) {
  inset: auto 17% -51.82px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 4px !important;
  min-height: 48px !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  background: #03070d !important;
  overflow: visible !important;
}
body[data-overlay-layout="compactBar"] #experience-banner:not([hidden]) #experience-icon {
  display: grid !important;
  grid-row: 1 / -1 !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 1rem !important;
}
body[data-overlay-layout="compactBar"] #experience-banner:not([hidden]) #experience-name {
  display: block !important;
  max-width: none !important;
  font-size: clamp(.68rem, 1.75vw, .9rem) !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body[data-overlay-layout="compactBar"] #experience-banner:not([hidden]) #experience-message {
  display: block !important;
  max-width: none !important;
  font-size: clamp(.59rem, 1.45vw, .74rem) !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body[data-overlay-layout="compactBar"] #experience-banner[data-display-mode="minimal"] {
  inset: auto 23% -45px !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  min-height: 30px !important;
  padding: 5px 9px !important;
}

/* ==========================================================================
   Compact label zones.

   Labels previously sat in panels whose padding was recomputed every frame to
   dodge the marker, and whose alignment flipped side depending on where the
   marker was. Three problems followed from that one mechanism: names were
   shoved to the extreme edges, they moved as the marker travelled, and when
   one team's territory grew the opposing label could end up visually inside
   it — so both names appeared to belong to the winning side.

   Each label now owns a fixed zone tied to its own half of the bar and biased
   inward, and the middle is reserved as a corridor the labels never enter and
   the marker always travels in. Ownership therefore never depends on the
   score: left zone is the left team, always.
   ========================================================================== */
body[data-overlay-layout="compactBar"] {
  /* Share of the bar each label may occupy, measured from its own edge. */
  --compact-label-zone: 34%;
  /* Distance the zone is pulled inward from the outer edge. */
  --compact-label-inset: 7%;
}

body[data-overlay-layout="compactBar"] .team-panel {
  position: absolute !important;
  top: 0 !important;
  width: var(--compact-label-zone) !important;
  /* The dodging padding is deliberately neutralised: a fixed zone cannot be
     allowed to move with the marker without reintroducing the ambiguity. */
  padding: 4px 0 !important;
}

body[data-overlay-layout="compactBar"] .team-panel--blue {
  left: var(--compact-label-inset) !important;
  align-items: flex-start !important;
  text-align: left !important;
}

body[data-overlay-layout="compactBar"] .team-panel--red {
  right: var(--compact-label-inset) !important;
  left: auto !important;
  align-items: flex-end !important;
  text-align: right !important;
}

/* Alignment is a property of which team the label belongs to, never of where
   the marker happens to be. */
body[data-overlay-layout="compactBar"] .team-panel[data-compact-content-side="left"],
body[data-overlay-layout="compactBar"] .team-panel[data-compact-content-side="right"] {
  align-items: inherit !important;
  text-align: inherit !important;
}
body[data-overlay-layout="compactBar"] .team-panel--blue[data-compact-content-side] {
  align-items: flex-start !important;
  text-align: left !important;
}
body[data-overlay-layout="compactBar"] .team-panel--red[data-compact-content-side] {
  align-items: flex-end !important;
  text-align: right !important;
}

/* Labels and scores stay inside their zone rather than growing into the
   corridor. */
body[data-overlay-layout="compactBar"] .team-panel .team-label,
body[data-overlay-layout="compactBar"] .team-panel strong {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* The marker travels above the labels in the reserved corridor. z-index is not
   the fix here — the zones above are — but the marker should still win if a
   very long name is ellipsised right up to its boundary. */
body[data-overlay-layout="compactBar"] .flag {
  z-index: 5 !important;
}

/* ==========================================================================
   Compact marker lane.

   The marker's horizontal position IS the score, so it must be free to travel
   the whole bar — which meant it crossed the team wording at lopsided splits.
   Shrinking the label zones would have made names unusable and drawing the
   marker over the text would not have made either readable, so the two are
   given separate vertical space instead:

     top band     team name + score, in their fixed left/right zones
     bottom band  the marker lane, travelling 0-100% freely

   The territory fill still spans the full bar behind both bands, and the
   marker still sits exactly on the boundary, so the lane reads as part of the
   same progress bar rather than a detached strip.

   The band is a ratio, not a fixed height: the preset above decides how tall
   the bar is, and the label band, the lane, the marker and the logo budget are
   all shares of it. Pinning the lane to one absolute 88px bar was what made
   Overlay Size stop meaning anything.
   ========================================================================== */

/* Labels occupy the upper band only, keeping their fixed inward zones. */
body[data-overlay-layout="compactBar"] .team-panel {
  height: var(--compact-label-band) !important;
  justify-content: center !important;
}

/* The anchor tick belongs to the lane too, so it reads as the marker's own
   footing rather than a divider through the labels. */
body[data-overlay-layout="compactBar"]:not([data-battle-marker-style="territory"]) .rope-stage::before {
  top: var(--compact-label-band);
  bottom: 0;
  height: auto;
  margin-top: 0;
  opacity: .4;
}

/* ==========================================================================
   Compact Streamer Logo budget.

   Logo Size was inert here: a flat max-width/max-height:86% of the marker box
   capped every size to the same ~29px, which also squared off a banner logo
   and undid the aspect-aware sizing. Logo Size is now a share of the marker
   lane, so the three sizes differ, the image keeps its own aspect ratio, and
   no size can grow out of the lane into the team wording above it.
   ========================================================================== */
body[data-overlay-layout="compactBar"] {
  --compact-logo-lane-share: .76;
  --logo-mount-base: calc(var(--compact-marker-lane-height) * .72);
}
body[data-overlay-layout="compactBar"][data-logo-size="small"] { --compact-logo-lane-share: .58; }
body[data-overlay-layout="compactBar"][data-logo-size="large"] { --compact-logo-lane-share: .94; }

body[data-overlay-layout="compactBar"] .streamer-logo-marker {
  --logo-marker-height: calc(var(--compact-marker-lane-height) * var(--compact-logo-lane-share));
  /* A wide banner is allowed to overhang the marker box, exactly as it does in
     Classic; clampMarkerWithinStage measures the rendered marker, so the edge
     clamp still holds. */
  --logo-marker-max-width: calc(var(--compact-bar-width) * .3 * var(--compact-logo-lane-share));
  max-width: none !important;
  max-height: none !important;
}

/* The Flag mount carries its own box, so Compact hands it the lane-derived
   mount size instead of the generic marker square. */
body[data-overlay-layout="compactBar"][data-battle-marker-style="streamerLogo"][data-logo-display-style="flag"] .flag {
  width: calc(var(--logo-mount-size) * 1.1) !important;
  height: var(--logo-mount-size) !important;
}