| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| |
| *, *::before, *::after { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| :root { |
| --bg-deep: #06060b; |
| --bg-primary: #0a0a0f; |
| --bg-secondary: #0d1117; |
| --bg-elevated: #161b22; |
|
|
| --glass-bg: rgba(255, 255, 255, 0.04); |
| --glass-border: rgba(255, 255, 255, 0.08); |
| --glass-hover: rgba(255, 255, 255, 0.07); |
| --glass-blur: 24px; |
|
|
| --neon-green: #00ff88; |
| --neon-green-dim: #00cc6a; |
| --neon-green-bg: rgba(0, 255, 136, 0.08); |
|
|
| --gold: #ffd700; |
| --gold-dim: #ccac00; |
| --gold-bg: rgba(255, 215, 0, 0.08); |
|
|
| --danger: #ff3366; |
| --danger-bg: rgba(255, 51, 102, 0.08); |
|
|
| --text-primary: #e8e8ec; |
| --text-secondary: #8b8fa3; |
| --text-muted: #525569; |
|
|
| --radius-sm: 8px; |
| --radius-md: 14px; |
| --radius-lg: 20px; |
| --radius-xl: 28px; |
|
|
| --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| --font-mono: 'JetBrains Mono', 'Fira Code', monospace; |
|
|
| --shadow-glow-green: 0 0 30px rgba(0, 255, 136, 0.15), 0 0 60px rgba(0, 255, 136, 0.05); |
| --shadow-glow-gold: 0 0 30px rgba(255, 215, 0, 0.15), 0 0 60px rgba(255, 215, 0, 0.05); |
|
|
| --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); |
| --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1); |
| } |
|
|
| html { |
| font-size: 16px; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
| body { |
| font-family: var(--font-main); |
| background: linear-gradient(145deg, var(--bg-deep) 0%, var(--bg-primary) 40%, var(--bg-secondary) 100%); |
| color: var(--text-primary); |
| min-height: 100vh; |
| overflow-x: hidden; |
| line-height: 1.6; |
| } |
|
|
| |
| body::before { |
| content: ''; |
| position: fixed; |
| inset: 0; |
| background: |
| radial-gradient(2px 2px at 20% 30%, var(--neon-green), transparent), |
| radial-gradient(2px 2px at 40% 70%, var(--gold), transparent), |
| radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.3), transparent), |
| radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.2), transparent), |
| radial-gradient(2px 2px at 10% 80%, var(--neon-green-dim), transparent), |
| radial-gradient(1px 1px at 90% 40%, var(--gold-dim), transparent); |
| background-size: 250px 250px, 300px 300px, 200px 200px, 350px 350px, 280px 280px, 320px 320px; |
| animation: particleDrift 80s linear infinite; |
| pointer-events: none; |
| z-index: 0; |
| } |
|
|
| @keyframes particleDrift { |
| 0% { transform: translate(0, 0); } |
| 100% { transform: translate(-250px, -250px); } |
| } |
|
|
| |
| .neon-green { color: var(--neon-green); } |
| .gold { color: var(--gold); } |
| .danger { color: var(--danger); } |
|
|
| |
| .glass-panel { |
| 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-lg); |
| padding: 1.5rem; |
| position: relative; |
| overflow: hidden; |
| transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth); |
| z-index: 1; |
| } |
|
|
| .glass-panel::before { |
| content: ''; |
| position: absolute; |
| top: 0; left: 0; right: 0; |
| height: 1px; |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); |
| } |
|
|
| .glass-panel:hover { |
| border-color: rgba(255, 255, 255, 0.12); |
| box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .panel-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 1.25rem; |
| } |
|
|
| .panel-header h2 { |
| font-size: 1rem; |
| font-weight: 600; |
| letter-spacing: 0.02em; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
|
|
| .panel-header h2 i { |
| font-size: 0.9rem; |
| } |
|
|
| .panel-badge { |
| font-size: 0.7rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--text-muted); |
| background: rgba(255,255,255,0.05); |
| padding: 0.25rem 0.6rem; |
| border-radius: 100px; |
| border: 1px solid rgba(255,255,255,0.06); |
| } |
|
|
| |
| .top-bar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 1rem 2rem; |
| background: rgba(10, 10, 15, 0.8); |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| border-bottom: 1px solid var(--glass-border); |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| } |
|
|
| .top-bar__brand { |
| display: flex; |
| align-items: center; |
| gap: 0.85rem; |
| } |
|
|
| .brand-icon { |
| width: 42px; |
| height: 42px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: linear-gradient(135deg, var(--neon-green), var(--gold)); |
| border-radius: var(--radius-md); |
| font-size: 1.1rem; |
| color: var(--bg-deep); |
| animation: iconPulse 3s ease-in-out infinite; |
| } |
|
|
| @keyframes iconPulse { |
| 0%, 100% { box-shadow: 0 0 15px rgba(0,255,136,0.3); } |
| 50% { box-shadow: 0 0 25px rgba(255,215,0,0.3); } |
| } |
|
|
| .brand-title { |
| font-size: 1.2rem; |
| font-weight: 800; |
| letter-spacing: -0.02em; |
| } |
|
|
| .brand-subtitle { |
| font-size: 0.7rem; |
| color: var(--text-muted); |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| } |
|
|
| .top-bar__controls { |
| display: flex; |
| align-items: center; |
| gap: 1.25rem; |
| } |
|
|
| .match-selector { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
|
|
| .match-selector label { |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| } |
|
|
| .match-selector select { |
| background: var(--bg-elevated); |
| border: 1px solid var(--glass-border); |
| color: var(--text-primary); |
| padding: 0.4rem 0.75rem; |
| border-radius: var(--radius-sm); |
| font-family: var(--font-main); |
| font-size: 0.8rem; |
| cursor: pointer; |
| outline: none; |
| transition: border-color var(--transition-fast); |
| } |
|
|
| .match-selector select:focus { |
| border-color: var(--neon-green); |
| } |
|
|
| .connection-badge { |
| display: flex; |
| align-items: center; |
| gap: 0.4rem; |
| font-size: 0.75rem; |
| font-weight: 500; |
| padding: 0.35rem 0.75rem; |
| border-radius: 100px; |
| background: rgba(255,255,255,0.04); |
| border: 1px solid var(--glass-border); |
| } |
|
|
| .conn-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--text-muted); |
| animation: blink 2s infinite; |
| } |
|
|
| .connection-badge.connected .conn-dot { |
| background: var(--neon-green); |
| box-shadow: 0 0 8px var(--neon-green); |
| animation: none; |
| } |
|
|
| .connection-badge.disconnected .conn-dot { |
| background: var(--danger); |
| box-shadow: 0 0 8px var(--danger); |
| animation: none; |
| } |
|
|
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.3; } |
| } |
|
|
| |
| .dashboard-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| grid-template-rows: auto; |
| gap: 1.25rem; |
| padding: 1.5rem 2rem; |
| max-width: 1440px; |
| margin: 0 auto; |
| } |
|
|
| |
| .odds-panel { |
| grid-column: 1 / -1; |
| } |
|
|
| |
| .volatility-panel { |
| grid-column: 1; |
| } |
|
|
| |
| .ou-panel { |
| grid-column: 2; |
| } |
|
|
| |
| .wicket-panel { |
| grid-column: 1; |
| } |
|
|
| |
| .heatmap-panel { |
| grid-column: 1 / -1; |
| } |
|
|
| |
| .scorecard-panel { |
| grid-column: 1 / -1; |
| } |
|
|
| |
| .odds-body { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 2rem; |
| margin-bottom: 1rem; |
| } |
|
|
| .odds-team { |
| flex: 1; |
| text-align: center; |
| } |
|
|
| .team-label { |
| font-size: 1.6rem; |
| font-weight: 800; |
| letter-spacing: 0.05em; |
| margin-bottom: 0.25rem; |
| } |
|
|
| .odds-value { |
| font-family: var(--font-mono); |
| font-size: 2.8rem; |
| font-weight: 700; |
| line-height: 1.1; |
| transition: color var(--transition-fast); |
| } |
|
|
| .implied { |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| margin-top: 0.2rem; |
| } |
|
|
| .odds-bar-container { |
| height: 6px; |
| background: rgba(255,255,255,0.06); |
| border-radius: 100px; |
| margin-top: 0.75rem; |
| overflow: hidden; |
| } |
|
|
| .odds-bar { |
| height: 100%; |
| border-radius: 100px; |
| transition: width var(--transition-smooth); |
| } |
|
|
| .odds-bar--home { |
| background: linear-gradient(90deg, var(--neon-green), var(--neon-green-dim)); |
| } |
|
|
| .odds-bar--away { |
| background: linear-gradient(90deg, var(--gold-dim), var(--gold)); |
| } |
|
|
| .odds-vs { |
| font-size: 0.85rem; |
| font-weight: 700; |
| color: var(--text-muted); |
| letter-spacing: 0.1em; |
| } |
|
|
| .odds-meta { |
| display: flex; |
| justify-content: center; |
| gap: 1.5rem; |
| font-size: 0.72rem; |
| color: var(--text-muted); |
| padding-top: 1rem; |
| border-top: 1px solid var(--glass-border); |
| } |
|
|
| .odds-meta strong { |
| color: var(--text-secondary); |
| } |
|
|
| .live-badge { |
| display: flex; |
| align-items: center; |
| gap: 0.4rem; |
| font-size: 0.7rem; |
| font-weight: 700; |
| color: var(--danger); |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| } |
|
|
| .pulse-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--danger); |
| animation: pulse 1.5s ease-in-out infinite; |
| } |
|
|
| @keyframes pulse { |
| 0%, 100% { transform: scale(1); opacity: 1; } |
| 50% { transform: scale(1.5); opacity: 0.5; } |
| } |
|
|
| |
| .gauge-container { |
| display: flex; |
| justify-content: center; |
| padding: 0.5rem 0; |
| } |
|
|
| .gauge-svg { |
| width: 220px; |
| height: 140px; |
| } |
|
|
| .gauge-bg { |
| stroke: rgba(255,255,255,0.06); |
| } |
|
|
| .gauge-fill { |
| transition: stroke-dasharray 0.8s cubic-bezier(0.4, 0, 0.2, 1), |
| stroke 0.5s ease; |
| filter: drop-shadow(0 0 8px currentColor); |
| } |
|
|
| .gauge-value { |
| fill: var(--text-primary); |
| font-family: var(--font-mono); |
| font-size: 28px; |
| font-weight: 700; |
| } |
|
|
| .gauge-label { |
| fill: var(--text-secondary); |
| font-size: 13px; |
| font-weight: 500; |
| } |
|
|
| .volatility-stats { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 0.75rem; |
| margin-top: 1rem; |
| } |
|
|
| .stat-item { |
| text-align: center; |
| padding: 0.6rem; |
| background: rgba(255,255,255,0.03); |
| border-radius: var(--radius-sm); |
| border: 1px solid rgba(255,255,255,0.04); |
| } |
|
|
| .stat-label { |
| display: block; |
| font-size: 0.65rem; |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| margin-bottom: 0.2rem; |
| } |
|
|
| .stat-value { |
| font-family: var(--font-mono); |
| font-size: 1rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
|
|
| |
| .table-wrapper { |
| overflow-x: auto; |
| } |
|
|
| .styled-table { |
| width: 100%; |
| border-collapse: separate; |
| border-spacing: 0; |
| font-size: 0.82rem; |
| } |
|
|
| .styled-table thead th { |
| text-align: left; |
| font-size: 0.68rem; |
| font-weight: 600; |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| padding: 0.6rem 0.75rem; |
| border-bottom: 1px solid var(--glass-border); |
| white-space: nowrap; |
| } |
|
|
| .odds-col { |
| font-weight: 400; |
| color: var(--text-muted); |
| } |
|
|
| .styled-table tbody td { |
| padding: 0.65rem 0.75rem; |
| border-bottom: 1px solid rgba(255,255,255,0.03); |
| font-family: var(--font-mono); |
| font-size: 0.8rem; |
| vertical-align: middle; |
| } |
|
|
| .styled-table tbody tr { |
| transition: background var(--transition-fast); |
| } |
|
|
| .styled-table tbody tr:hover { |
| background: rgba(255,255,255,0.03); |
| } |
|
|
| .styled-table tbody td:first-child { |
| font-family: var(--font-main); |
| font-weight: 500; |
| color: var(--text-secondary); |
| } |
|
|
| .update-time { |
| font-size: 0.65rem; |
| color: var(--text-muted); |
| font-family: var(--font-mono); |
| } |
|
|
| .skeleton-row td { |
| text-align: center; |
| color: var(--text-muted); |
| font-family: var(--font-main); |
| font-style: italic; |
| } |
|
|
| |
| .wicket-methods { |
| display: flex; |
| flex-direction: column; |
| gap: 0.6rem; |
| } |
|
|
| .wicket-row { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| padding: 0.6rem 0.75rem; |
| background: rgba(255,255,255,0.02); |
| border-radius: var(--radius-sm); |
| border: 1px solid rgba(255,255,255,0.04); |
| transition: all var(--transition-fast); |
| } |
|
|
| .wicket-row:hover { |
| background: rgba(255,255,255,0.05); |
| border-color: rgba(255,255,255,0.08); |
| } |
|
|
| .wicket-method-name { |
| font-size: 0.82rem; |
| font-weight: 500; |
| color: var(--text-secondary); |
| min-width: 80px; |
| } |
|
|
| .wicket-prob-bar { |
| flex: 1; |
| height: 8px; |
| background: rgba(255,255,255,0.06); |
| border-radius: 100px; |
| overflow: hidden; |
| } |
|
|
| .wicket-prob-fill { |
| height: 100%; |
| border-radius: 100px; |
| transition: width var(--transition-smooth); |
| background: linear-gradient(90deg, var(--neon-green-dim), var(--neon-green)); |
| } |
|
|
| .wicket-prob-fill.top-method { |
| background: linear-gradient(90deg, var(--gold-dim), var(--gold)); |
| } |
|
|
| .wicket-prob-value { |
| font-family: var(--font-mono); |
| font-size: 0.82rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| min-width: 50px; |
| text-align: right; |
| } |
|
|
| .wicket-pressure { |
| font-size: 0.65rem; |
| font-family: var(--font-mono); |
| color: var(--neon-green); |
| background: var(--neon-green-bg); |
| padding: 0.15rem 0.45rem; |
| border-radius: 100px; |
| } |
|
|
| .wicket-empty { |
| text-align: center; |
| color: var(--text-muted); |
| font-size: 0.85rem; |
| padding: 1rem; |
| } |
|
|
| |
| .heatmap-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); |
| gap: 0.75rem; |
| min-height: 80px; |
| } |
|
|
| .heatmap-cell { |
| padding: 1rem; |
| border-radius: var(--radius-md); |
| border: 1px solid rgba(255,255,255,0.06); |
| position: relative; |
| overflow: hidden; |
| transition: all var(--transition-smooth); |
| cursor: default; |
| } |
|
|
| .heatmap-cell:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .heatmap-cell::after { |
| content: ''; |
| position: absolute; |
| top: 0; right: 0; |
| width: 60px; |
| height: 60px; |
| border-radius: 50%; |
| background: inherit; |
| filter: blur(25px); |
| opacity: 0.4; |
| pointer-events: none; |
| } |
|
|
| .heatmap-cell .cell-player { |
| font-size: 0.75rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 0.2rem; |
| display: flex; |
| align-items: center; |
| gap: 0.4rem; |
| } |
|
|
| .heatmap-cell .cell-player i { |
| font-size: 0.65rem; |
| opacity: 0.6; |
| } |
|
|
| .heatmap-cell .cell-milestone { |
| font-size: 0.65rem; |
| color: var(--text-muted); |
| margin-bottom: 0.6rem; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .heatmap-cell .cell-prob { |
| font-family: var(--font-mono); |
| font-size: 1.4rem; |
| font-weight: 700; |
| margin-bottom: 0.3rem; |
| } |
|
|
| .heatmap-cell .cell-stats { |
| font-size: 0.65rem; |
| color: var(--text-muted); |
| display: flex; |
| gap: 0.6rem; |
| } |
|
|
| .heatmap-cell .cell-stats span { |
| display: flex; |
| align-items: center; |
| gap: 0.2rem; |
| } |
|
|
| |
| .heatmap-cell.prob-very-low { background: rgba(255, 51, 51, 0.08); border-color: rgba(255, 51, 51, 0.15); } |
| .heatmap-cell.prob-low { background: rgba(255, 136, 0, 0.08); border-color: rgba(255, 136, 0, 0.15); } |
| .heatmap-cell.prob-medium { background: rgba(255, 215, 0, 0.08); border-color: rgba(255, 215, 0, 0.15); } |
| .heatmap-cell.prob-high { background: rgba(136, 255, 68, 0.08); border-color: rgba(136, 255, 68, 0.15); } |
| .heatmap-cell.prob-very-high { background: rgba(0, 255, 136, 0.08); border-color: rgba(0, 255, 136, 0.20); box-shadow: 0 0 20px rgba(0, 255, 136, 0.06); } |
|
|
| .heatmap-cell.prob-very-low .cell-prob { color: #ff5555; } |
| .heatmap-cell.prob-low .cell-prob { color: #ff8800; } |
| .heatmap-cell.prob-medium .cell-prob { color: var(--gold); } |
| .heatmap-cell.prob-high .cell-prob { color: #88ff44; } |
| .heatmap-cell.prob-very-high .cell-prob { color: var(--neon-green); } |
|
|
| .heatmap-legend { |
| display: flex; |
| justify-content: center; |
| gap: 1rem; |
| margin-top: 1rem; |
| padding-top: 0.75rem; |
| border-top: 1px solid var(--glass-border); |
| } |
|
|
| .legend-item { |
| display: flex; |
| align-items: center; |
| gap: 0.35rem; |
| font-size: 0.65rem; |
| color: var(--text-muted); |
| } |
|
|
| .legend-swatch { |
| width: 10px; |
| height: 10px; |
| border-radius: 3px; |
| } |
|
|
| .heatmap-empty { |
| grid-column: 1 / -1; |
| text-align: center; |
| color: var(--text-muted); |
| font-size: 0.85rem; |
| padding: 2rem; |
| } |
|
|
| |
| .scorecard-body { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
|
|
| .score-main { |
| text-align: left; |
| } |
|
|
| .score-runs { |
| font-family: var(--font-mono); |
| font-size: 3rem; |
| font-weight: 800; |
| color: var(--text-primary); |
| line-height: 1; |
| } |
|
|
| .score-wickets { |
| font-size: 1.8rem; |
| color: var(--text-secondary); |
| } |
|
|
| .score-overs { |
| font-size: 0.85rem; |
| color: var(--text-muted); |
| margin-top: 0.15rem; |
| font-family: var(--font-mono); |
| } |
|
|
| .score-extras { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 0.75rem; |
| } |
|
|
| .extra-stat { |
| text-align: center; |
| padding: 0.75rem 1.25rem; |
| background: rgba(255,255,255,0.03); |
| border-radius: var(--radius-sm); |
| border: 1px solid rgba(255,255,255,0.05); |
| } |
|
|
| .extra-stat span { |
| display: block; |
| font-size: 0.65rem; |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| margin-bottom: 0.15rem; |
| } |
|
|
| .extra-stat strong { |
| font-family: var(--font-mono); |
| font-size: 1.05rem; |
| color: var(--text-primary); |
| } |
|
|
| |
| .app-footer { |
| text-align: center; |
| padding: 1rem 2rem; |
| font-size: 0.7rem; |
| color: var(--text-muted); |
| border-top: 1px solid var(--glass-border); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.6rem; |
| } |
|
|
| |
| @keyframes oddsFlashGreen { |
| 0% { color: var(--neon-green); text-shadow: 0 0 15px var(--neon-green); } |
| 100% { color: var(--text-primary); text-shadow: none; } |
| } |
|
|
| @keyframes oddsFlashGold { |
| 0% { color: var(--gold); text-shadow: 0 0 15px var(--gold); } |
| 100% { color: var(--text-primary); text-shadow: none; } |
| } |
|
|
| .odds-flash-up { |
| animation: oddsFlashGreen 1s ease-out; |
| } |
|
|
| .odds-flash-down { |
| animation: oddsFlashGold 1s ease-out; |
| } |
|
|
| |
| @media (max-width: 1024px) { |
| .dashboard-grid { |
| grid-template-columns: 1fr; |
| padding: 1rem; |
| gap: 1rem; |
| } |
|
|
| .odds-panel, |
| .heatmap-panel, |
| .scorecard-panel, |
| .volatility-panel, |
| .ou-panel, |
| .wicket-panel { |
| grid-column: 1; |
| } |
|
|
| .top-bar { |
| flex-direction: column; |
| gap: 0.75rem; |
| padding: 0.75rem 1rem; |
| } |
|
|
| .top-bar__controls { |
| width: 100%; |
| justify-content: space-between; |
| } |
|
|
| .odds-value { |
| font-size: 2rem; |
| } |
|
|
| .score-runs { |
| font-size: 2.2rem; |
| } |
| } |
|
|
| @media (max-width: 640px) { |
| .odds-body { |
| flex-direction: column; |
| gap: 1rem; |
| } |
|
|
| .odds-vs { |
| display: none; |
| } |
|
|
| .odds-meta { |
| flex-wrap: wrap; |
| gap: 0.75rem; |
| } |
|
|
| .volatility-stats { |
| grid-template-columns: 1fr; |
| } |
|
|
| .scorecard-body { |
| flex-direction: column; |
| gap: 1rem; |
| text-align: center; |
| } |
|
|
| .score-main { |
| text-align: center; |
| } |
|
|
| .heatmap-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .heatmap-legend { |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| } |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: rgba(255,255,255,0.1); |
| border-radius: 100px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: rgba(255,255,255,0.2); |
| } |
|
|
