Spaces:
Sleeping
Sleeping
| .view-shell { | |
| min-height: 100vh; | |
| width: min(1200px, 92vw); | |
| margin: 0 auto; | |
| padding: clamp(2rem, 3vw, 3.5rem) 0; | |
| display: grid; | |
| place-items: center; | |
| } | |
| .rise { | |
| animation: riseIn 700ms cubic-bezier(0.2, 0.9, 0.2, 1) both; | |
| } | |
| .landing-shell { | |
| position: relative; | |
| } | |
| .landing-card { | |
| width: min(860px, 100%); | |
| background: linear-gradient(180deg, var(--bg-panel) 0%, rgba(13, 13, 17, 0.9) 100%); | |
| border: 1px solid var(--line-soft); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-depth); | |
| padding: clamp(1.5rem, 3vw, 3.5rem); | |
| text-align: center; | |
| } | |
| .eyebrow { | |
| margin-bottom: 0.9rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.15em; | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| } | |
| .centered { | |
| text-align: center; | |
| } | |
| .landing-title { | |
| font-size: clamp(2rem, 5vw, 3.5rem); | |
| line-height: 0.95; | |
| margin-bottom: 1rem; | |
| } | |
| .landing-subtitle { | |
| max-width: 68ch; | |
| color: var(--text-muted); | |
| font-size: clamp(1rem, 2vw, 1.18rem); | |
| margin-bottom: 1.5rem; | |
| margin-inline: auto; | |
| } | |
| .landing-metrics { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 0.7rem; | |
| margin-bottom: 1.6rem; | |
| } | |
| .landing-metrics span { | |
| border: 1px solid var(--line-soft); | |
| background: rgba(255, 255, 255, 0.02); | |
| border-radius: 999px; | |
| padding: 0.35rem 0.8rem; | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| } | |
| .match-form { | |
| display: grid; | |
| gap: 0.55rem; | |
| text-align: left; | |
| } | |
| .input-label { | |
| color: var(--text-muted); | |
| font-size: 0.88rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.09em; | |
| } | |
| .input-row { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 0.6rem; | |
| padding: 0.5rem; | |
| border: 1px solid var(--line-soft); | |
| border-radius: var(--radius-md); | |
| background: var(--bg-panel-soft); | |
| transition: border-color 240ms ease, box-shadow 240ms ease; | |
| } | |
| .input-row:focus-within { | |
| border-color: var(--line-strong); | |
| box-shadow: 0 0 0 3px rgba(198, 167, 105, 0.18); | |
| } | |
| .input-row.has-error { | |
| border-color: rgba(196, 88, 88, 0.7); | |
| box-shadow: 0 0 0 3px rgba(196, 88, 88, 0.2); | |
| } | |
| .match-input { | |
| border: 0; | |
| background: transparent; | |
| color: var(--text-strong); | |
| font-size: 1.05rem; | |
| padding: 0.75rem 0.85rem; | |
| outline: none; | |
| } | |
| .match-input::placeholder { | |
| color: var(--text-subtle); | |
| } | |
| .primary-btn, | |
| .ghost-btn { | |
| border: 0; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease; | |
| } | |
| .primary-btn { | |
| border-radius: var(--radius-sm); | |
| padding: 0.75rem 1rem; | |
| background: linear-gradient(120deg, #9f8552, #c6a769 42%, #e4d1a7); | |
| background-size: 220% 220%; | |
| color: #121215; | |
| font-weight: 800; | |
| } | |
| .primary-btn:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 10px 24px rgba(198, 167, 105, 0.35); | |
| animation: rainbowShift 2.1s linear infinite; | |
| } | |
| .primary-btn:focus-visible, | |
| .ghost-btn:focus-visible, | |
| .match-input:focus-visible { | |
| outline: 2px solid var(--accent-primary); | |
| outline-offset: 2px; | |
| } | |
| .helper-text { | |
| color: var(--text-subtle); | |
| font-size: 0.84rem; | |
| } | |
| .helper-text.error { | |
| color: var(--accent-danger); | |
| } | |
| .dashboard-shell { | |
| align-items: start; | |
| padding-top: 2.3rem; | |
| gap: 1.2rem; | |
| } | |
| .dashboard-header { | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 0.8rem; | |
| margin-bottom: 1rem; | |
| } | |
| .ghost-btn { | |
| padding: 0.68rem 1rem; | |
| border-radius: 999px; | |
| border: 1px solid var(--line-soft); | |
| color: var(--text-muted); | |
| background: rgba(255, 255, 255, 0.02); | |
| } | |
| .ghost-btn:hover { | |
| transform: translateY(-1px); | |
| border-color: var(--line-strong); | |
| color: var(--text-strong); | |
| } | |
| .target-match { | |
| margin: 0; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| } | |
| .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.2rem; | |
| } | |
| .winner-badge { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| padding: 0.5rem 1.2rem; | |
| border-radius: var(--radius-md); | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--line-soft); | |
| } | |
| .winner-label { | |
| font-size: 0.65rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| color: var(--text-muted); | |
| } | |
| .winner-name { | |
| font-family: var(--font-display); | |
| font-size: 1.15rem; | |
| font-weight: 800; | |
| } | |
| .winner-badge.blue-win { | |
| border-color: rgba(25, 215, 255, 0.4); | |
| box-shadow: 0 0 20px rgba(25, 215, 255, 0.15); | |
| } | |
| .winner-badge.blue-win .winner-name { | |
| color: var(--accent-blue-team); | |
| text-shadow: 0 0 12px rgba(25, 215, 255, 0.4); | |
| } | |
| .winner-badge.red-win { | |
| border-color: rgba(255, 95, 122, 0.4); | |
| box-shadow: 0 0 20px rgba(255, 95, 122, 0.15); | |
| } | |
| .winner-badge.red-win .winner-name { | |
| color: var(--accent-red-team); | |
| text-shadow: 0 0 12px rgba(255, 95, 122, 0.4); | |
| } | |
| .target-match strong { | |
| color: var(--accent-primary); | |
| font-family: var(--font-display); | |
| font-size: 0.98rem; | |
| } | |
| .dashboard-grid { | |
| width: 100%; | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 1.2rem; | |
| } | |
| .panel { | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--line-soft); | |
| background: linear-gradient(180deg, rgba(19, 19, 24, 0.88) 0%, rgba(10, 10, 13, 0.9) 100%); | |
| box-shadow: var(--shadow-depth); | |
| padding: clamp(1.1rem, 2.2vw, 1.8rem); | |
| } | |
| .panel-kicker { | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.11em; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| } | |
| .primary-panel h2 { | |
| margin-top: 0.45rem; | |
| font-size: clamp(1.22rem, 2vw, 2rem); | |
| } | |
| .probability-panel { | |
| max-width: 760px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| .probability-panel h2 { | |
| text-align: center; | |
| } | |
| .headline-metric { | |
| margin-top: 0.9rem; | |
| display: flex; | |
| align-items: baseline; | |
| gap: 0.8rem; | |
| } | |
| .metric-value { | |
| font-family: var(--font-display); | |
| color: var(--accent-primary); | |
| font-size: clamp(2rem, 6vw, 3.5rem); | |
| line-height: 1; | |
| } | |
| .metric-caption { | |
| color: var(--text-muted); | |
| font-size: 0.94rem; | |
| } | |
| .duel-probability { | |
| margin-top: 0.8rem; | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 0.55rem; | |
| } | |
| .duel-card { | |
| border-radius: var(--radius-sm); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| padding: 0.65rem 0.75rem; | |
| background: rgba(255, 255, 255, 0.03); | |
| } | |
| .duel-card p { | |
| font-size: 0.76rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .duel-card strong { | |
| display: inline-block; | |
| margin-top: 0.2rem; | |
| font-family: var(--font-display); | |
| font-size: 1.1rem; | |
| } | |
| .duel-card.blue strong { | |
| color: var(--accent-blue-team); | |
| } | |
| .duel-card.red strong { | |
| color: var(--accent-red-team); | |
| } | |
| .status-row { | |
| margin-top: 0.5rem; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.45rem; | |
| border: 1px solid var(--line-soft); | |
| border-radius: 999px; | |
| padding: 0.32rem 0.7rem; | |
| color: var(--text-muted); | |
| font-size: 0.82rem; | |
| } | |
| .live-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 999px; | |
| background: var(--accent-danger); | |
| animation: pulseLive 1.4s ease-in-out infinite; | |
| } | |
| .analysis-controls { | |
| margin-top: 1rem; | |
| display: grid; | |
| gap: 0.55rem; | |
| } | |
| .timeline-panel h3 { | |
| margin-top: 0.35rem; | |
| font-size: 1.25rem; | |
| } | |
| .playback-btn { | |
| justify-self: start; | |
| } | |
| .slider-label { | |
| color: var(--text-muted); | |
| font-size: 0.84rem; | |
| } | |
| .minute-slider { | |
| width: 100%; | |
| accent-color: var(--accent-primary); | |
| cursor: pointer; | |
| } | |
| .chart-wrap { | |
| margin-top: 0.9rem; | |
| padding: 0.7rem; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--line-soft); | |
| background: rgba(255, 255, 255, 0.02); | |
| } | |
| .timeline-feed-scroll { | |
| margin-top: 0.9rem; | |
| max-height: 320px; | |
| overflow-y: auto; | |
| padding-right: 0.3rem; | |
| scroll-behavior: smooth; | |
| } | |
| .timeline-feed-scroll::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .timeline-feed-scroll::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.04); | |
| border-radius: 999px; | |
| } | |
| .timeline-feed-scroll::-webkit-scrollbar-thumb { | |
| background: rgba(198, 167, 105, 0.45); | |
| border-radius: 999px; | |
| } | |
| .probability-chart { | |
| width: 100%; | |
| height: 220px; | |
| } | |
| .chart-line { | |
| fill: none; | |
| stroke-width: 2.4; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .chart-line.xgboost { | |
| stroke: var(--accent-success); | |
| } | |
| .chart-line.lstm { | |
| stroke: var(--accent-secondary); | |
| } | |
| .chart-line.logistic { | |
| stroke: #ffe138; | |
| stroke-width: 1.8; | |
| stroke-dasharray: 4 2; | |
| } | |
| .chart-indicator { | |
| stroke: var(--text-strong); | |
| stroke-opacity: 0.5; | |
| stroke-dasharray: 5 5; | |
| } | |
| .chart-event-line { | |
| stroke-width: 2; | |
| stroke-dasharray: 4 4; | |
| opacity: 0.8; | |
| } | |
| .chart-event-line.kills { | |
| stroke: #ff5f7a; | |
| } | |
| .chart-event-line.objectives { | |
| stroke: #19d7ff; | |
| } | |
| .chart-event-line.captures { | |
| stroke: #6cf3a2; | |
| } | |
| .chart-event-line.structures { | |
| stroke: #f0932b; | |
| } | |
| .chart-axis { | |
| margin-top: 0.35rem; | |
| display: flex; | |
| justify-content: space-between; | |
| color: var(--text-subtle); | |
| font-size: 0.76rem; | |
| } | |
| .models-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 0.7rem; | |
| } | |
| .models-grid-above { | |
| margin-top: -0.2rem; | |
| } | |
| .model-card { | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-md); | |
| padding: 0.8rem; | |
| background: rgba(255, 255, 255, 0.015); | |
| } | |
| .model-kicker { | |
| margin-bottom: 0.35rem; | |
| font-size: 0.68rem; | |
| color: var(--text-subtle); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| font-weight: 700; | |
| } | |
| .model-card h3 { | |
| font-size: 0.84rem; | |
| margin-bottom: 0.5rem; | |
| min-height: 2.1em; | |
| } | |
| .model-value { | |
| font-size: 1.4rem; | |
| font-family: var(--font-display); | |
| } | |
| .model-dual-values { | |
| display: grid; | |
| gap: 0.15rem; | |
| } | |
| .model-value.blue { | |
| color: var(--accent-blue-team); | |
| font-size: 1.06rem; | |
| } | |
| .model-value.red { | |
| color: var(--accent-red-team); | |
| font-size: 1.06rem; | |
| } | |
| .model-track { | |
| margin-top: 0.42rem; | |
| height: 6px; | |
| border-radius: 999px; | |
| background: rgba(255, 95, 122, 0.25); | |
| overflow: hidden; | |
| } | |
| .model-fill { | |
| height: 100%; | |
| transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1); | |
| background: linear-gradient(90deg, rgba(25, 215, 255, 0.35), var(--accent-blue-team)); | |
| } | |
| .timeline-list { | |
| display: grid; | |
| gap: 0.6rem; | |
| } | |
| .feed-placeholder { | |
| color: var(--text-subtle); | |
| font-size: 0.85rem; | |
| border: 1px dashed var(--line-soft); | |
| border-radius: var(--radius-sm); | |
| padding: 0.75rem; | |
| } | |
| .filter-row { | |
| margin-top: 0.45rem; | |
| margin-bottom: 0.7rem; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.45rem; | |
| } | |
| .filter-chip { | |
| border: 1px solid var(--line-soft); | |
| background: rgba(255, 255, 255, 0.02); | |
| color: var(--text-muted); | |
| border-radius: 999px; | |
| padding: 0.3rem 0.7rem; | |
| font-size: 0.74rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.07em; | |
| cursor: pointer; | |
| } | |
| .filter-chip.active { | |
| color: var(--text-strong); | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| .timeline-item { | |
| border: 0; | |
| text-align: left; | |
| width: 100%; | |
| cursor: pointer; | |
| border-left: 2px solid rgba(255, 255, 255, 0.16); | |
| padding: 0.5rem 0.8rem; | |
| background: rgba(255, 255, 255, 0.02); | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| opacity: 0.5; | |
| transition: opacity 240ms ease, border-color 240ms ease, transform 240ms ease; | |
| } | |
| .timeline-item.active { | |
| opacity: 1; | |
| border-color: var(--accent-primary); | |
| transform: translateX(4px); | |
| } | |
| .timeline-item.latest-item { | |
| animation: latestAppear 520ms cubic-bezier(0.2, 0.9, 0.3, 1); | |
| } | |
| .timeline-item:hover { | |
| opacity: 0.86; | |
| } | |
| .event-type-tag { | |
| margin-top: 0.3rem; | |
| display: inline-block; | |
| border-radius: 999px; | |
| padding: 0.18rem 0.5rem; | |
| border: 1px solid rgba(255, 255, 255, 0.14); | |
| color: var(--text-subtle); | |
| font-size: 0.68rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .turning-points-definition { | |
| margin-top: 0.9rem; | |
| border-top: 1px dashed var(--line-soft); | |
| padding-top: 0.7rem; | |
| } | |
| .turning-panel h3 { | |
| margin-top: 0.45rem; | |
| margin-bottom: 0.8rem; | |
| font-size: 1.15rem; | |
| } | |
| .turning-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 0.55rem; | |
| max-height: 420px; | |
| overflow-y: auto; | |
| padding-right: 0.5rem; | |
| } | |
| .turning-grid::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .turning-grid::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.02); | |
| border-radius: 999px; | |
| } | |
| .turning-grid::-webkit-scrollbar-thumb { | |
| background: rgba(198, 167, 105, 0.3); | |
| border-radius: 999px; | |
| } | |
| .turning-card { | |
| border: 0; | |
| text-align: left; | |
| width: 100%; | |
| cursor: pointer; | |
| border-left: 2px solid rgba(255, 255, 255, 0.16); | |
| padding: 0.5rem 0.8rem; | |
| background: rgba(255, 255, 255, 0.02); | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| opacity: 0.62; | |
| transition: opacity 240ms ease, border-color 240ms ease, transform 240ms ease; | |
| } | |
| .turning-card.active { | |
| opacity: 1; | |
| border-color: var(--accent-primary); | |
| transform: translateX(-3px); | |
| } | |
| .definition-title { | |
| margin-bottom: 0.32rem; | |
| color: var(--text-strong); | |
| font-size: 0.84rem; | |
| font-weight: 700; | |
| } | |
| .turning-points-definition p { | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| } | |
| .timeline-clock { | |
| font-family: var(--font-display); | |
| font-size: 0.96rem; | |
| color: var(--text-strong); | |
| text-shadow: 0 0 10px rgba(198, 167, 105, 0.35); | |
| } | |
| .timeline-text { | |
| margin-top: 0.15rem; | |
| color: var(--text-muted); | |
| font-size: 0.89rem; | |
| } | |
| .team-blue { | |
| color: var(--accent-blue-team); | |
| font-weight: 700; | |
| } | |
| .team-red { | |
| color: var(--accent-red-team); | |
| font-weight: 700; | |
| } | |
| @keyframes riseIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(16px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes pulseLive { | |
| 0%, | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(196, 88, 88, 0.42); | |
| } | |
| 60% { | |
| box-shadow: 0 0 0 8px rgba(196, 88, 88, 0); | |
| } | |
| } | |
| @keyframes latestAppear { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes rainbowShift { | |
| 0% { | |
| background-position: 0% 50%; | |
| filter: hue-rotate(0deg); | |
| } | |
| 100% { | |
| background-position: 220% 50%; | |
| filter: hue-rotate(360deg); | |
| } | |
| } | |
| @media (max-width: 980px) { | |
| .dashboard-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .models-grid { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .playback-btn { | |
| justify-self: stretch; | |
| } | |
| .duel-probability { | |
| grid-template-columns: 1fr; | |
| } | |
| .turning-grid { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: none; | |
| } | |
| } | |
| @media (max-width: 720px) { | |
| .view-shell { | |
| width: min(94vw, 1200px); | |
| } | |
| .input-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .primary-btn { | |
| width: 100%; | |
| } | |
| .models-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .dashboard-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .rise, | |
| .live-dot { | |
| animation: none; | |
| } | |
| .model-fill, | |
| .timeline-item, | |
| .primary-btn, | |
| .ghost-btn { | |
| transition: none; | |
| } | |
| .timeline-item.latest-item { | |
| animation: none; | |
| } | |
| .primary-btn:hover { | |
| animation: none; | |
| } | |
| } | |
| /* ── ML Models row ── */ | |
| .ml-models-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 0.7rem; | |
| margin-bottom: 1.6rem; | |
| } | |
| .ml-models-label { | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| } | |
| .ml-model-badge { | |
| border: 1px solid var(--line-soft); | |
| background: rgba(255, 255, 255, 0.02); | |
| border-radius: 999px; | |
| padding: 0.35rem 0.8rem; | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| } | |
| /* ── Example IDs row ── */ | |
| .example-ids-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 0.7rem; | |
| margin-top: 1rem; | |
| } | |
| .example-ids-label { | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| } | |
| .example-id-chip { | |
| border: 1px solid var(--line-soft); | |
| background: rgba(255, 255, 255, 0.02); | |
| border-radius: 999px; | |
| padding: 0.35rem 0.8rem; | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| transition: border-color 200ms ease, color 200ms ease, background 200ms ease; | |
| } | |
| .example-id-chip:hover { | |
| border-color: var(--line-strong); | |
| color: var(--text-strong); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .example-id-chip.active { | |
| border-color: var(--accent-primary); | |
| color: var(--accent-primary); | |
| background: rgba(198, 167, 105, 0.07); | |
| } | |
| .riot-disclaimer { | |
| text-align: center; | |
| padding: 12px 24px; | |
| font-size: 0.72rem; | |
| color: rgba(255, 255, 255, 0.4); | |
| border-top: 1px solid rgba(255, 255, 255, 0.08); | |
| margin-top: auto; | |
| } |