/* START TLSB_LOGO_RESULT_OVERLAY */
.tlsb-logo-result-overlay {
  --tlsb-lro-bg: #050816;
  --tlsb-lro-text: #ffffff;
  --tlsb-lro-text-glow: #38f8ff;
  --tlsb-lro-winner-glow: #42ffbd;
  --tlsb-lro-impact: #ffe96a;
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--tlsb-lro-impact) 18%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--tlsb-lro-bg) 96%, #000000), var(--tlsb-lro-bg));
}

.tlsb-logo-result-overlay.is-visible {
  visibility: visible;
}

.tlsb-logo-result-overlay.is-transparent {
  background: transparent;
}

.tlsb-logo-result-overlay.is-fallback-running {
  opacity: 1;
}

.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-card,
.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-result,
.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-score,
.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-scoreboard,
.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-emblem,
.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-impact,
.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-flash,
.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-split,
.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-spotlight {
  opacity: 1;
}

.tlsb-lro-split,
.tlsb-lro-spotlight,
.tlsb-lro-flash,
.tlsb-lro-impact,
.tlsb-lro-trail,
.tlsb-lro-stage {
  position: absolute;
  inset: 0;
}

.tlsb-lro-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
}

.tlsb-lro-split::before,
.tlsb-lro-split::after {
  content: "";
  border: 1px solid color-mix(in srgb, var(--tlsb-lro-impact) 38%, transparent);
}

.tlsb-lro-split::before {
  background: linear-gradient(90deg, color-mix(in srgb, #1675ff 30%, transparent), transparent);
}

.tlsb-lro-split::after {
  background: linear-gradient(270deg, color-mix(in srgb, #ff2f5f 30%, transparent), transparent);
}

.tlsb-lro-spotlight {
  left: 50%;
  width: min(82vw, 980px);
  transform: translateX(-50%);
  opacity: 0;
  background: conic-gradient(from 200deg at 50% 0%, transparent 0deg, color-mix(in srgb, var(--tlsb-lro-winner-glow) 28%, transparent) 22deg, transparent 44deg);
  filter: blur(6px);
}

.tlsb-lro-flash {
  opacity: 0;
  background: var(--tlsb-lro-text);
}

.tlsb-lro-impact {
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  margin: -55px;
  border: 10px solid var(--tlsb-lro-impact);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 50px var(--tlsb-lro-impact), inset 0 0 30px var(--tlsb-lro-impact);
}

.tlsb-lro-trail {
  top: 50%;
  left: 50%;
  width: min(54vw, 820px);
  height: 24px;
  margin-top: -12px;
  opacity: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tlsb-lro-impact) 86%, transparent));
  filter: blur(10px);
}

.tlsb-lro-stage {
  display: grid;
  place-items: center;
}

.tlsb-lro-card {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(180px, 22vw, 350px);
  min-height: clamp(190px, 25vw, 390px);
  padding: clamp(14px, 2vw, 26px);
  border: 3px solid color-mix(in srgb, var(--tlsb-lro-winner-glow) 82%, #ffffff);
  border-radius: 30px;
  background: color-mix(in srgb, #050816 74%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--tlsb-lro-winner-glow) 72%, transparent), inset 0 0 26px color-mix(in srgb, var(--tlsb-lro-winner-glow) 24%, transparent);
  transform-origin: center center;
}

.tlsb-logo-result-overlay.no-logo-border .tlsb-lro-card {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.tlsb-lro-logo {
  display: block;
  width: min(100%, 280px);
  max-height: 250px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--tlsb-lro-winner-glow) 78%, transparent));
}

.tlsb-logo-result-overlay.no-logo-border .tlsb-lro-logo {
  filter: none;
}

.tlsb-lro-fallback {
  display: none;
  place-items: center;
  width: min(100%, 270px);
  min-height: 190px;
  padding: 18px;
  border-radius: 22px;
  color: var(--tlsb-lro-text);
  background: color-mix(in srgb, var(--tlsb-lro-bg) 82%, #111827);
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 0 18px var(--tlsb-lro-text-glow);
}

.tlsb-lro-card.is-fallback .tlsb-lro-fallback {
  display: grid;
}

.tlsb-lro-card.is-fallback .tlsb-lro-logo {
  display: none;
}

.tlsb-lro-bar-name {
  margin-top: 12px;
  color: var(--tlsb-lro-text);
  font-size: clamp(20px, 2vw, 34px);
  font-weight: 1000;
  letter-spacing: 0.045em;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 0 13px var(--tlsb-lro-text-glow);
  text-transform: uppercase;
}

.tlsb-lro-result {
  position: absolute;
  top: 8vh;
  left: 5vw;
  right: 5vw;
  color: var(--tlsb-lro-text);
  font-size: clamp(42px, 8vw, 132px);
  font-style: italic;
  font-weight: 1000;
  letter-spacing: 0.055em;
  line-height: 0.9;
  opacity: 0;
  text-align: center;
  text-shadow: 0 0 12px var(--tlsb-lro-text-glow), 0 0 32px var(--tlsb-lro-text-glow);
  text-transform: uppercase;
}

.tlsb-lro-score {
  position: absolute;
  bottom: 8vh;
  left: 5vw;
  right: 5vw;
  color: var(--tlsb-lro-text);
  font-size: clamp(36px, 6vw, 104px);
  font-weight: 1000;
  letter-spacing: 0.12em;
  line-height: 1;
  opacity: 0;
  text-align: center;
  text-shadow: 0 0 12px var(--tlsb-lro-text-glow);
}

.tlsb-lro-emblem {
  position: absolute;
  top: 18vh;
  left: 50%;
  color: var(--tlsb-lro-impact);
  font-size: clamp(70px, 11vw, 180px);
  line-height: 1;
  opacity: 0;
  text-shadow: 0 0 24px var(--tlsb-lro-impact);
  transform: translateX(-50%);
}

.tlsb-lro-scoreboard {
  position: absolute;
  top: 40%;
  left: 50%;
  width: min(82vw, 860px);
  padding: 26px 34px;
  border: 4px solid var(--tlsb-lro-impact);
  border-radius: 22px;
  color: var(--tlsb-lro-text);
  background: color-mix(in srgb, var(--tlsb-lro-bg) 90%, #000000);
  box-shadow: 0 0 34px color-mix(in srgb, var(--tlsb-lro-impact) 70%, transparent);
  font-size: clamp(42px, 7vw, 108px);
  font-weight: 1000;
  letter-spacing: 0.11em;
  opacity: 0;
  text-align: center;
  transform: translate(-50%, -50%);
}

.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-result {
  animation: tlsb-lro-fallback-title 3.2s ease both;
}

.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-score {
  animation: tlsb-lro-fallback-score 3.2s ease both;
}

.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-home {
  animation: tlsb-lro-fallback-home 3.2s cubic-bezier(0.18, 0.8, 0.24, 1) both;
}

.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-away {
  animation: tlsb-lro-fallback-away 3.2s cubic-bezier(0.18, 0.8, 0.24, 1) both;
}

.tlsb-logo-result-overlay.is-fallback-running[data-tlsb-logo-result-winner="home"] .tlsb-lro-home,
.tlsb-logo-result-overlay.is-fallback-running[data-tlsb-logo-result-winner="away"] .tlsb-lro-away {
  z-index: 4;
  box-shadow: 0 0 42px var(--tlsb-lro-winner-glow), inset 0 0 30px color-mix(in srgb, var(--tlsb-lro-winner-glow) 34%, transparent);
}

.tlsb-logo-result-overlay.is-fallback-running[data-tlsb-logo-result-winner="home"] .tlsb-lro-away,
.tlsb-logo-result-overlay.is-fallback-running[data-tlsb-logo-result-winner="away"] .tlsb-lro-home {
  filter: saturate(0.65) brightness(0.7);
}

.tlsb-logo-result-overlay.is-fallback-running[data-tlsb-logo-result-winner="draw"] .tlsb-lro-split {
  animation: tlsb-lro-fallback-split 3.2s ease both;
}

.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-impact {
  animation: tlsb-lro-fallback-impact 3.2s ease both;
}

.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-flash {
  animation: tlsb-lro-fallback-flash 3.2s ease both;
}

.tlsb-logo-result-overlay.is-fallback-running .tlsb-lro-scoreboard {
  animation: tlsb-lro-fallback-board 3.2s ease both;
}

@keyframes tlsb-lro-fallback-overlay {
  0% { opacity: 0; }
  8%, 88% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes tlsb-lro-fallback-title {
  0% { opacity: 0; transform: translateY(-35px) scale(0.72); }
  18%, 82% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}

@keyframes tlsb-lro-fallback-score {
  0%, 18% { opacity: 0; transform: translateY(32px) scale(0.84); }
  34%, 84% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(16px) scale(0.96); }
}

@keyframes tlsb-lro-fallback-home {
  0% { opacity: 0; transform: translateX(-68vw) rotate(-10deg) scale(0.72); }
  22% { opacity: 1; transform: translateX(-18vw) rotate(0deg) scale(1.05); }
  48%, 84% { opacity: 1; transform: translateX(-15vw) rotate(0deg) scale(1.18); }
  100% { opacity: 0; transform: translateX(-18vw) scale(0.92); }
}

@keyframes tlsb-lro-fallback-away {
  0% { opacity: 0; transform: translateX(68vw) rotate(10deg) scale(0.72); }
  22% { opacity: 1; transform: translateX(18vw) rotate(0deg) scale(1.05); }
  48%, 84% { opacity: 1; transform: translateX(15vw) rotate(0deg) scale(1.18); }
  100% { opacity: 0; transform: translateX(18vw) scale(0.92); }
}

@keyframes tlsb-lro-fallback-impact {
  0%, 24% { opacity: 0; transform: scale(0.15); }
  34% { opacity: 1; transform: scale(3.1); }
  56%, 100% { opacity: 0; transform: scale(5); }
}

@keyframes tlsb-lro-fallback-flash {
  0%, 25% { opacity: 0; }
  29% { opacity: 0.82; }
  34%, 100% { opacity: 0; }
}

@keyframes tlsb-lro-fallback-split {
  0%, 10% { opacity: 0; }
  26%, 82% { opacity: 0.78; }
  100% { opacity: 0; }
}

@keyframes tlsb-lro-fallback-board {
  0%, 16% { opacity: 0; transform: translate(-50%, -72%) scale(0.82); }
  32%, 76% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -44%) scale(0.94); }
}

@media (max-width: 720px) {
  .tlsb-lro-card {
    width: clamp(132px, 38vw, 220px);
    min-height: clamp(150px, 42vw, 250px);
    padding: 12px;
    border-radius: 22px;
  }

  .tlsb-lro-logo {
    max-height: 150px;
  }

  .tlsb-lro-fallback {
    min-height: 120px;
    font-size: clamp(22px, 6vw, 38px);
  }

  .tlsb-lro-bar-name {
    font-size: clamp(16px, 4vw, 24px);
  }
}
/* END TLSB_LOGO_RESULT_OVERLAY */