/* ===================================================== MATCHUP ANALYSIS — Glass Bento Grid + Team Accents Light/Dark theme via [data-theme] on ===================================================== */ /* ===== DESIGN TOKENS — LIGHT MODE (default) ===== */ :root { /* Backgrounds */ --analysis-bg-deep: #f0f2f5; --analysis-bg-base: #f5f7fa; --analysis-bg-surface: #ffffff; /* Glass tokens */ --glass-blur: 16px; --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(0, 0, 0, 0.08); /* Neon tokens (muted in light mode) */ --neon-spread: 12px; --neon-pulse-duration: 3s; /* Text */ --ma-text-primary: #1e293b; --ma-text-secondary: #475569; --ma-text-muted: #94a3b8; /* Accent colors */ --analysis-success: #059669; --analysis-warning: #d97706; --analysis-danger: #dc2626; --analysis-info: #0891b2; /* Dark ink for overlays / badges */ --tile-inner-bg: rgba(0, 0, 0, 0.03); --tile-inner-border: rgba(0, 0, 0, 0.04); --badge-bg: rgba(255, 255, 255, 0.85); /* Glass fallback (opaque) */ --glass-fallback-bg: rgba(255, 255, 255, 0.96); /* Logo wrap */ --logo-wrap-bg: rgba(255, 255, 255, 0.9); --logo-wrap-border: rgba(0, 0, 0, 0.08); /* Hero diagonal opacity */ --hero-territory-opacity: 0.08; /* Divider line */ --divider-color: rgba(0, 0, 0, 0.1); /* Frost highlight */ --frost-highlight: rgba(255, 255, 255, 0.5); /* Bar background */ --bar-track-bg: rgba(0, 0, 0, 0.06); /* Glow intensity for neon effects */ --neon-glow-alpha: 0.15; --neon-glow-pulse-lo: 0.1; --neon-glow-pulse-hi: 0.25; /* Text shadow on "better" stats */ --better-text-shadow: none; /* Typography scale */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; --fs-4xl: 2.25rem; /* Radii */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); } /* ===== DARK MODE OVERRIDES ===== */ [data-theme="dark"] { --analysis-bg-deep: #050a14; --analysis-bg-base: #0a1128; --analysis-bg-surface: #0f1a2e; --glass-bg: rgba(15, 23, 42, 0.6); --glass-border: rgba(255, 255, 255, 0.08); --neon-spread: 20px; --ma-text-primary: #f1f5f9; --ma-text-secondary: #94a3b8; --ma-text-muted: #475569; --analysis-success: #10b981; --analysis-warning: #f59e0b; --analysis-danger: #ef4444; --analysis-info: #06b6d4; --tile-inner-bg: rgba(15, 23, 42, 0.5); --tile-inner-border: rgba(255, 255, 255, 0.04); --badge-bg: rgba(15, 23, 42, 0.8); --glass-fallback-bg: rgba(15, 23, 42, 0.92); --logo-wrap-bg: rgba(15, 23, 42, 0.8); --logo-wrap-border: rgba(255, 255, 255, 0.1); --hero-territory-opacity: 0.15; --divider-color: rgba(255, 255, 255, 0.15); --frost-highlight: rgba(255, 255, 255, 0.12); --bar-track-bg: rgba(255, 255, 255, 0.06); --neon-glow-alpha: 0.3; --neon-glow-pulse-lo: 0.3; --neon-glow-pulse-hi: 0.5; --better-text-shadow: 0 0 6px currentColor; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); } /* ===== BASE ===== */ .main-content { background: var(--analysis-bg-base); min-height: 100vh; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--ma-text-primary); position: relative; } /* Gradient mesh background */ .main-content::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(var(--team1-color-rgb, 102, 126, 234), var(--hero-territory-opacity)) 0%, transparent 70%), radial-gradient(ellipse 80% 50% at 80% 60%, rgba(var(--team2-color-rgb, 118, 75, 162), var(--hero-territory-opacity)) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 50% 0%, rgba(6, 182, 212, 0.03) 0%, transparent 60%); pointer-events: none; z-index: 0; } .main-content > * { position: relative; z-index: 1; } /* ===== ACTION BAR ===== */ .page-actions-bar { padding: 0.5rem 0; } .page-actions-bar .btn-outline-secondary, .page-actions-bar .btn-outline-primary { color: var(--ma-text-secondary); border-color: var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .page-actions-bar .btn-outline-secondary:hover, .page-actions-bar .btn-outline-primary:hover { color: var(--ma-text-primary); border-color: var(--glass-border); background: var(--analysis-bg-surface); } /* ===== SPLIT CANVAS HERO ===== */ .matchup-hero { position: relative; background: var(--analysis-bg-surface); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: 2rem 1rem; margin-bottom: 0; overflow: hidden; grid-area: hero; } /* Team 1 diagonal territory */ .matchup-hero::before { content: ''; position: absolute; inset: 0; clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%); background: rgba(var(--team1-color-rgb, 102, 126, 234), var(--hero-territory-opacity)); pointer-events: none; } /* Team 2 diagonal territory */ .matchup-hero::after { content: ''; position: absolute; inset: 0; clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%); background: rgba(var(--team2-color-rgb, 118, 75, 162), var(--hero-territory-opacity)); pointer-events: none; } .matchup-hero-inner { display: flex; align-items: center; justify-content: center; gap: 2rem; position: relative; z-index: 2; } /* Diagonal divider line */ .matchup-hero-inner::before { content: ''; position: absolute; top: -2rem; bottom: -2rem; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--divider-color), transparent); transform: rotate(8deg); pointer-events: none; } .hero-team { text-align: center; flex: 1; max-width: 280px; min-width: 0; } .hero-team-link { text-decoration: none; } .hero-logo-wrap { width: 120px; height: 120px; margin: 0 auto 0.5rem; border-radius: 50%; background: var(--logo-wrap-bg); border: 3px solid var(--logo-wrap-border); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(var(--team1-color-rgb, 102, 126, 234), var(--neon-glow-alpha)); transition: transform 0.3s ease, box-shadow 0.3s ease; padding: 12px; } .hero-team:last-of-type .hero-logo-wrap { box-shadow: 0 0 20px rgba(var(--team2-color-rgb, 118, 75, 162), var(--neon-glow-alpha)); } .hero-logo-wrap:hover { transform: scale(1.05); } .hero-logo { max-width: 75%; max-height: 75%; width: auto; height: auto; object-fit: contain; border-radius: 50%; } .hero-team-name { font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; margin-bottom: 0.125rem; } .hero-team-name a { text-decoration: none; } .hero-record { font-size: var(--fs-base); font-weight: 500; color: var(--ma-text-secondary); } .hero-vs { font-size: var(--fs-2xl); font-weight: 800; color: var(--ma-text-muted); text-transform: uppercase; letter-spacing: 2px; flex-shrink: 0; } /* ===== BENTO GRID ===== */ .matchup-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "hero hero hero hero" "verdict verdict verdict form" "verdict verdict verdict form" "insights insights insights insights" "spotlight spotlight spotlight spotlight" "stats stats qb qb" "stats stats rb rb" "h2h meetings wr wr" "h2h meetings kick kick"; gap: 1rem; padding: 1rem 0; grid-auto-flow: dense; } /* ===== BENTO TILE (base glass card) ===== */ .bento-tile { position: relative; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: 1.25rem; overflow: hidden; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease; } /* Top-edge frost highlight */ .bento-tile::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--frost-highlight), transparent); pointer-events: none; } .bento-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Glass fallback */ @supports not (backdrop-filter: blur(16px)) { .bento-tile { background: var(--glass-fallback-bg); } } /* Grid area assignments */ .bento-hero { grid-area: hero; } .bento-verdict { grid-area: verdict; } .bento-form { grid-area: form; } .bento-stats { grid-area: stats; } .bento-qb { grid-area: qb; } .bento-rb { grid-area: rb; } .bento-wr { grid-area: wr; } .bento-kick { grid-area: kick; } .bento-h2h { grid-area: h2h; } .bento-meetings { grid-area: meetings; } .bento-insights { grid-area: insights; } .bento-spotlight { grid-area: spotlight; } /* ===== TILE TITLES ===== */ .matchup-card-title { font-size: var(--fs-lg); font-weight: 700; color: var(--ma-text-primary); margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--tile-inner-border); } .matchup-card-title i { color: var(--ma-text-muted); } /* ===== EDGE VERDICT ===== */ .bento-verdict { background: linear-gradient(135deg, var(--glass-bg) 0%, var(--glass-bg) 100%); } .edge-header { text-align: center; margin-bottom: 1.25rem; } .edge-verdict-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; border-radius: var(--radius-full); font-size: var(--fs-lg); font-weight: 700; margin-bottom: 0.5rem; } .edge-verdict-pill.team1-edge { background: rgba(var(--team1-color-rgb, 102, 126, 234), 0.1); color: var(--team1-color, #667eea); border: 1px solid rgba(var(--team1-color-rgb, 102, 126, 234), 0.25); box-shadow: 0 0 var(--neon-spread) rgba(var(--team1-color-rgb, 102, 126, 234), var(--neon-glow-alpha)); } .edge-verdict-pill.team2-edge { background: rgba(var(--team2-color-rgb, 118, 75, 162), 0.1); color: var(--team2-color, #764ba2); border: 1px solid rgba(var(--team2-color-rgb, 118, 75, 162), 0.25); box-shadow: 0 0 var(--neon-spread) rgba(var(--team2-color-rgb, 118, 75, 162), var(--neon-glow-alpha)); } .edge-verdict-pill.tossup-edge { background: rgba(148, 163, 184, 0.1); color: var(--ma-text-secondary); border: 1px solid rgba(148, 163, 184, 0.2); } .edge-team-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } /* Edge badges */ .edge-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; } .edge-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 600; background: var(--badge-bg); border: 1.5px solid; cursor: default; transform: scale(0); opacity: 0; } .edge-badge.visible { animation: badgeScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: calc(var(--badge-index, 0) * 0.06s); } @keyframes badgeScaleIn { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* Neon pulse on advantage badges */ .edge-badge.team1-adv { animation: badgeScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, neonPulse1 var(--neon-pulse-duration) ease-in-out infinite 0.5s; } .edge-badge.team2-adv { animation: badgeScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, neonPulse2 var(--neon-pulse-duration) ease-in-out infinite 0.5s; } .edge-badge.team1-adv.visible { animation: badgeScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, neonPulse1 var(--neon-pulse-duration) ease-in-out infinite 0.5s; animation-delay: calc(var(--badge-index, 0) * 0.06s), 0.5s; } .edge-badge.team2-adv.visible { animation: badgeScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, neonPulse2 var(--neon-pulse-duration) ease-in-out infinite 0.5s; animation-delay: calc(var(--badge-index, 0) * 0.06s), 0.5s; } @keyframes neonPulse1 { 0%, 100% { box-shadow: 0 0 4px rgba(var(--team1-color-rgb, 102, 126, 234), var(--neon-glow-pulse-lo)), inset 0 0 4px rgba(var(--team1-color-rgb, 102, 126, 234), 0.05); } 50% { box-shadow: 0 0 12px rgba(var(--team1-color-rgb, 102, 126, 234), var(--neon-glow-pulse-hi)), inset 0 0 8px rgba(var(--team1-color-rgb, 102, 126, 234), 0.1); } } @keyframes neonPulse2 { 0%, 100% { box-shadow: 0 0 4px rgba(var(--team2-color-rgb, 118, 75, 162), var(--neon-glow-pulse-lo)), inset 0 0 4px rgba(var(--team2-color-rgb, 118, 75, 162), 0.05); } 50% { box-shadow: 0 0 12px rgba(var(--team2-color-rgb, 118, 75, 162), var(--neon-glow-pulse-hi)), inset 0 0 8px rgba(var(--team2-color-rgb, 118, 75, 162), 0.1); } } .edge-badge.even-adv { border-color: var(--ma-text-muted); color: var(--ma-text-muted); } .edge-badge-icon { font-size: 0.65rem; } .edge-badge-label { text-transform: uppercase; letter-spacing: 0.04em; } /* ===== INSIGHTS (inside verdict or standalone) ===== */ .edge-insights { display: flex; flex-direction: column; gap: 0.5rem; } .edge-insight-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--fs-sm); color: var(--ma-text-secondary); padding: 0.5rem 0.75rem; background: var(--tile-inner-bg); border-radius: var(--radius-md); border: 1px solid var(--tile-inner-border); } .edge-insight-item i { color: var(--analysis-warning); font-size: var(--fs-xs); margin-top: 0.2rem; flex-shrink: 0; } /* ===== STRUCTURED INSIGHT CARDS ===== */ .insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .insight-card { position: relative; display: flex; background: var(--tile-inner-bg); border: 1px solid var(--tile-inner-border); border-radius: var(--radius-md); overflow: hidden; opacity: 0; transform: translateY(12px); animation: insightReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: calc(var(--insight-index, 0) * 0.1s); transition: box-shadow 0.2s ease, border-color 0.2s ease; } .insight-card:hover { border-color: var(--insight-accent, var(--analysis-warning)); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); } @keyframes insightReveal { to { opacity: 1; transform: translateY(0); } } /* Primary insight: full-width with emphasis */ .insight-primary { grid-column: 1 / -1; background: linear-gradient(135deg, var(--tile-inner-bg) 0%, rgba(255,255,255,0.02) 100%); border-width: 1px 1px 1px 1px; } /* Accent stripe */ .insight-accent-stripe { width: 4px; min-height: 100%; flex-shrink: 0; background: var(--insight-accent, var(--analysis-warning)); box-shadow: 0 0 8px color-mix(in srgb, var(--insight-accent, var(--analysis-warning)) 40%, transparent); } .insight-primary .insight-accent-stripe { width: 5px; box-shadow: 0 0 12px color-mix(in srgb, var(--insight-accent, var(--analysis-warning)) 50%, transparent); } .insight-card-body { flex: 1; padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; } /* Header row: category tag + trend */ .insight-card-header { display: flex; align-items: center; gap: 0.5rem; } .insight-category-tag { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--ma-text-muted); border: 1px solid rgba(255, 255, 255, 0.08); } .insight-trend { font-size: 0.6rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.2rem; } .insight-trend-up { color: var(--analysis-success); background: rgba(16, 185, 129, 0.1); } .insight-trend-down { color: var(--analysis-danger); background: rgba(239, 68, 68, 0.1); } .insight-trend-stable { color: var(--ma-text-muted); background: rgba(255, 255, 255, 0.05); } /* Content row: text + metric side by side */ .insight-content-row { display: flex; align-items: flex-start; gap: 1rem; } .insight-text-col { flex: 1; min-width: 0; } .insight-headline { font-size: var(--fs-sm); font-weight: 700; color: var(--ma-text-primary); line-height: 1.35; } .insight-primary .insight-headline { font-size: var(--fs-base); } .insight-icon { color: var(--insight-accent, var(--analysis-warning)); margin-right: 0.35rem; font-size: 0.85em; } .insight-supporting { font-size: var(--fs-xs); color: var(--ma-text-secondary); line-height: 1.45; margin-top: 0.25rem; } /* Metric column */ .insight-metric-col { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; } .insight-metric-label { font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ma-text-muted); } .insight-metric-value { font-size: var(--fs-xl); font-weight: 800; color: var(--ma-text-primary); line-height: 1; } .insight-primary .insight-metric-value { font-size: 1.75rem; } .insight-metric-delta { font-size: 0.65rem; font-weight: 600; padding: 0.05rem 0.35rem; border-radius: 999px; } .insight-metric-delta.delta-positive { color: var(--analysis-success); background: rgba(16, 185, 129, 0.12); } .insight-metric-delta.delta-negative { color: var(--analysis-danger); background: rgba(239, 68, 68, 0.12); } /* Expand trigger */ .insight-expand-trigger { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-xs); color: var(--insight-accent, var(--analysis-warning)); background: none; border: none; padding: 0.25rem 0; cursor: pointer; opacity: 0.8; transition: opacity 0.2s; } .insight-expand-trigger:hover, .insight-expand-trigger:focus-visible { opacity: 1; outline: none; } .insight-expand-trigger .expand-icon { transition: transform 0.3s ease; font-size: 0.65rem; } .insight-card.expanded .insight-expand-trigger .expand-icon { transform: rotate(180deg); } /* Expandable details */ .insight-details { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .insight-card.expanded .insight-details { max-height: 300px; } .insight-details-table { width: 100%; font-size: var(--fs-xs); border-collapse: collapse; margin-top: 0.35rem; } .insight-details-table th { font-weight: 600; color: var(--ma-text-muted); text-transform: uppercase; font-size: 0.6rem; letter-spacing: 0.05em; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--tile-inner-border); } .insight-details-table td { padding: 0.3rem 0.5rem; color: var(--ma-text-secondary); border-bottom: 1px solid rgba(255, 255, 255, 0.03); } .insight-details-table .detail-better { color: var(--analysis-success); font-weight: 600; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .insight-card { opacity: 1; transform: none; animation: none; } .insight-details { transition: none; } .insight-expand-trigger .expand-icon { transition: none; } } /* ===== CLASH WAVE ===== */ .edge-clash { margin: 0.75rem 0 0.25rem; position: relative; } /* Labels above the arena */ .clash-labels-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.5rem; padding: 0 0.25rem; } .clash-team-label, .clash-even-label { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; } .clash-count { font-size: var(--fs-xl); font-weight: 800; line-height: 1; } .clash-name { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; } .clash-even-label { color: var(--ma-text-muted); } .clash-even-label .clash-count { font-size: var(--fs-lg); } /* Arena — the collision zone */ .clash-arena { position: relative; height: 56px; border-radius: 28px; overflow: hidden; background: var(--bar-track-bg); } /* Waves */ .clash-wave { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; } .clash-wave-left { left: 0; background: rgba(var(--wave-rgb), 0.85); border-radius: 28px 0 0 28px; } .clash-wave-right { right: 0; background: rgba(var(--wave-rgb), 0.85); border-radius: 0 28px 28px 0; } /* ── Internal wave ripple ── Scrolling highlight bands inside each wave create visible wave-like motion. 300% wide pseudo animated via GPU-accelerated translateX. */ .clash-wave::before { content: ''; position: absolute; top: 0; bottom: 0; width: 300%; opacity: 0; pointer-events: none; } .clash-wave-left::before { right: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 4%, transparent 10%, rgba(255,255,255,0.16) 18%, transparent 24%, rgba(255,255,255,0.28) 32%, transparent 40%, rgba(255,255,255,0.14) 48%, transparent 54%, rgba(255,255,255,0.24) 62%, transparent 70%, rgba(255,255,255,0.18) 78%, transparent 84%, rgba(255,255,255,0.26) 92%, transparent 100%); } .clash-wave-right::before { left: 0; background: linear-gradient(270deg, transparent 0%, rgba(255,255,255,0.22) 4%, transparent 10%, rgba(255,255,255,0.16) 18%, transparent 24%, rgba(255,255,255,0.28) 32%, transparent 40%, rgba(255,255,255,0.14) 48%, transparent 54%, rgba(255,255,255,0.24) 62%, transparent 70%, rgba(255,255,255,0.18) 78%, transparent 84%, rgba(255,255,255,0.26) 92%, transparent 100%); } .clash-active .clash-wave-left::before { opacity: 1; animation: waveRippleLeft 1.8s linear infinite 1.3s; } .clash-active .clash-wave-right::before { opacity: 1; animation: waveRippleRight 1.8s linear infinite 1.5s; } @keyframes waveRippleLeft { from { transform: translateX(-66%); } to { transform: translateX(0); } } @keyframes waveRippleRight { from { transform: translateX(66%); } to { transform: translateX(0); } } /* ── Leading edge glow ── Bright pulsing highlight at each wave's collision-facing edge. */ .clash-wave-left::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 8px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6)); transform-origin: right center; opacity: 0; z-index: 1; } .clash-wave-right::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: linear-gradient(270deg, transparent, rgba(255,255,255,0.6)); transform-origin: left center; opacity: 0; z-index: 1; } .clash-active .clash-wave-left::after, .clash-active .clash-wave-right::after { animation: edgeGlow 2s ease-in-out infinite 1.5s; } @keyframes edgeGlow { 0%, 100% { opacity: 0.4; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(3); filter: blur(3px); } } /* ── Energy pulses ── Bright visible bands sweeping toward collision point. */ .clash-flow { position: absolute; top: 0; bottom: 0; width: 35%; opacity: 0; pointer-events: none; z-index: 1; } .clash-wave-left .clash-flow { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 15%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.45) 55%, rgba(255,255,255,0.1) 85%, transparent 100%); } .clash-wave-right .clash-flow { background: linear-gradient(270deg, transparent 0%, rgba(255,255,255,0.1) 15%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.45) 55%, rgba(255,255,255,0.1) 85%, transparent 100%); } .clash-flow-alt { opacity: 0 !important; } .clash-active .clash-wave-left .clash-flow { animation: pulseSweepLeft 1.4s ease-in-out infinite 1.6s; } .clash-active .clash-wave-left .clash-flow-alt { animation: pulseSweepLeft 1.4s ease-in-out infinite 2.3s !important; } .clash-active .clash-wave-right .clash-flow { animation: pulseSweepRight 1.4s ease-in-out infinite 1.8s; } .clash-active .clash-wave-right .clash-flow-alt { animation: pulseSweepRight 1.4s ease-in-out infinite 2.5s !important; } @keyframes pulseSweepLeft { 0% { transform: translateX(-160%); opacity: 0; } 12% { opacity: 0.9; } 88% { opacity: 0.9; } 100% { transform: translateX(220%); opacity: 0; } } @keyframes pulseSweepRight { 0% { transform: translateX(160%); opacity: 0; } 12% { opacity: 0.9; } 88% { opacity: 0.9; } 100% { transform: translateX(-220%); opacity: 0; } } /* ── Impact zone ── */ .clash-impact { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; transform: translateX(-50%); transition: left 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; z-index: 3; pointer-events: none; } /* Glow orb — radial flash with SVG turbulence filter for crackling edge */ .clash-glow { position: absolute; top: 50%; left: 50%; width: 64px; height: 150%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.35) 30%, transparent 60%); opacity: 0; filter: url(#clash-turbulence); } .clash-active .clash-glow { animation: glowFlash 0.4s ease-out 1.5s forwards, glowBreath 2s ease-in-out 1.9s infinite; } @keyframes glowFlash { 0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.2); } 35% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.8); } 100% { opacity: 0.7; transform: translate(-50%, -50%) scaleX(1); } } @keyframes glowBreath { 0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scaleX(1); } 50% { opacity: 0.85; transform: translate(-50%, -50%) scaleX(1.4); } } /* Ripple rings expanding from collision */ .clash-ripple { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.7); transform: translate(-50%, -50%) scale(0); opacity: 0; } .clash-active .clash-ripple { animation: rippleExpand 1.6s ease-out 1.5s infinite; } .clash-active .clash-ripple-2 { animation: rippleExpand 1.6s ease-out 2.2s infinite; } @keyframes rippleExpand { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.9; border-width: 2px; } 100% { transform: translate(-50%, -50%) scale(7); opacity: 0; border-width: 0.5px; } } /* ===== RECENT FORM ===== */ .bento-form { display: flex; flex-direction: column; gap: 0.75rem; } .form-team-block { text-align: center; } .form-team-name { font-weight: 700; font-size: var(--fs-sm); margin-bottom: 0.375rem; } .form-string { display: flex; justify-content: center; gap: 4px; margin-bottom: 0.375rem; } .form-result { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: var(--fs-xs); font-weight: 700; } .form-result.win { background: var(--analysis-success); color: white; } .form-result.loss { background: var(--analysis-danger); color: white; } .form-details { font-size: var(--fs-xs); color: var(--ma-text-muted); } /* ===== KEY STATS COMPARISON BARS ===== */ .stat-bar-team-labels { display: flex; justify-content: space-between; margin-bottom: 0.75rem; } .stat-bar-team-label { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .comparison-bar-row { display: grid; grid-template-columns: 80px 1fr 80px; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--tile-inner-border); } .comparison-bar-row:last-child { border-bottom: none; } .bar-label { grid-column: 1 / -1; grid-row: 1; text-align: center; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ma-text-muted); } .bar-value { font-size: var(--fs-lg); font-weight: 600; color: var(--ma-text-secondary); grid-row: 2; } .bar-value.team1 { text-align: right; grid-column: 1; } .bar-value.team2 { text-align: left; grid-column: 3; } .bar-value.better { font-weight: 800; color: var(--ma-text-primary); text-shadow: var(--better-text-shadow); } .comparison-bar-visual { grid-column: 2; grid-row: 2; display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bar-track-bg); } .comparison-bar-fill { height: 100%; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); min-width: 2px; } .comparison-bar-fill.team1 { border-radius: 5px 0 0 5px; box-shadow: 0 0 8px rgba(var(--team1-color-rgb, 102, 126, 234), var(--neon-glow-alpha)); } .comparison-bar-fill.team2 { border-radius: 0 5px 5px 0; box-shadow: 0 0 8px rgba(var(--team2-color-rgb, 118, 75, 162), var(--neon-glow-alpha)); } /* ===== PLAYER SPOTLIGHT ===== */ .player-spotlight-banner { grid-area: spotlight; display: flex; align-items: center; gap: 0.375rem; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ma-text-muted); } .position-card-title { font-size: var(--fs-base); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ma-text-secondary); margin-bottom: 1rem; } .position-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .position-team-label { font-size: var(--fs-sm); font-weight: 700; padding-bottom: 0.5rem; margin-bottom: 0.5rem; border-bottom: 2px solid; } .player-mini-card { padding: 0.5rem 0; } .player-mini-card + .player-mini-card { border-top: 1px solid var(--tile-inner-border); padding-top: 0.5rem; } .player-mini-name { font-weight: 700; font-size: var(--fs-sm); margin-bottom: 0.375rem; } .player-mini-stats { display: flex; flex-wrap: wrap; gap: 0.375rem; } .player-stat-pill { display: inline-flex; align-items: center; background: var(--tile-inner-bg); border-radius: var(--radius-sm); padding: 0.2rem 0.5rem; font-size: var(--fs-xs); } .pill-label { color: var(--ma-text-muted); font-weight: 500; margin-right: 0.25rem; } .pill-value { font-weight: 700; color: var(--ma-text-primary); } /* ===== HEAD-TO-HEAD ===== */ .h2h-summary-card { background: var(--tile-inner-bg); border-radius: 12px; padding: 1.25rem; border: 1px solid var(--tile-inner-border); } .h2h-summary-row { display: flex; align-items: center; justify-content: space-between; } .h2h-team-record { text-align: center; flex: 1; min-width: 0; } .h2h-team-record .record-number { font-size: var(--fs-3xl, 1.875rem); font-weight: 900; line-height: 1; margin-bottom: 4px; } .h2h-team-record .record-label { font-size: var(--fs-xs); color: var(--ma-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .h2h-series-info { text-align: center; flex-shrink: 0; padding: 0 0.25rem; } .h2h-series-info .total-games { font-size: var(--fs-base); font-weight: 600; color: var(--ma-text-primary); white-space: nowrap; } .h2h-series-info .ties-info { font-size: var(--fs-sm); color: var(--ma-text-secondary); margin-top: 4px; } /* Game timeline */ .games-timeline { display: flex; flex-direction: column; gap: 0.5rem; } .game-item { background: var(--tile-inner-bg); border-radius: 10px; padding: 0.75rem; border: 1px solid var(--tile-inner-border); transition: all 0.2s ease; } .game-item:hover { background: var(--bar-track-bg); transform: translateY(-1px); } .game-date { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; } .game-date .year { font-size: var(--fs-sm); font-weight: 600; color: var(--ma-text-primary); } .game-date .season-type { background: var(--bar-track-bg) !important; color: var(--ma-text-secondary) !important; font-size: 0.65rem; } .teams-scores { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; } .team-score { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; } .team-score:last-child { flex-direction: row-reverse; text-align: right; } .team-score.winner { font-weight: 700; } .team-score .team-name { font-size: var(--fs-xs); color: var(--ma-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .team-score .score { font-size: var(--fs-base); font-weight: 700; color: var(--ma-text-primary); flex-shrink: 0; } .vs-separator { color: var(--ma-text-muted); font-size: var(--fs-xs); flex-shrink: 0; padding: 0 0.25rem; } /* ===== ALERTS ===== */ .alert-info { background: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.15); color: var(--ma-text-secondary); border-radius: var(--radius-md); } /* ===== TEXT MUTED OVERRIDE ===== */ .text-muted { color: var(--ma-text-muted) !important; } /* ===== RESPONSIVE — TABLET (2-col) ===== */ @media (max-width: 768px) { .matchup-bento { grid-template-columns: 1fr 1fr; grid-template-areas: "hero hero" "verdict verdict" "form form" "insights insights" "spotlight spotlight" "stats stats" "qb qb" "rb rb" "wr wr" "kick kick" "h2h meetings"; } .insights-grid { grid-template-columns: 1fr; } .matchup-hero-inner { gap: 1rem; } .hero-logo-wrap { width: 90px; height: 90px; } .hero-team-name { font-size: var(--fs-base); } .hero-vs { font-size: var(--fs-xl); } .position-card-grid { grid-template-columns: 1fr; } .comparison-bar-row { grid-template-columns: 60px 1fr 60px; } .bar-value { font-size: var(--fs-base); } .h2h-summary-row { flex-direction: column; gap: 0.75rem; } .bento-tile { padding: 1rem; } .edge-badges { gap: 0.375rem; } .edge-badge { padding: 0.25rem 0.5rem; font-size: 0.65rem; } /* Reduce glass blur for performance */ .bento-tile { --glass-blur: 8px; } /* Disable neon pulse on tablet */ .edge-badge.team1-adv, .edge-badge.team2-adv, .edge-badge.team1-adv.visible, .edge-badge.team2-adv.visible { animation: badgeScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: calc(var(--badge-index, 0) * 0.06s); } } /* ===== RESPONSIVE — MOBILE (1-col) ===== */ @media (max-width: 480px) { .matchup-bento { grid-template-columns: 1fr; grid-template-areas: "hero" "verdict" "form" "insights" "spotlight" "stats" "qb" "rb" "wr" "kick" "h2h" "meetings"; } .hero-logo-wrap { width: 72px; height: 72px; } .matchup-hero-inner { gap: 0.5rem; } .hero-team-name { font-size: var(--fs-sm); } .edge-verdict-pill { font-size: var(--fs-sm); padding: 0.375rem 0.75rem; } /* Disable backdrop-filter entirely for mobile perf */ .bento-tile { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--glass-fallback-bg); } /* Hide gradient mesh on mobile */ .main-content::before { display: none; } } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { .edge-badge, .edge-badge.visible, .edge-badge.team1-adv, .edge-badge.team2-adv, .edge-badge.team1-adv.visible, .edge-badge.team2-adv.visible { animation: none !important; transform: scale(1); opacity: 1; } .bento-tile:hover { transform: none; } .comparison-bar-fill { transition: none; } .hero-logo-wrap:hover { transform: none; } .clash-wave { transition: none !important; } .clash-wave::before, .clash-wave::after, .clash-flow, .clash-flow-alt { display: none !important; } .clash-active .clash-glow { animation: none !important; opacity: 0.5; } .clash-ripple, .clash-ripple-2 { display: none !important; } .game-item:hover { transform: none; } } /* ===================================================== POST-GAME BOX SCORE STYLES ===================================================== */ /* ── Bento grid for postgame ── */ .postgame-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "hero hero hero hero" "quarter quarter teamstats teamstats" "passing passing passing passing" "rushing rushing recv recv" "defense defense defense defense" "noplayers noplayers noplayers noplayers"; gap: 1rem; padding: 1rem; } .postgame-quarter-tile { grid-area: quarter; } .postgame-teamstats-tile { grid-area: teamstats; } .postgame-passing-tile { grid-area: passing; } .postgame-rushing-tile { grid-area: rushing; } .postgame-receiving-tile { grid-area: recv; } .postgame-defense-tile { grid-area: defense; } .postgame-noplayers-tile { grid-area: noplayers; } /* ── Hero: Final score display ── */ .postgame-score-center { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 120px; } .postgame-final-badge { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ma-text-muted); background: var(--tile-inner-bg); padding: 0.15rem 0.75rem; border-radius: var(--radius-full); border: 1px solid var(--tile-inner-border); } .postgame-score-display { display: flex; align-items: baseline; gap: 0.5rem; } .postgame-score { font-size: var(--fs-4xl); font-weight: 800; line-height: 1; } .postgame-score--winner { text-shadow: 0 0 12px currentColor; } [data-theme="dark"] .postgame-score--winner { text-shadow: 0 0 20px currentColor; } .postgame-score-sep { font-size: var(--fs-2xl); color: var(--ma-text-muted); font-weight: 300; } .postgame-venue { font-size: var(--fs-xs); color: var(--ma-text-muted); margin-top: 0.25rem; } /* ── Section title ── */ .postgame-section-title { font-size: var(--fs-sm); font-weight: 700; color: var(--ma-text-primary); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--glass-border); } /* ── Scoring by quarter table ── */ .postgame-quarter-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .postgame-quarter-table th, .postgame-quarter-table td { text-align: center; padding: 0.4rem 0.5rem; color: var(--ma-text-secondary); } .postgame-quarter-table th { font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ma-text-muted); border-bottom: 1px solid var(--glass-border); } .postgame-quarter-team { text-align: left !important; font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } .postgame-quarter-total { font-weight: 800 !important; color: var(--ma-text-primary) !important; } .postgame-quarter-winner td { color: var(--ma-text-primary); font-weight: 600; } /* ── Stat pair rows (3rd down, 4th down, penalties, etc.) ── */ .postgame-stat-pairs { margin-top: 0.75rem; border-top: 1px solid var(--glass-border); padding-top: 0.75rem; } .postgame-stat-row { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0; } .postgame-stat-row + .postgame-stat-row { border-top: 1px solid var(--tile-inner-border); } .postgame-stat-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ma-text-muted); text-align: center; flex: 1; } .postgame-stat-val { font-size: var(--fs-sm); font-weight: 700; color: var(--ma-text-primary); min-width: 50px; text-align: center; } /* ── Player stats split layout ── */ .postgame-player-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .postgame-player-col { min-width: 0; } .postgame-player-team-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 0.35rem; margin-bottom: 0.5rem; border-bottom: 2px solid; } .postgame-player-line { padding: 0.35rem 0; } .postgame-player-line + .postgame-player-line { border-top: 1px solid var(--tile-inner-border); } .postgame-player-name { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ma-text-primary); margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .postgame-player-stats { display: flex; flex-wrap: wrap; gap: 0.25rem; } /* ── Responsive: tablet ── */ @media (max-width: 1024px) { .postgame-bento { grid-template-columns: 1fr 1fr; grid-template-areas: "hero hero" "quarter quarter" "teamstats teamstats" "passing passing" "rushing recv" "defense defense" "noplayers noplayers"; } } /* ── Responsive: mobile ── */ @media (max-width: 640px) { .postgame-bento { grid-template-columns: 1fr; grid-template-areas: "hero" "quarter" "teamstats" "passing" "rushing" "recv" "defense" "noplayers"; } .postgame-player-split { grid-template-columns: 1fr; } .postgame-score { font-size: var(--fs-3xl); } .postgame-quarter-team { max-width: 80px; font-size: var(--fs-xs); } }