/* =========================================================================
   CRICKET PREMIER LEAGUE — DESKTOP VIEW ARCHITECTURE (DESIGN 1)
   Strictly scoped to @media (min-width: 1024px)
   0% impact on Mobile View (< 1024px)
   Full-Width Workspace + Fixed Horizontal Top Bar + Large Desktop Typography
   ========================================================================= */

@media (max-width: 1023.98px) {
  .cpl-desktop-only-nav,
  .cpl-desktop-header-art-layer,
  .cpl-desktop-header-art-svg,
  .cpl-nav-divider,
  .cpl-live-portal-pill,
  .cpl-dock-home-pill,
  #app-footer,
  .cpl-desktop-lower-bar,
  .cpl-hub-desktop-only {
    display: none !important;
  }
  .cpl-landing-bento-grid {
    display: contents !important;
  }

  /* Mobile "Create Tournament" Unified Shape (Banner + Auction + Fixture) */
  .cpl-bento-create {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px -2px rgba(14, 165, 233, 0.16), 0 0 18px -4px rgba(251, 191, 36, 0.12), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    padding: 8px !important;
    margin-top: 12px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    max-width: 480px !important;
    box-sizing: border-box !important;
  }

  /* 1. Upper Banner Card with Radiant Shape Background Light */
  .cpl-create-banner-card {
    width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    background: #ffffff !important;
    display: block !important;
    cursor: pointer !important;
    animation: cplShapeBacklightMobile 6s ease-in-out infinite alternate !important;
    transition: transform 0.15s ease !important;
  }
  .cpl-create-banner-card:active {
    transform: scale(0.98) !important;
  }
  .cpl-create-banner-card img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }

  /* Remove running border light on mobile view per user specification */
  .cpl-create-banner-card .cpl-border-beam {
    display: none !important;
  }

  /* 2. Mode Cards Row (Auction & Fixture) */
  .cpl-bento-create .grid.grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }

  .cpl-create-mode-card {
    width: 100% !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.15s ease !important;
  }
  .cpl-create-mode-card:active {
    transform: scale(0.98) !important;
  }

  .cpl-create-mode-card.mode-box-auction {
    border: 1.5px solid #fed7aa !important;
    background: #fff7ed !important;
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.08) !important;
  }

  .cpl-create-mode-card.mode-box-fixture {
    border: 1.5px solid #bbf7d0 !important;
    background: #f0fdf4 !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08) !important;
  }

  .cpl-create-mode-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    object-position: center !important;
    display: block !important;
  }

  /* Mobile: Tournaments Carousel with 4px side padding (parent px-3 is 12px, pull out by -8px) */
  .cpl-bento-tournaments {
    margin-left: -8px !important;
    margin-right: -8px !important;
    width: calc(100% + 16px) !important;
    max-width: none !important;
  }

  .cpl-bento-tournaments #tourney-carousel-wrapper {
    border-radius: 10px !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .cpl-bento-tournaments .tourney-card {
    border-radius: 10px !important;
  }

  .cpl-bento-tournaments #tourney-carousel-dots {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* =========================================================================
   UNIVERSAL REGISTERED PLAYERS MARQUEE (Applies to Both Mobile & Desktop)
   ========================================================================= */
@keyframes cplMarqueeSlideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.cpl-marquee-track {
  display: flex !important;
  align-items: flex-start !important;
  width: max-content !important;
  animation: cplMarqueeSlideLeft 85s linear infinite !important;
  will-change: transform !important;
}

/* Solid Carousel Hold: Hovering or tapping firmly pauses the glide */
.cpl-marquee-stage:hover .cpl-marquee-track,
.cpl-marquee-track:hover,
.cpl-player-track-card:hover,
.cpl-player-track-card:active,
.cpl-player-track-card.active-touch {
  animation-play-state: paused !important;
}

.cpl-players-slider-section {
  display: block !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 14px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  z-index: 10 !important;
}

.cpl-player-track-card {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  background: transparent !important;
  cursor: pointer !important;
  opacity: 0.98 !important;
}

/* Default State: Pure Black & White (B&W) on All Viewports (Mobile & Desktop) */
.cpl-marquee-track .cpl-player-track-card .cpl-player-track-img,
img.cpl-player-track-img {
  filter: blur(1.5px) grayscale(100%) contrast(1.08) brightness(0.96) !important;
  opacity: 1 !important;
  transform: scale(0.97) !important;
  transition: filter 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: filter, transform !important;
}

.cpl-player-track-name {
  color: #475569 !important; /* Muted slate for B&W harmony */
  transition: color 0.3s ease !important;
}

.cpl-player-track-cat {
  filter: grayscale(100%) !important;
  transition: filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Active / Hover State: Unblurs into vivid color and pops up */
.cpl-player-track-card:hover,
.cpl-player-track-card:active,
.cpl-player-track-card.active-touch {
  transform: translateY(-6px) !important;
  opacity: 1 !important;
  z-index: 30 !important;
}

.cpl-marquee-track .cpl-player-track-card:hover .cpl-player-track-img,
.cpl-player-track-card:hover img.cpl-player-track-img,
.cpl-marquee-track .cpl-player-track-card:active .cpl-player-track-img,
.cpl-player-track-card:active img.cpl-player-track-img,
.cpl-marquee-track .cpl-player-track-card.active-touch .cpl-player-track-img,
.cpl-player-track-card.active-touch img.cpl-player-track-img {
  filter: blur(0px) grayscale(0%) brightness(1.12) saturate(1.30) contrast(1.06) !important;
  opacity: 1 !important;
  transform: scale(1.12) !important;
}

.cpl-player-track-card:hover .cpl-player-track-name,
.cpl-player-track-card:active .cpl-player-track-name,
.cpl-player-track-card.active-touch .cpl-player-track-name {
  color: #047857 !important;
  opacity: 1 !important;
}

.cpl-player-track-card:hover .cpl-player-track-cat,
.cpl-player-track-card:active .cpl-player-track-cat,
.cpl-player-track-card.active-touch .cpl-player-track-cat {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35) !important;
}

/* Mobile-Specific Dimensions (< 1024px): 
   Fits at least 5 player cards across screen, runs smoothly */
@media (max-width: 1023.98px) {
  .cpl-players-slider-section {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .cpl-player-track-card {
    width: 66px !important;
    padding: 2px !important;
  }

  .cpl-marquee-track {
    gap: 8px !important;
    animation: cplMarqueeSlideLeft 60s linear infinite !important;
  }

  .cpl-marquee-blur-left,
  .cpl-marquee-blur-right {
    width: 20px !important;
  }

  .cpl-player-track-card:hover,
  .cpl-player-track-card:active,
  .cpl-player-track-card.active-touch {
    transform: translateY(-3px) scale(1.06) !important;
  }
}

@media (min-width: 1024px) {

  /* -----------------------------------------------------------------------
     1. GLOBAL BODY, FULL-WIDTH CONTAINER & DESKTOP TYPOGRAPHY SCALE UP
     ----------------------------------------------------------------------- */
  body {
    padding-left: 0 !important;
    padding-top: 76px !important;
    padding-bottom: 56px !important;
    background-color: #f1f5f9;
    font-size: 17px !important;
  }

  /* DESKTOP HOME / LANDING PAGE (Smooth Vertical Scroll with Full Trail Visibility) */
  body:has(.cpl-landing-root) {
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 76px !important;
    padding-bottom: 72px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  #main-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body:has(.cpl-landing-root) #main-content {
    flex: 1 0 auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 24px !important;
    overflow: visible !important;
  }

  /* Comprehensive Desktop Font Scaling (including Tailwind sm:/md: responsive variants) */
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[6px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[7px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[7.5px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[8px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[8.5px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[9px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[9.5px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[10px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[10.5px]"] {
    font-size: 14.5px !important;
    line-height: 1.4 !important;
  }

  #main-content:not(:has(.cpl-landing-root)) [class*="text-[11px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[11.5px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[12px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[12.5px]"],
  #main-content:not(:has(.cpl-landing-root)) .text-xs,
  #main-content:not(:has(.cpl-landing-root)) [class*="sm:text-xs"] {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  #main-content:not(:has(.cpl-landing-root)) [class*="text-[13px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[14px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[14.5px]"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[15px]"],
  #main-content:not(:has(.cpl-landing-root)) .text-sm,
  #main-content:not(:has(.cpl-landing-root)) [class*="sm:text-sm"] {
    font-size: 18px !important;
    line-height: 1.45 !important;
  }

  #main-content:not(:has(.cpl-landing-root)) .text-base,
  #main-content:not(:has(.cpl-landing-root)) [class*="sm:text-base"],
  #main-content:not(:has(.cpl-landing-root)) [class*="text-[17px]"] {
    font-size: 21px !important;
    line-height: 1.4 !important;
  }

  #main-content:not(:has(.cpl-landing-root)) .text-lg,
  #main-content:not(:has(.cpl-landing-root)) [class*="sm:text-lg"],
  #main-content:not(:has(.cpl-landing-root)) .text-xl,
  #main-content:not(:has(.cpl-landing-root)) [class*="sm:text-xl"] {
    font-size: 25px !important;
    line-height: 1.35 !important;
  }

  /* -----------------------------------------------------------------------
     2. FIXED HORIZONTAL TOP NAVIGATION BAR (#mobile-bottom-nav ON DESKTOP)
     ----------------------------------------------------------------------- */
  #mobile-bottom-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: 68px !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #f1f6fd 0%, #ffffff 100%) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1.5px solid #dbeafe !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(37, 99, 235, 0.04) !important;
    z-index: 70 !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  #mobile-bottom-nav .cpl-desktop-header-art-layer {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  #mobile-bottom-nav .cpl-header-art-left {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 340px !important;
    height: 100% !important;
    pointer-events: none !important;
  }

  #mobile-bottom-nav .cpl-header-art-right {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 520px !important;
    height: 100% !important;
    pointer-events: none !important;
  }

  #mobile-bottom-nav .cpl-floating-dock-outer {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    filter: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #mobile-bottom-nav #cpl-dock-bg-svg,
  #mobile-bottom-nav .cpl-dock-home-pill {
    display: none !important;
  }

  /* Compact Left Brand Header inside Horizontal Top Bar */
  #mobile-bottom-nav #mob-nav-desktop-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 20 !important;
    position: relative !important;
    padding: 0 !important;
    margin-left: 24px !important;
    border: none !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }

  #mobile-bottom-nav #mob-nav-desktop-brand img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 13px !important;
    border: 1.5px solid rgba(59, 130, 246, 0.25) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1) !important;
  }

  #mobile-bottom-nav #mob-nav-desktop-brand span.font-black {
    font-size: 23px !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
  }

  #mobile-bottom-nav #mob-nav-desktop-brand .cpl-live-portal-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 2px 9px !important;
    margin-top: 3px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
    border-radius: 9999px !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
  }

  #mobile-bottom-nav #mob-nav-desktop-brand .cpl-live-portal-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 9999px !important;
    background: #22c55e !important;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.8) !important;
  }

  /* Docked Top Navigation Pill (Identical Color & Border to Right-Side Social Dock) */
  #mobile-bottom-nav .cpl-floating-dock {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: auto !important;
    height: 52px !important;
    padding: 0 10px !important;
    min-height: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 24px 24px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
    z-index: 20 !important;
  }

  #mobile-bottom-nav .cpl-floating-dock > div {
    width: auto !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  #mobile-bottom-nav .cpl-nav-divider,
  #mobile-bottom-nav .cpl-dock-divider {
    display: none !important;
  }

  #mobile-bottom-nav .mob-dock-item {
    width: auto !important;
    max-width: none !important;
    height: 44px !important;
    border-radius: 9999px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  #mobile-bottom-nav .cpl-floating-dock button.bg-gradient-to-b {
    background: #1a56db !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    padding: 0 22px !important;
    box-shadow: 0 3px 12px rgba(26, 86, 219, 0.4) !important;
  }

  #mobile-bottom-nav .cpl-floating-dock button.bg-gradient-to-b svg {
    color: #ffffff !important;
    fill: #ffffff !important;
  }

  #mobile-bottom-nav .cpl-floating-dock button.bg-gradient-to-b span {
    color: #ffffff !important;
    font-weight: 800 !important;
  }

  #mobile-bottom-nav .cpl-floating-dock button:not(.bg-gradient-to-b) {
    background: transparent !important;
    color: #0f172a !important;
    border-radius: 9999px !important;
    padding: 0 16px !important;
  }

  #mobile-bottom-nav .cpl-floating-dock button:not(.bg-gradient-to-b):hover {
    background: rgba(255, 255, 255, 0.65) !important;
  }

  #mobile-bottom-nav .mob-dock-item svg,
  #mobile-bottom-nav .mob-dock-item img.cpl-nav-icon-img {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    transition: transform 0.2s ease !important;
  }

  #mobile-bottom-nav .mob-dock-item:hover svg,
  #mobile-bottom-nav .mob-dock-item:hover img.cpl-nav-icon-img {
    transform: scale(1.15) !important;
  }

  #mobile-bottom-nav .mob-dock-item span {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
  }

  /* Hide green dot inside top horizontal nav button to match clean pill mockup */
  #mobile-bottom-nav .mob-dock-item > div {
    display: none !important;
  }

  /* On desktop, hide 6th item from dock (Profile container) since it is placed on the far right */
  #mobile-bottom-nav .cpl-floating-dock > div:nth-child(6) {
    display: none !important;
  }

  /* Desktop-only subtle vertical dividers between all center items */
  #mobile-bottom-nav .cpl-floating-dock > div:nth-child(1),
  #mobile-bottom-nav .cpl-floating-dock > div:nth-child(2),
  #mobile-bottom-nav .cpl-floating-dock > div:nth-child(3),
  #mobile-bottom-nav .cpl-floating-dock > div:nth-child(4) {
    border-right: 1px solid rgba(203, 213, 225, 0.7) !important;
    padding-right: 6px !important;
    margin-right: 6px !important;
  }

  /* Desktop Far-Right User Avatar Profile Button in Upper Right Corner */
  #mobile-bottom-nav #mob-nav-desktop-avatar-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
    padding: 4px 14px 4px 5px !important;
    border: 1px solid rgba(203, 213, 225, 0.95) !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
    cursor: pointer !important;
    z-index: 20 !important;
    transition: all 0.2s ease !important;
  }

  #mobile-bottom-nav #mob-nav-desktop-avatar-btn:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1) !important;
  }

  /* Hide + Host League Button from the upper header */
  #mobile-bottom-nav .cpl-floating-dock-outer > .cpl-desktop-only-nav:last-of-type,
  #mobile-bottom-nav #mob-nav-desktop-host {
    display: none !important;
  }

  /* Admin Panel single left sidebar adjustments on desktop */
  #admin-sidebar-nav {
    top: 104px !important;
    width: 250px !important;
    padding: 14px !important;
  }

  /* -----------------------------------------------------------------------
     3. HIDE UPPER HEADER BANNER IMAGES & UPPER STATS ON DESKTOP
     (Transferred to Desktop Signature Lower Bar: Online | Visitors | Players)
     ----------------------------------------------------------------------- */
  #app-navbar,
  .cpl-header-hero-wrapper,
  .cpl-landing-root > .hero-stats-bar,
  .hero-stats-bar,
  .hero-stats-bar-header,
  #nav-profile-btn,
  #app-compact-navbar {
    display: none !important;
  }

  /* -----------------------------------------------------------------------
     4. HOME PAGE (SINGLE SCREEN VIEW: HERO STATS + 2-COL SPLIT STAGE)
     ----------------------------------------------------------------------- */
  #main-content .cpl-landing-root {
    max-width: 1400px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  /* Landing Page Typography Scale — balanced for Single Screen Desktop Viewport */
  #main-content .cpl-landing-root [class*="text-[7px]"],
  #main-content .cpl-landing-root [class*="text-[8px]"],
  #main-content .cpl-landing-root [class*="text-[8.5px]"],
  #main-content .cpl-landing-root [class*="text-[9px]"],
  #main-content .cpl-landing-root [class*="text-[9.5px]"],
  #main-content .cpl-landing-root [class*="text-[10px]"],
  #main-content .cpl-landing-root [class*="text-[10.5px]"] {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  #main-content .cpl-landing-root [class*="text-[11px]"],
  #main-content .cpl-landing-root [class*="text-[11.5px]"],
  #main-content .cpl-landing-root [class*="text-[12px]"],
  #main-content .cpl-landing-root .text-xs {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  #main-content .cpl-landing-root [class*="text-[13px]"],
  #main-content .cpl-landing-root [class*="text-[14px]"],
  #main-content .cpl-landing-root .text-sm {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }

  /* Bento Grid — Sized for 400px x 250px Tournaments Showcase */
  /* Bento Grid — 780px Tournaments Column + Responsive Right Column */
  .cpl-landing-bento-grid {
    display: grid !important;
    grid-template-columns: 780px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    overflow: visible !important;
  }

  .cpl-landing-bento-grid > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .cpl-landing-bento-grid > .cpl-bento-countdown {
    display: none !important;
  }

  /* Tournaments Showcase Card: Fixed Width 780px & Height Sized for 300px Poster */
  .cpl-bento-tournaments {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 780px !important;
    min-width: 780px !important;
    max-width: 780px !important;
    height: 396px !important;
    min-height: 396px !important;
    max-height: 396px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 8px 12px 6px 12px !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .cpl-bento-tournaments > div:first-child {
    margin-bottom: 2px !important;
    flex-shrink: 0 !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .cpl-bento-tournaments > div:first-child h3 {
    font-size: 15px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #0F172A !important;
  }

  .cpl-bento-tournaments > div:first-child h3 svg,
  .cpl-bento-tournaments > div:first-child h3 i {
    width: 18px !important;
    height: 18px !important;
    color: #D97706 !important;
  }

  #landing-tournaments-count-badge {
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 2px 9px !important;
    background: #DCFCE7 !important;
    color: #15803D !important;
    border: 1px solid #86EFAC !important;
    border-radius: 9999px !important;
  }

  #landing-tournament-search {
    display: none !important;
  }

  #landing-tournaments-content {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    flex: 1 !important;
  }

  .cpl-bento-tournaments #tourney-carousel-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    flex: 1 !important;
  }

  .cpl-bento-tournaments #carousel-prev-btn,
  .cpl-bento-tournaments #carousel-next-btn {
    display: flex !important;
    position: absolute !important;
    top: 150px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    z-index: 25 !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
  }

  .cpl-bento-tournaments #carousel-prev-btn:hover,
  .cpl-bento-tournaments #carousel-next-btn:hover {
    background: #ffffff !important;
    transform: scale(1.1) !important;
  }

  .cpl-bento-tournaments #carousel-prev-btn {
    left: 10px !important;
  }

  .cpl-bento-tournaments #carousel-next-btn {
    right: 10px !important;
  }

  .cpl-bento-tournaments .tourney-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    height: 100% !important;
  }

  .cpl-bento-tournaments .tourney-card > div:first-child {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    aspect-ratio: auto !important;
    border-radius: 14px 14px 0 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .cpl-bento-tournaments .tourney-card > div:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Tournament Card Footer: Left Name | Center Venue | Right View Pill */
  .cpl-bento-tournaments .tourney-card > div:last-child {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 2px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
  }

  .cpl-bento-tournaments .tourney-card > div:last-child > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    flex: 1 !important;
    padding-right: 10px !important;
  }

  .cpl-bento-tournaments .tourney-card > div:last-child h4 {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #0F172A !important;
    flex-shrink: 0 !important;
  }

  .cpl-bento-tournaments .tourney-card > div:last-child > div:first-child > div {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748B !important;
  }

  .cpl-bento-tournaments .tourney-card > div:last-child > div:last-child {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    padding: 5px 16px !important;
    border-radius: 9999px !important;
    background: #059669 !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 4px rgba(5, 150, 105, 0.25) !important;
  }

  .cpl-bento-tournaments #tourney-carousel-dots {
    padding: 3px 0 0 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .cpl-bento-tournaments #carousel-notice-ticker-bar {
    max-width: 100% !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
  }

  /* Search results grid */
  .cpl-bento-tournaments #landing-tournaments-grid:not(.hidden) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
  }

  /* RIGHT COLUMN (ROW 1): Create Tournament Section in Single White Shape with Light Borders */
  .cpl-bento-create {
    grid-column: 2 !important;
    grid-row: 1 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 396px !important;
    min-height: 396px !important;
    max-height: 396px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    gap: 10px !important;
  }

  .cpl-create-banner-card {
    width: 100% !important;
    height: 196px !important;
    min-height: 196px !important;
    max-height: 196px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: none !important;
    cursor: pointer !important;
    animation: cplMultiColorHalo 7s ease-in-out infinite alternate !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    background: transparent !important;
  }

  .cpl-create-banner-card:hover {
    transform: translateY(-2px) !important;
    border: none !important;
    animation: cplMultiColorHaloHover 7s ease-in-out infinite alternate !important;
  }

  .cpl-create-banner-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  .cpl-bento-create .grid.grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-items: stretch !important;
  }

  .cpl-create-mode-card {
    width: 100% !important;
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease !important;
    position: relative !important;
    background: #ffffff !important;
  }

  .cpl-create-mode-card.mode-box-auction {
    border: 1.5px solid #fed7aa !important;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }

  .cpl-create-mode-card.mode-box-auction:hover {
    transform: translateY(-2px) !important;
    border-color: #f97316 !important;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.2) !important;
  }

  .cpl-create-mode-card.mode-box-fixture {
    border: 1.5px solid #bbf7d0 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }

  .cpl-create-mode-card.mode-box-fixture:hover {
    transform: translateY(-2px) !important;
    border-color: #10b981 !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2) !important;
  }

  .cpl-create-mode-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    object-position: center !important;
    display: block !important;
  }

  /* -----------------------------------------------------------------------
     4b. DESKTOP "⚡ QUICK LINKS" SECTION & 3 CARDS MATCHING MOCKUP
     ----------------------------------------------------------------------- */
  .cpl-desktop-quick-links-section {
    display: block !important;
    width: 100% !important;
    max-width: 950px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
    position: relative !important;
  }

  /* Seamless Connected Quick Links Tab Badge */
  .cpl-quick-tab-badge {
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
    padding: 0 14px 0 12px !important;
    background: #0062FF !important;
    color: #ffffff !important;
    border-top-left-radius: 18px !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 18px !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: -1px !important;
    margin-left: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    box-shadow: none !important;
  }

  /* Concave outer swoop connecting badge to top card border */
  .cpl-quick-tab-badge::after {
    content: "" !important;
    position: absolute !important;
    right: -12px !important;
    bottom: 0 !important;
    width: 12px !important;
    height: 12px !important;
    background: radial-gradient(circle at top right, transparent 12px, #0062FF 12.5px) !important;
    pointer-events: none !important;
  }

  .cpl-desktop-quick-links-section > div:last-child {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 18px !important;
    border-top-left-radius: 0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .cpl-quick-feature-card {
    border-radius: 13px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 102px !important;
    min-height: 102px !important;
    max-height: 102px !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .cpl-quick-feature-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  }

  /* Compact Square-Pod Art Container (102px x 102px - 1:1 Aspect Ratio) */
  .cpl-quick-art-pod {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
    height: 102px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .cpl-quick-art-pod img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* -----------------------------------------------------------------------
     5. TOURNAMENT HUB (EXACT REFERENCE DESIGN: 2-COLUMN SPLIT + FULL-WIDTH BANNER)
     ----------------------------------------------------------------------- */
  #hub-desktop-sidebar {
    display: none !important;
  }

  .cpl-hub-content-shell {
    max-width: 1280px !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #hub-main-view:not(.hidden) {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
  }

  #hub-main-view:not(.hidden) > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Left 6 Columns: Tournament Showcase Hero Card */
  .cpl-hub-hero-card {
    grid-column: 1 / span 6 !important;
    grid-row: 1 !important;
    padding: 16px !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .cpl-hub-hero-card > div:first-child {
    max-height: 270px !important;
    min-height: 210px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .cpl-hub-hero-meta {
    padding: 8px 6px 4px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .cpl-hub-hero-meta h2 {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
  }

  .cpl-hub-hero-card #btn-hub-share-link,
  .cpl-hub-hero-card #btn-share-direct-reg-wa {
    padding: 13px 18px !important;
    border-radius: 20px !important;
  }

  .cpl-hub-hero-card #btn-hub-share-link div[class*="font-black"],
  .cpl-hub-hero-card #btn-share-direct-reg-wa div[class*="font-black"] {
    font-size: 13.5px !important;
    letter-spacing: -0.01em !important;
  }

  /* Right 6 Columns: Tournament Hub Bento Container (Header + 3x2 Grid) */
  .cpl-hub-wave-grid-wrap {
    grid-column: 7 / span 6 !important;
    grid-row: 1 !important;
    padding: 22px 24px !important;
    background: #ffffff !important;
    border-radius: 28px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .cpl-hub-wave-grid-wrap > .grid {
    max-width: 100% !important;
    gap: 14px !important;
    flex: 1 !important;
  }

  .cpl-hub-wave-grid-wrap .hub-grid-btn {
    border-radius: 20px !important;
    min-height: unset !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .cpl-hub-wave-grid-wrap .hub-grid-btn:hover {
    transform: translateY(-2px) !important;
  }

  .cpl-hub-wave-grid-wrap .hub-grid-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* Bottom Row: Full-Width Registration Banner (Spans Columns 1 to 12) */
  .cpl-hub-reg-banner {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    padding: 18px 30px !important;
    border-radius: 22px !important;
    margin-top: 4px !important;
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.28) !important;
  }

  .cpl-hub-reg-banner [class*="text-[#fef08a]"] {
    font-size: 20px !important;
  }

  /* -----------------------------------------------------------------------
     6. INNER HUB TABS (REGISTERED PLAYERS, TEAMS, AUCTION, DETAILS)
     ----------------------------------------------------------------------- */
  #btn-hub-back-to-grid {
    font-size: 17px !important;
    padding: 12px 22px !important;
    border-radius: 16px !important;
  }

  #btn-tab-register-player {
    font-size: 16.5px !important;
    padding: 12px 24px !important;
    border-radius: 16px !important;
  }

  #hub-player-search-input,
  #auction-player-search-input {
    font-size: 17px !important;
    padding: 14px 20px 14px 46px !important;
    border-radius: 18px !important;
  }

  .hub-cat-filter-btn,
  .status-tab-btn,
  .fixture-cat-btn {
    font-size: 16px !important;
    padding: 10px 22px !important;
  }

  #hub-players-grid {
    gap: 20px !important;
  }

  .hub-player-card {
    padding: 16px !important;
    border-radius: 24px !important;
  }

  .hub-player-card h4 {
    font-size: 19px !important;
    margin-bottom: 4px !important;
  }

  .hub-view-profile-btn,
  .hub-open-story-card-btn {
    font-size: 15.5px !important;
    padding: 10px 16px !important;
    border-radius: 14px !important;
  }

  #auction-concluded-standby-view,
  .cpl-auction-live-shell,
  .cpl-career-stats-shell {
    max-width: 100% !important;
    width: 100% !important;
  }

  #career-player-cards-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #career-player-cards-container > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 16px 20px !important;
  }

  `/* -----------------------------------------------------------------------
     10. ULTRA-MODERN SIGNATURE DESKTOP LOWER BAR (GLASSMORPHISM & LASER AURA)
     ----------------------------------------------------------------------- */
  #app-footer.cpl-desktop-lower-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    background: linear-gradient(180deg, rgba(3, 11, 28, 0.88) 0%, rgba(1, 7, 20, 0.96) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(56, 189, 248, 0.28) !important;
    box-shadow: 0 -8px 32px rgba(2, 6, 23, 0.8), 0 -1px 0 rgba(255, 255, 255, 0.1) inset !important;
    z-index: 65 !important;
    padding: 0 28px !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Running Ambient Laser Flare Sweep */
  .cpl-footer-laser-line {
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 200% !important;
    height: 2px !important;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(56, 189, 248, 0) 15%, 
      rgba(56, 189, 248, 0.8) 35%, 
      #00F59B 50%, 
      rgba(255, 208, 0, 0.9) 65%, 
      transparent 85%
    ) !important;
    animation: cplFooterLaserRun 6s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate !important;
    pointer-events: none !important;
  }

  .cpl-footer-laser-ambient {
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60% !important;
    height: 24px !important;
    background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.25) 0%, transparent 70%) !important;
    filter: blur(8px) !important;
    pointer-events: none !important;
    animation: cplFooterLaserPulse 4s ease-in-out infinite alternate !important;
  }

  @keyframes cplFooterLaserRun {
    0% { transform: translateX(-25%); }
    100% { transform: translateX(25%); }
  }

  @keyframes cplFooterLaserPulse {
    0% { opacity: 0.5; transform: translateX(-50%) scaleX(0.85); }
    100% { opacity: 1; transform: translateX(-50%) scaleX(1.15); }
  }

  /* --- LEFT BRAND LOCKUP --- */
  .cpl-footer-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    cursor: default !important;
    user-select: none !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    position: relative !important;
  }

  .cpl-footer-brand-halo {
    position: absolute !important;
    inset: -6px -12px !important;
    background: radial-gradient(ellipse at left center, rgba(56, 189, 248, 0.12) 0%, transparent 70%) !important;
    pointer-events: none !important;
  }

  .cpl-footer-brand-title {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 19px !important;
    color: #ffffff !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(135deg, #ffffff 30%, #cbd5e1 70%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) !important;
    display: inline-block !important;
  }

  .cpl-footer-brand-sub-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 1 !important;
    margin-left: 8px !important;
  }

  .cpl-footer-brand-sub {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 19px !important;
    color: #ffd000 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    background: linear-gradient(135deg, #FFF066 0%, #FFB703 50%, #FB8500 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 10px rgba(255, 183, 3, 0.45)) !important;
    display: inline-block !important;
  }

  .cpl-footer-brand-swoosh {
    width: 124px !important;
    height: 6px !important;
    margin-top: 2px !important;
    display: block !important;
    overflow: visible !important;
  }

  /* --- MIDDLE STATS CAPSULE POD (Dead-Center Mathematical Alignment) --- */
  .cpl-footer-stats-wrap {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  .cpl-footer-stats-capsule {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 5px 20px !important;
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px) !important;
  }

  .cpl-footer-capsule-glow {
    position: absolute !important;
    inset: -2px !important;
    border-radius: 9999px !important;
    background: radial-gradient(circle at 50% 120%, rgba(56, 189, 248, 0.25) 0%, transparent 60%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  .cpl-footer-stat-unit {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .cpl-stat-icon-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)) !important;
  }

  /* Live Radar Pulse Indicator for Online */
  .cpl-radar-beacon {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 8px !important;
    height: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .cpl-radar-ring {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 9999px !important;
    background: #00F59B !important;
    opacity: 0.75 !important;
    animation: cplRadarPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite !important;
  }

  .cpl-radar-core {
    position: relative !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 9999px !important;
    background: #00F59B !important;
    box-shadow: 0 0 8px #00F59B !important;
  }

  @keyframes cplRadarPing {
    75%, 100% {
      transform: scale(2.4);
      opacity: 0;
    }
  }

  .cpl-footer-stat-data {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 1 !important;
  }

  .cpl-footer-stat-val {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
    font-weight: 900 !important;
    font-size: 15.5px !important;
    line-height: 1 !important;
    display: block !important;
  }

  .cpl-footer-stat-val.glow-emerald {
    color: #00F59B !important;
    text-shadow: 0 0 10px rgba(0, 245, 155, 0.65), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  }

  .cpl-footer-stat-val.glow-cyan {
    color: #38BDF8 !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.65), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  }

  .cpl-footer-stat-val.glow-amber {
    color: #FFA726 !important;
    text-shadow: 0 0 10px rgba(255, 167, 38, 0.65), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  }

  .cpl-footer-stat-lbl {
    font-family: system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    font-size: 8.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-top: 3px !important;
    line-height: 1 !important;
    display: block !important;
  }

  .cpl-footer-stat-lbl.lbl-emerald { color: #00F59B !important; opacity: 0.9 !important; }
  .cpl-footer-stat-lbl.lbl-cyan { color: #38BDF8 !important; opacity: 0.9 !important; }
  .cpl-footer-stat-lbl.lbl-amber { color: #FFA726 !important; opacity: 0.9 !important; }

  .cpl-footer-pod-divider {
    width: 1px !important;
    height: 18px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%) !important;
    flex-shrink: 0 !important;
  }

  /* --- RIGHT ACTION PILLARS --- */
  .cpl-footer-pillars-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  .cpl-footer-pillar-chip {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.25s ease !important;
    cursor: default !important;
  }

  .cpl-footer-pillar-chip.chip-gold {
    background: rgba(251, 191, 36, 0.06) !important;
    border-color: rgba(251, 191, 36, 0.22) !important;
  }

  .cpl-footer-pillar-chip.chip-cyan {
    background: rgba(56, 189, 248, 0.06) !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
  }

  .cpl-footer-pillar-chip.chip-violet {
    background: rgba(192, 132, 252, 0.06) !important;
    border-color: rgba(192, 132, 252, 0.22) !important;
  }

  .cpl-footer-pillar-chip.chip-emerald {
    background: rgba(0, 245, 155, 0.06) !important;
    border-color: rgba(0, 245, 155, 0.22) !important;
  }

  .cpl-pillar-icon-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)) !important;
  }

  .cpl-pillar-text {
    font-family: system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: 0.03em !important;
    line-height: 1 !important;
  }

  .cpl-pillar-text.text-gold { color: #FBBF24 !important; text-shadow: 0 0 8px rgba(251, 191, 36, 0.5) !important; }
  .cpl-pillar-text.text-cyan { color: #38BDF8 !important; text-shadow: 0 0 8px rgba(56, 189, 248, 0.5) !important; }
  .cpl-pillar-text.text-violet { color: #C084FC !important; text-shadow: 0 0 8px rgba(192, 132, 252, 0.5) !important; }
  .cpl-pillar-text.text-emerald { color: #00F59B !important; text-shadow: 0 0 8px rgba(0, 245, 155, 0.5) !important; }

  .cpl-footer-pillar-separator {
    width: 1px !important;
    height: 14px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    margin: 0 2px !important;
  }
}

`/* Automatic High-Resolution / Ultra-Wide Desktop Scaling (1440p & 4K Monitors) */
@media (min-width: 1700px) {
  body {
    zoom: 1.18;
  }
}

@media (min-width: 2300px) {
  body {
    zoom: 1.42;
  }
}

/* Enhanced Player Photo Aesthetics: Increased Brightness, Vibrant Color Saturation & Contrast */
.hub-player-card img,
.player-card img,
.player-profile-img,
#edit-player-preview-img,
#proj-player-photo,
[data-player-card]:not([data-player-card-id]) img {
  filter: brightness(1.08) saturate(1.20) contrast(1.03) !important;
  image-rendering: -webkit-optimize-contrast;
}