/* BORING BETS: TEAM + WEATHER BORDER ONLY V3 */ /* Color sources: away team official colors, weather colors, home team official colors. The card interior remains neutral. No positive/negative red or green judgment is applied here. */ .compact-event-card.has-card-atmosphere { position: relative; isolation: isolate; overflow: hidden; border: 1px solid transparent !important; background: linear-gradient( 145deg, rgba(8, 14, 24, 0.97), rgba(4, 9, 17, 0.99) ) padding-box !important; background-size: 100% 100% !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3) !important; filter: none !important; animation: none !important; } /* No team or weather color is painted inside the card. */ .compact-event-card.has-card-atmosphere::before { content: none !important; display: none !important; } /* The animated outline travels from the away team, through the game weather, into the home team. */ .compact-event-card.has-card-atmosphere::after { content: ""; position: absolute; inset: 0; z-index: 10; padding: 2px; border-radius: inherit; pointer-events: none; background: linear-gradient( 112deg, var(--card-away-1), var(--card-away-2), var(--card-away-3), var(--card-weather-1), var(--card-weather-2), var(--card-home-1), var(--card-home-2), var(--card-home-3), var(--card-away-1) ); background-size: 390% 390%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow( 0 0 3px color-mix( in srgb, var(--card-away-1) 34%, transparent ) ) drop-shadow( 0 0 4px color-mix( in srgb, var(--card-home-1) 28%, transparent ) ); animation: team-weather-border-flow var(--card-border-speed, 14s) ease-in-out infinite alternate !important; } .compact-event-card.is-weather-gray::after, .compact-event-card.is-weather-postponed::after { opacity: 0.76; filter: saturate(0.72); } .compact-event-card.is-weather-rain::after { filter: saturate(0.88) drop-shadow( 0 0 5px color-mix( in srgb, var(--card-weather-1) 42%, transparent ) ); } .compact-event-card.is-weather-clear::after { filter: saturate(1.08) drop-shadow( 0 0 4px color-mix( in srgb, var(--card-weather-1) 38%, transparent ) ); } /* Only the outline brightens during lightning. The card itself does not blink or disappear. */ .compact-event-card.is-weather-thunder::after { animation: team-weather-border-flow var(--card-border-speed, 6s) ease-in-out infinite alternate, team-weather-border-lightning 11.7s steps(1, end) infinite !important; } @keyframes team-weather-border-flow { 0% { background-position: 0% 45%; } 45% { background-position: 54% 62%; } 72% { background-position: 76% 38%; } 100% { background-position: 100% 50%; } } @keyframes team-weather-border-lightning { 0%, 48%, 49.1%, 79%, 80%, 100% { opacity: 1; filter: brightness(1); } 48.35%, 79.35% { opacity: 1; filter: brightness(1.75) drop-shadow( 0 0 7px var(--card-weather-1) ); } 48.65%, 79.62% { filter: brightness(0.92); } 48.9% { filter: brightness(1.3); } } @media (prefers-reduced-motion: reduce) { .compact-event-card.has-card-atmosphere::after { animation: none !important; background-position: 50% 50%; } } /* BORING BETS: FINAL CARD WINNER COLORS V5 */ /* Completed games freeze permanently in the winning team's palette. No weather or losing-team colors remain in the final border. */ .compact-event-card.is-final::after { background: linear-gradient( 112deg, var(--card-leader-1), var(--card-leader-2), var(--card-leader-3), var(--card-leader-1), var(--card-leader-2), var(--card-leader-3) ) !important; background-size: 100% 100% !important; background-position: 50% 50% !important; animation: none !important; will-change: auto; filter: saturate(0.96) drop-shadow( 0 0 4px color-mix( in srgb, var(--card-leader-1) 32%, transparent ) ); } /* BORING BETS: FINAL WINNER MOTION V6 */ /* Final games continue flowing, but the border consists exclusively of the winning team's three official colors. */ .compact-event-card.is-final::after { background: linear-gradient( 112deg, var(--card-leader-1), var(--card-leader-2), var(--card-leader-3), var(--card-leader-1), var(--card-leader-2), var(--card-leader-3), var(--card-leader-1) ) !important; background-size: 390% 390% !important; animation: team-weather-event-border-flow 18s ease-in-out infinite alternate !important; will-change: background-position; filter: saturate(1.02); } /* BORING BETS: GUARANTEED FINAL WINNER BORDER V7 */ /* Safari-safe final card border: full winner-gradient layer underneath, neutral inset layer covering the card interior. */ .compact-event-card.has-card-atmosphere.is-final::after { content: "" !important; display: block !important; position: absolute; inset: 0; z-index: 0; padding: 0 !important; border-radius: inherit; pointer-events: none; background: linear-gradient( 112deg, var(--card-leader-1, var(--card-away-1)), var(--card-leader-2, var(--card-away-2)), var(--card-leader-3, var(--card-away-3)), var(--card-leader-1, var(--card-away-1)), var(--card-leader-2, var(--card-away-2)), var(--card-leader-3, var(--card-away-3)), var(--card-leader-1, var(--card-away-1)) ) !important; background-size: 390% 390% !important; -webkit-mask: none !important; -webkit-mask-composite: initial !important; mask: none !important; mask-composite: initial !important; opacity: 1 !important; filter: saturate(1.08) brightness(1.05) !important; animation: team-weather-event-border-flow 18s ease-in-out infinite alternate !important; will-change: background-position; } /* Covers the middle of the gradient, leaving a visible 2px border. No winner colors bleed into the card interior. */ .compact-event-card.has-card-atmosphere.is-final::before { content: "" !important; display: block !important; position: absolute; inset: 2px; z-index: 1; border-radius: calc(var(--radius-md, 12px) - 2px); pointer-events: none; background: linear-gradient( 145deg, rgba(8, 14, 24, 0.985), rgba(4, 9, 17, 0.995) ) !important; opacity: 1 !important; filter: none !important; animation: none !important; } .compact-event-card.has-card-atmosphere.is-final > * { position: relative; z-index: 2; }