/* =============================================================================
   Bootstrap splash — matches app / homepage shell background where possible:
   Base: --splash-brand-page-bg (cache/build) → --brand-background →
         --wls-body-bg-color → --bs-body-bg
   Accents: primary + gold (cache/build). Optional build: input-splash-page-bg
   ============================================================================= */

   body.page-loading {
    margin: 0;
    height: 100%;
    overflow: hidden;
  }
  
  .splash-screen {
    display: none;
  }
  
  .page-loading .splash-screen {
    --splash-primary: var(
      --splash-brand-primary,
      var(--app-primary-color, #b4232f)
    );
    --splash-gold: var(--splash-brand-gold, #c9a227);
    --splash-page-bg: var(
      --splash-brand-page-bg,
      var(--brand-background, var(--wls-body-bg-color, var(--bs-body-bg)))
    );
    --splash-col-max: min(20rem, calc(100vw - 3rem));
  
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  
    color: color-mix(in srgb, var(--splash-gold) 35%, #fefce8);
    background-color: var(--splash-page-bg, #0f172a);
    background-image:
      radial-gradient(
        ellipse 100% 75% at 50% -12%,
        color-mix(in srgb, var(--splash-primary) 24%, transparent),
        transparent 52%
      ),
      radial-gradient(
        ellipse 58% 48% at 105% 95%,
        color-mix(in srgb, var(--splash-gold) 11%, transparent),
        transparent 50%
      );
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%;
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen {
    color: color-mix(in srgb, var(--splash-primary) 72%, #1c1917);
    background-color: var(--splash-page-bg, #f6f7fa);
    background-image:
      radial-gradient(
        ellipse 95% 72% at 50% 0%,
        color-mix(in srgb, var(--splash-primary) 12%, transparent),
        transparent 55%
      ),
      radial-gradient(
        ellipse 55% 42% at 100% 100%,
        color-mix(in srgb, var(--splash-gold) 14%, transparent),
        transparent 48%
      );
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%;
  }
  
  html[data-bs-theme="dark"] .page-loading .splash-screen {
    color: color-mix(in srgb, var(--splash-gold) 22%, #e7e5e4);
  }
  
  html[data-theme-color="black-gold"] .page-loading .splash-screen,
  html[data-bs-theme="black-gold"] .page-loading .splash-screen {
    --splash-gold: var(--splash-brand-gold, #e8c547);
    --splash-primary: var(--splash-brand-primary, var(--app-primary-color, #b45309));
  }
  
  .splash-screen__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      ellipse 55% 40% at 50% 100%,
      transparent 30%,
      rgba(0, 0, 0, 0.35) 100%
    );
    opacity: 0.85;
  }
  
  html[data-bs-theme="light"] .splash-screen__ambient {
    background: radial-gradient(
      ellipse 55% 40% at 50% 100%,
      transparent 40%,
      rgba(28, 25, 23, 0.06) 100%
    );
    opacity: 1;
  }
  
  .splash-screen__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image:
      repeating-linear-gradient(
        60deg,
        color-mix(in srgb, var(--splash-gold) 14%, transparent) 0 1px,
        transparent 1px 18px
      ),
      repeating-linear-gradient(
        -60deg,
        color-mix(in srgb, var(--splash-primary) 10%, transparent) 0 1px,
        transparent 1px 18px
      );
    mask-image: radial-gradient(ellipse 65% 55% at 50% 45%, black 15%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 45%, black 15%, transparent 72%);
  }
  
  html[data-bs-theme="light"] .splash-screen__grid {
    opacity: 0.5;
  }
  
  .splash-screen__sparkles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  
  .splash-screen__star {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--splash-gold);
    box-shadow:
      0 0 6px var(--splash-gold),
      0 0 14px color-mix(in srgb, var(--splash-primary) 60%, transparent);
    animation: splash-star-twinkle 2.1s ease-in-out infinite;
  }
  
  .splash-screen__star:nth-child(1) { left: 14%; top: 22%; animation-delay: 0s; }
  .splash-screen__star:nth-child(2) { left: 78%; top: 18%; animation-delay: 0.35s; }
  .splash-screen__star:nth-child(3) { left: 22%; top: 68%; animation-delay: 0.7s; }
  .splash-screen__star:nth-child(4) { left: 86%; top: 62%; animation-delay: 0.2s; }
  .splash-screen__star:nth-child(5) { left: 8%; top: 48%; animation-delay: 1.1s; }
  .splash-screen__star:nth-child(6) { left: 50%; top: 12%; animation-delay: 0.55s; }
  .splash-screen__star:nth-child(7) { left: 62%; top: 78%; animation-delay: 0.9s; }
  .splash-screen__star:nth-child(8) { left: 38%; top: 88%; animation-delay: 1.35s; }
  
  .splash-screen__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    width: 20rem;
    gap: 1.25rem;
    padding: 2rem 1.5rem 5rem;
    box-sizing: border-box;
  }
  
  .splash-screen__load-card {
    display: contents;
  }
  
  .splash-screen__mark {
    position: relative;
    width: min(7.75rem, 28vw);
    height: min(7.75rem, 28vw);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    animation: splash-chip-float 4.8s linear infinite;
    background: radial-gradient(
      circle at 35% 30%,
      color-mix(in srgb, #fff 16%, var(--splash-primary)) 0%,
      color-mix(in srgb, var(--splash-primary) 85%, #000) 100%
    );
    box-shadow:
      0 0 0px var(--splash-gold),
      0 0 0 6px color-mix(in srgb, var(--splash-primary) 55%, #000),
      0 18px 40px rgba(0, 0, 0, 0.45),
      inset 0 2px 12px color-mix(in srgb, #fff 22%, transparent);
  }
  
  .splash-screen__mark::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      118deg,
      transparent 0%,
      transparent 42%,
      color-mix(in srgb, #fff 55%, transparent) 50%,
      transparent 58%,
      transparent 100%
    );
    animation: splash-chip-sheen 2.8s ease-in-out infinite;
    opacity: 0.85;
  }
  
  html[data-bs-theme="light"] .splash-screen__mark {
    background: radial-gradient(
      circle at 35% 28%,
      #fff 0%,
      color-mix(in srgb, var(--splash-primary) 12%, #fff) 45%,
      color-mix(in srgb, var(--splash-primary) 22%, #f5f5f4) 100%
    );
    box-shadow:
      0 0 0 3px var(--splash-gold),
      0 0 0 5px color-mix(in srgb, var(--splash-primary) 35%, #d6d3d1),
      0 16px 36px rgba(28, 25, 23, 0.12),
      inset 0 1px 8px #fff;
  }
  
  .splash-screen__ripple {
    position: absolute;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--splash-gold) 70%, var(--splash-primary));
    opacity: 0;
    animation: splash-ripple-out 2.4s ease-out infinite;
  }
  
  .splash-screen__ripple--1 { animation-delay: 0s; }
  .splash-screen__ripple--2 { animation-delay: 0.8s; }
  .splash-screen__ripple--3 { animation-delay: 1.6s; }
  
  .splash-screen .loading-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 50%;
    box-sizing: border-box;
  }
  
  .splash-screen__brand-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
  }
  
  html[data-bs-theme="light"] .splash-screen__brand-img {
    filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--splash-primary) 25%, transparent));
  }
  
  .splash-screen__spinner {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--splash-gold) 55%, transparent);
    border-top-color: var(--splash-gold);
    border-right-color: var(--splash-primary);
    animation: splash-spin-wobble 1.05s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    box-shadow: 0 0 16px color-mix(in srgb, var(--splash-primary) 45%, transparent);
  }
  
  .splash-screen__reels {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.2rem 0.35rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--splash-page-bg, #000) 65%, transparent);
    border: 1px solid color-mix(in srgb, var(--splash-gold) 35%, transparent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  }
  
  html[data-bs-theme="light"] .splash-screen__reels {
    background: color-mix(in srgb, var(--splash-page-bg, #fff) 88%, #000);
    box-shadow: 0 4px 12px rgba(28, 25, 23, 0.08);
  }
  
  .splash-screen__reel {
    width: 0.7rem;
    height: 2.4rem;
    border-radius: 0.25rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--splash-primary) 25%, transparent);
    background: color-mix(in srgb, #000 55%, transparent);
  }
  
  html[data-bs-theme="light"] .splash-screen__reel {
    background: color-mix(in srgb, var(--splash-primary) 8%, #e7e5e4);
  }
  
  .splash-screen__reel-strip {
    height: 400%;
    width: 100%;
    background: repeating-linear-gradient(
      180deg,
      var(--splash-primary) 0 18%,
      var(--splash-gold) 18% 36%,
      color-mix(in srgb, var(--splash-primary) 75%, #fff) 36% 54%,
      var(--splash-gold) 54% 72%,
      var(--splash-primary) 72% 90%,
      var(--splash-gold) 90% 100%
    );
    animation: splash-reel-scroll 0.62s linear infinite;
  }
  
  .splash-screen__reel:nth-child(2) .splash-screen__reel-strip {
    animation-duration: 0.78s;
    animation-direction: reverse;
  }
  
  .splash-screen__reel:nth-child(3) .splash-screen__reel-strip {
    animation-duration: 0.54s;
  }
  
  .splash-screen__track {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 2;
    background: color-mix(in srgb, var(--splash-primary) 22%, rgba(0, 0, 0, 0.5));
    overflow: hidden;
  }
  
  html[data-bs-theme="light"] .splash-screen__track {
    background: color-mix(in srgb, var(--splash-primary) 18%, #e7e5e4);
  }
  
  .splash-screen__fill {
    height: 100%;
    width: 30%;
    background: linear-gradient(
      90deg,
      var(--splash-primary),
      var(--splash-gold),
      var(--splash-primary)
    );
    background-size: 200% 100%;
    animation: move 1.5s infinite, splash-bar-shimmer 2s linear infinite;
    box-shadow: 0 0 14px color-mix(in srgb, var(--splash-gold) 60%, transparent);
  }
  
  @keyframes splash-ripple-out {
    0% { width: 55%; height: 55%; opacity: 0.5; }
    100% { width: 240%; height: 240%; opacity: 0; }
  }
  
  @keyframes splash-spin {
    to { transform: rotate(360deg); }
  }
  
  @keyframes splash-spin-wobble {
    0% { transform: rotate(0deg) scale(1); }
    45% { transform: rotate(200deg) scale(1.06); }
    100% { transform: rotate(360deg) scale(1); }
  }
  
  @keyframes splash-chip-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    12.5% { transform: translate3d(0, -1px, 0); }
    25% { transform: translate3d(0, -3px, 0); }
    37.5% { transform: translate3d(0, -5.5px, 0); }
    50% { transform: translate3d(0, -6.5px, 0); }
    62.5% { transform: translate3d(0, -5.5px, 0); }
    75% { transform: translate3d(0, -3px, 0); }
    87.5% { transform: translate3d(0, -1px, 0); }
  }
  
  @keyframes splash-chip-sheen {
    0%, 35% {
      opacity: 0;
      transform: translateX(-120%) rotate(-12deg);
    }
    50% { opacity: 1; }
    65%, 100% {
      opacity: 0;
      transform: translateX(120%) rotate(-12deg);
    }
  }
  
  @keyframes splash-star-twinkle {
    0%, 100% { transform: scale(0.35); opacity: 0.25; }
    50% { transform: scale(1.15); opacity: 1; }
  }
  
  @keyframes splash-reel-scroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
  }
  
  @keyframes splash-bar-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(280%); }
  }
  
  @keyframes move {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(280%); }
  }
  
  @keyframes splash-bar-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }
  
  /* =============================================================================
     Sportsbook variant
     ============================================================================= */
  
  .page-loading .splash-screen.splash-screen--sportsbook {
    --splash-primary: var(
      --splash-brand-primary,
      var(--app-primary-color, #10b981)
    );
    --splash-gold: var(--splash-brand-gold, #ecfdf5);
  
    color: color-mix(in srgb, var(--splash-gold) 40%, #a7f3d0);
    background-color: var(--splash-page-bg, #030806);
    background-image:
      radial-gradient(
        ellipse 110% 85% at 50% -18%,
        color-mix(in srgb, var(--splash-primary) 38%, transparent),
        transparent 52%
      ),
      radial-gradient(
        ellipse 50% 35% at 80% 100%,
        color-mix(in srgb, var(--splash-primary) 12%, transparent),
        transparent 50%
      ),
      repeating-linear-gradient(
        180deg,
        transparent 0 3px,
        color-mix(in srgb, var(--splash-primary) 5%, transparent) 3px 4px
      );
    background-size: 100% 100%, 100% 100%, 100% 48px;
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--sportsbook {
    color: color-mix(in srgb, var(--splash-primary) 55%, #064e3b);
    background-color: var(--splash-page-bg, #f8fafc);
    background-image:
      radial-gradient(
        ellipse 100% 70% at 50% 0%,
        color-mix(in srgb, var(--splash-primary) 18%, transparent),
        transparent 58%
      ),
      linear-gradient(180deg, #f8fafc 0%, #ecfdf5 100%);
    background-size: auto;
  }
  
  html[data-bs-theme="dark"] .page-loading .splash-screen.splash-screen--sportsbook {
    color: color-mix(in srgb, var(--splash-gold) 28%, #d1fae5);
  }
  
  .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__ambient {
    background:
      radial-gradient(
        ellipse 45% 30% at 50% 0%,
        color-mix(in srgb, var(--splash-primary) 25%, transparent),
        transparent 70%
      ),
      radial-gradient(
        ellipse 55% 40% at 50% 100%,
        transparent 25%,
        rgba(0, 0, 0, 0.55) 100%
      );
    opacity: 1;
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__ambient {
    background: radial-gradient(
      ellipse 60% 40% at 50% 0%,
      color-mix(in srgb, var(--splash-primary) 12%, transparent),
      transparent 65%
    );
    opacity: 1;
  }
  
  .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__grid {
    opacity: 0.4;
    background-image: repeating-linear-gradient(
      0deg,
      transparent 0 10px,
      color-mix(in srgb, var(--splash-primary) 7%, transparent) 10px 11px
    );
    mask-image: radial-gradient(ellipse 72% 58% at 50% 48%, black 18%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 48%, black 18%, transparent 75%);
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__grid {
    opacity: 0.35;
    background-image: repeating-linear-gradient(
      0deg,
      transparent 0 12px,
      color-mix(in srgb, var(--splash-primary) 9%, transparent) 12px 13px
    );
  }
  
  .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__star {
    background: var(--splash-gold);
    box-shadow:
      0 0 8px color-mix(in srgb, var(--splash-primary) 80%, transparent),
      0 0 18px color-mix(in srgb, var(--splash-primary) 45%, transparent);
  }
  
  .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__mark {
    background: radial-gradient(
      circle at 32% 28%,
      color-mix(in srgb, var(--splash-primary) 35%, #0f172a) 0%,
      color-mix(in srgb, var(--splash-primary) 18%, #020617) 55%,
      #020617 100%
    );
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--splash-primary) 85%, #fff),
      0 0 0 5px color-mix(in srgb, var(--splash-primary) 25%, #000),
      0 0 2px color-mix(in srgb, var(--splash-primary) 55%, transparent),
      0 20px 44px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__mark {
    background: radial-gradient(
      circle at 32% 26%,
      #fff 0%,
      color-mix(in srgb, var(--splash-primary) 8%, #fff) 50%,
      #ecfdf5 100%
    );
    box-shadow:
      0 0 0 2px var(--splash-primary),
      0 0 0 4px color-mix(in srgb, var(--splash-primary) 15%, #fff),
      0 14px 32px color-mix(in srgb, var(--splash-primary) 22%, transparent);
  }
  
  .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__ripple {
    border-color: color-mix(in srgb, var(--splash-primary) 65%, var(--splash-gold));
  }
  
  .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__spinner {
    border-color: color-mix(in srgb, var(--splash-primary) 40%, transparent);
    border-top-color: var(--splash-gold);
    border-right-color: var(--splash-primary);
    box-shadow: 0 0 20px color-mix(in srgb, var(--splash-primary) 50%, transparent);
  }
  
  .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__reels {
    border-color: color-mix(in srgb, var(--splash-primary) 45%, transparent);
    background: color-mix(in srgb, #000 78%, transparent);
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__reels {
    background: color-mix(in srgb, var(--splash-page-bg, #fff) 92%, var(--splash-primary));
  }
  
  .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__reel {
    border-color: color-mix(in srgb, var(--splash-primary) 35%, transparent);
    background: color-mix(in srgb, #000 70%, transparent);
  }
  
  .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__reel-strip {
    background: repeating-linear-gradient(
      180deg,
      var(--splash-primary) 0 16%,
      #020617 16% 32%,
      var(--splash-gold) 32% 48%,
      var(--splash-primary) 48% 64%,
      #020617 64% 80%,
      var(--splash-primary) 80% 100%
    );
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__reel {
    background: #e5e7eb;
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__reel-strip {
    background: repeating-linear-gradient(
      180deg,
      var(--splash-primary) 0 18%,
      #f8fafc 18% 36%,
      color-mix(in srgb, var(--splash-primary) 70%, #fff) 36% 54%,
      var(--splash-primary) 54% 72%,
      #f8fafc 72% 90%,
      var(--splash-primary) 90% 100%
    );
  }
  
  .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__track {
    background: color-mix(in srgb, var(--splash-primary) 15%, #000);
    box-shadow: 0 0 16px color-mix(in srgb, var(--splash-primary) 25%, transparent);
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__track {
    background: color-mix(in srgb, var(--splash-primary) 12%, #e5e7eb);
  }
  
  .page-loading .splash-screen.splash-screen--sportsbook .splash-screen__fill {
    background: linear-gradient(
      90deg,
      var(--splash-primary),
      var(--splash-gold),
      var(--splash-primary)
    );
    box-shadow: 0 0 18px color-mix(in srgb, var(--splash-primary) 65%, transparent);
  }
  
  /* -----------------------------------------------------------------------------
     Theme variants
     ----------------------------------------------------------------------------- */
  
  @keyframes splash-broadcast-scan {
    0% { background-position: 0 0; }
    100% { background-position: 0 5px; }
  }
  
  .page-loading .splash-screen.splash-screen--broadcast {
    overflow: hidden;
    outline: 2px solid color-mix(in srgb, var(--splash-primary) 42%, transparent);
    outline-offset: -12px;
    background-image:
      radial-gradient(
        ellipse 90% 55% at 50% 0%,
        color-mix(in srgb, var(--splash-primary) 28%, transparent),
        transparent 58%
      ),
      radial-gradient(
        ellipse 70% 45% at 0% 100%,
        color-mix(in srgb, #38bdf8 12%, transparent),
        transparent 55%
      ),
      radial-gradient(
        ellipse 60% 40% at 100% 85%,
        color-mix(in srgb, var(--splash-primary) 14%, transparent),
        transparent 50%
      );
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--broadcast {
    background-image:
      radial-gradient(
        ellipse 88% 52% at 50% 0%,
        color-mix(in srgb, var(--splash-primary) 14%, transparent),
        transparent 55%
      ),
      radial-gradient(
        ellipse 65% 42% at 0% 100%,
        color-mix(in srgb, var(--splash-primary) 8%, transparent),
        transparent 52%
      ),
      radial-gradient(
        ellipse 58% 38% at 100% 90%,
        color-mix(in srgb, var(--splash-primary) 10%, transparent),
        transparent 48%
      );
  }
  
  .page-loading .splash-screen.splash-screen--broadcast::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.2;
    background-image: repeating-linear-gradient(
      0deg,
      transparent 0 4px,
      color-mix(in srgb, #fff 10%, transparent) 4px 5px
    );
    background-size: 100% 5px;
    animation: splash-broadcast-scan 5.5s linear infinite;
  }
  
  .page-loading .splash-screen.splash-screen--broadcast .splash-screen__ambient {
    background: radial-gradient(
      ellipse 70% 50% at 50% 100%,
      transparent 25%,
      rgba(0, 0, 0, 0.55) 100%
    );
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--broadcast .splash-screen__ambient {
    background: radial-gradient(
      ellipse 68% 48% at 50% 100%,
      transparent 35%,
      rgba(15, 23, 42, 0.06) 100%
    );
  }
  
  .page-loading .splash-screen.splash-screen--broadcast .splash-screen__grid {
    opacity: 0.1;
    background-image:
      linear-gradient(color-mix(in srgb, var(--splash-primary) 22%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--splash-primary) 22%, transparent) 1px, transparent 1px);
    background-size: 22px 22px, 22px 22px;
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--broadcast .splash-screen__grid {
    opacity: 0.08;
  }
  
  .page-loading .splash-screen.splash-screen--broadcast .splash-screen__sparkles {
    display: none;
  }
  
  .page-loading .splash-screen.splash-screen--broadcast .splash-screen__inner {
    z-index: 2;
  }
  
  .page-loading .splash-screen.splash-screen--broadcast .splash-screen__mark {
    border-radius: 20px;
    animation-duration: 4.2s;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--splash-gold) 85%, var(--splash-primary)),
      0 0 0 5px color-mix(in srgb, var(--splash-primary) 45%, #020617),
      0 20px 48px rgba(0, 0, 0, 0.5),
      inset 0 1px 10px color-mix(in srgb, #fff 18%, transparent);
  }
  
  .page-loading .splash-screen.splash-screen--broadcast .splash-screen__mark::after {
    border-radius: 20px;
    animation-duration: 3.4s;
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--broadcast .splash-screen__mark {
    box-shadow:
      0 0 0 2px var(--splash-gold),
      0 0 0 4px color-mix(in srgb, var(--splash-primary) 28%, #e7e5e4),
      0 18px 40px rgba(28, 25, 23, 0.14),
      inset 0 1px 8px #fff;
  }
  
  .page-loading .splash-screen.splash-screen--broadcast .splash-screen__reels {
    border-color: color-mix(in srgb, var(--splash-primary) 40%, transparent);
    background: color-mix(in srgb, #020617 78%, transparent);
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--broadcast .splash-screen__reels {
    background: color-mix(in srgb, var(--splash-page-bg, #fff) 90%, #0f172a);
  }
  
  .page-loading .splash-screen.splash-screen--broadcast .splash-screen__reel-strip {
    animation-duration: 0.85s;
    background: repeating-linear-gradient(
      180deg,
      var(--splash-primary) 0 22%,
      #0f172a 22% 44%,
      color-mix(in srgb, #38bdf8 65%, var(--splash-primary)) 44% 66%,
      #0f172a 66% 88%,
      var(--splash-primary) 88% 100%
    );
  }
  
  .page-loading .splash-screen.splash-screen--broadcast .splash-screen__track {
    background: color-mix(in srgb, #020617 82%, var(--splash-primary));
    box-shadow: 0 0 20px color-mix(in srgb, var(--splash-primary) 20%, transparent);
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--broadcast .splash-screen__track {
    background: color-mix(in srgb, var(--splash-primary) 14%, #e2e8f0);
  }
  
  .page-loading .splash-screen.splash-screen--broadcast .splash-screen__fill {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, #38bdf8 35%, var(--splash-primary)),
      var(--splash-gold),
      var(--splash-primary)
    );
    box-shadow: 0 0 16px color-mix(in srgb, var(--splash-primary) 55%, transparent);
  }
  
  /* Minimal */
  
  .splash-screen__loading-text {
    display: none;
    margin: 0;
    max-width: 18rem;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: inherit;
    opacity: 0.9;
    animation: splash-loading-pulse 2s ease-in-out infinite;
  }
  
  .page-loading .splash-screen.splash-screen--minimal .splash-screen__loading-text {
    display: block;
  }
  
  @keyframes splash-loading-pulse {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
  }
  
  .page-loading .splash-screen.splash-screen--minimal .splash-screen__sparkles,
  .page-loading .splash-screen.splash-screen--minimal .splash-screen__reels,
  .page-loading .splash-screen.splash-screen--minimal .splash-screen__ripple {
    display: none;
  }
  
  .page-loading .splash-screen.splash-screen--minimal .splash-screen__grid {
    opacity: 0;
  }
  
  .page-loading .splash-screen.splash-screen--minimal .splash-screen__ambient {
    background: radial-gradient(
      ellipse 60% 45% at 50% 100%,
      transparent 40%,
      rgba(0, 0, 0, 0.22) 100%
    );
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--minimal .splash-screen__ambient {
    background: radial-gradient(
      ellipse 58% 42% at 50% 100%,
      transparent 45%,
      rgba(15, 23, 42, 0.04) 100%
    );
  }
  
  .page-loading .splash-screen.splash-screen--minimal .splash-screen__load-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1.75rem 2rem 1.85rem;
    box-sizing: border-box;
    min-width: 20rem;
    width: 20rem;
    max-width: 20rem;
    border-radius: 1.25rem;
    background: linear-gradient(
      155deg,
      color-mix(in srgb, var(--splash-page-bg, #0f172a) 78%, #000) 0%,
      color-mix(in srgb, var(--splash-primary) 18%, var(--splash-page-bg, #0f172a)) 48%,
      color-mix(in srgb, var(--splash-page-bg, #0f172a) 85%, #020617) 100%
    );
    border: 1px solid color-mix(in srgb, var(--splash-primary) 42%, transparent);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--minimal .splash-screen__load-card {
    background: linear-gradient(
      165deg,
      color-mix(in srgb, #fff 94%, var(--splash-primary)) 0%,
      color-mix(in srgb, var(--splash-page-bg, #f6f7fa) 88%, var(--splash-primary)) 55%,
      color-mix(in srgb, var(--splash-page-bg, #f6f7fa) 92%, #e2e8f0) 100%
    );
    border: 1px solid color-mix(in srgb, var(--splash-primary) 28%, #cbd5e1);
    box-shadow:
      0 0 0 1px #fff,
      0 20px 48px rgba(15, 23, 42, 0.1),
      0 0 32px color-mix(in srgb, var(--splash-primary) 8%, transparent),
      inset 0 1px 0 #fff;
  }
  
  .page-loading .splash-screen.splash-screen--minimal .splash-screen__inner {
    gap: 1.25rem;
    padding: 1.75rem 1.25rem 5rem;
  }
  
  .page-loading .splash-screen.splash-screen--minimal .splash-screen__mark {
    background: radial-gradient(
      circle at 32% 28%,
      color-mix(in srgb, var(--splash-primary) 35%, #0f172a) 0%,
      color-mix(in srgb, var(--splash-primary) 18%, #020617) 55%,
      #020617 100%
    );
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--splash-primary) 85%, #fff),
      0 0 0 5px color-mix(in srgb, var(--splash-primary) 25%, #000),
      0 0 28px color-mix(in srgb, var(--splash-primary) 55%, transparent),
      0 20px 44px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
  }
  
  html[data-bs-theme="light"] .page-loading .splash-screen.splash-screen--minimal .splash-screen__mark {
    background: radial-gradient(
      circle at 32% 26%,
      #fff 0%,
      color-mix(in srgb, var(--splash-primary) 8%, #fff) 50%,
      #ecfdf5 100%
    );
    box-shadow:
      0 0 0 2px var(--splash-primary),
      0 0 0 4px color-mix(in srgb, var(--splash-primary) 15%, #fff),
      0 14px 32px color-mix(in srgb, var(--splash-primary) 22%, transparent);
  }
  
  .page-loading .splash-screen.splash-screen--minimal .splash-screen__spinner {
    border-color: color-mix(in srgb, var(--splash-primary) 40%, transparent);
    border-top-color: var(--splash-gold);
    border-right-color: var(--splash-primary);
    box-shadow: 0 0 20px color-mix(in srgb, var(--splash-primary) 50%, transparent);
    animation: splash-spin-wobble 1.35s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }
  
  /* Logo-only mode */
  
  .page-loading .splash-screen.splash-screen--logo-only .loading-container,
  .page-loading .splash-screen.splash-screen--logo-only .splash-screen__spinner,
  .page-loading .splash-screen.splash-screen--logo-only .splash-screen__loading-text,
  .page-loading .splash-screen.splash-screen--logo-only .splash-screen__ripple,
  .page-loading .splash-screen.splash-screen--logo-only .splash-screen__reels,
  .page-loading .splash-screen.splash-screen--logo-only .splash-screen__sparkles,
  .page-loading .splash-screen.splash-screen--logo-only .splash-screen__grid,
  .page-loading .splash-screen.splash-screen--logo-only .splash-screen__track,
  .page-loading.splash-logo-only .splash-screen .loading-container,
  .page-loading.splash-logo-only .splash-screen .splash-screen__spinner,
  .page-loading.splash-logo-only .splash-screen .splash-screen__loading-text,
  .page-loading.splash-logo-only .splash-screen .splash-screen__ripple,
  .page-loading.splash-logo-only .splash-screen .splash-screen__reels,
  .page-loading.splash-logo-only .splash-screen .splash-screen__sparkles,
  .page-loading.splash-logo-only .splash-screen .splash-screen__grid,
  .page-loading.splash-logo-only .splash-screen .splash-screen__track {
    display: none !important;
  }
  
  .page-loading .splash-screen.splash-screen--logo-only .splash-screen__load-card,
  .page-loading.splash-logo-only .splash-screen .splash-screen__load-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  .page-loading .splash-screen.splash-screen--logo-only .splash-screen__mark,
  .page-loading.splash-logo-only .splash-screen .splash-screen__mark {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
  }
  
  .page-loading .splash-screen.splash-screen--logo-only .splash-screen__mark::after,
  .page-loading.splash-logo-only .splash-screen .splash-screen__mark::after {
    display: none !important;
  }
  
  @media (min-width: 1024px) {
    .page-loading .splash-screen.splash-screen--minimal .splash-screen__load-card {
      min-width: 30rem;
      width: 30rem;
      max-width: 30rem;
    }
  }
  
  .page-loading .splash-screen #splash-logo {
    display: none;
    max-width: min(360px, 80vw) !important;
    width: min(360px, 80vw) !important;
    height: auto !important;
    margin: 0 auto !important;
    will-change: filter, transform;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.35));
    animation: splash-logo-glow 2.2s ease-in-out infinite;
  }
  
  .page-loading .splash-screen.splash-screen--logo-only #splash-logo,
  .page-loading.splash-logo-only .splash-screen #splash-logo {
    display: block !important;
  }
  
  @keyframes splash-logo-glow {
    0%, 100% {
      filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
      transform: scale(1);
    }
    50% {
      filter:
        drop-shadow(0 12px 30px rgba(0, 0, 0, 0.48))
        drop-shadow(0 0 24px color-mix(in srgb, var(--splash-primary) 52%, transparent))
        drop-shadow(0 0 12px color-mix(in srgb, #ffffff 30%, transparent));
      transform: scale(1.02);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .splash-screen__ripple,
    .splash-screen__spinner,
    .splash-screen__fill,
    .splash-screen__mark,
    .splash-screen__mark::after,
    .splash-screen__star,
    .splash-screen__reel-strip,
    .splash-screen__loading-text,
    .page-loading .splash-screen #splash-logo {
      animation: none !important;
    }
  
    .splash-screen__ripple {
      opacity: 0.2;
      width: 150%;
      height: 150%;
    }
  
    .splash-screen__fill {
      width: 100%;
      transform: none;
      background-position: 50% 50%;
    }
  
    .splash-screen__mark::after {
      opacity: 0;
    }
  
    .splash-screen__star {
      opacity: 0.45;
      transform: scale(0.85);
    }
  
    .page-loading .splash-screen.splash-screen--broadcast::after {
      animation: none;
      opacity: 0.12;
    }
  }