.historical-shell { padding-bottom: 56px; } .historical-hero { min-height: auto; } .historical-hero__content { padding-top: 44px; padding-bottom: 46px; } .historical-hero__topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .historical-hero__copy { display: grid; gap: 24px; min-width: 0; } .historical-hero__layout { display: grid; grid-template-columns: minmax(190px, 260px) minmax(0, 0.82fr) minmax(320px, 0.9fr); align-items: center; gap: 32px; } .historical-hero__layout--registry { grid-template-columns: minmax(220px, 330px) minmax(0, 1fr); column-gap: clamp(72px, 7vw, 140px); } .historical-hero__layout > * { min-width: 0; } .historical-logo-frame { width: min(300px, 100%); min-height: 220px; } .historical-hero__title { max-width: 12ch; } .historical-hero__layout--registry .historical-hero__copy { max-width: min(100%, 760px); } .historical-hero__layout--registry .historical-hero__title { max-width: 18ch; } .historical-hero__text { max-width: 60ch; overflow-wrap: anywhere; } /* Registry/historico hero: logo left, real flexible spacer, copy anchored right. */ @media (min-width: 1121px) { .historical-hero__layout--registry { width: 100%; max-width: 1420px; margin: 0 auto; display: grid; grid-template-columns: minmax(400px, 470px) minmax(48px, 1fr) minmax(640px, 820px); column-gap: clamp(28px, 3vw, 56px); align-items: center; } .historical-hero__layout--registry .historical-logo-frame { grid-column: 1; justify-self: start; width: min(470px, 100%); min-height: 360px; padding: 30px 34px; } .historical-hero__layout--registry .logo-frame__image { max-height: 340px; } .historical-hero__layout--registry .historical-hero__copy { grid-column: 3; justify-self: end; width: 100%; max-width: 820px; align-content: center; justify-items: start; text-align: left; } .historical-hero__layout--registry .historical-hero__title { max-width: none; font-size: clamp(4.2rem, 5.2vw, 6.35rem); line-height: 1.02; } .historical-hero__layout--registry .historical-hero__text { max-width: 68ch; } .historical-hero__layout--registry .historical-selector { max-width: 760px; } } @media (min-width: 1121px) and (max-width: 1380px) { .historical-hero__layout--registry { grid-template-columns: minmax(320px, 390px) minmax(28px, 1fr) minmax(560px, 720px); column-gap: clamp(20px, 2.5vw, 40px); } .historical-hero__layout--registry .historical-logo-frame { grid-column: 1; width: min(390px, 100%); min-height: 316px; } .historical-hero__layout--registry .logo-frame__image { max-height: 298px; } .historical-hero__layout--registry .historical-hero__copy { grid-column: 3; width: 100%; max-width: 720px; justify-self: end; } .historical-hero__layout--registry .historical-hero__title { font-size: clamp(3.7rem, 5.35vw, 5.15rem); } } @media (max-width: 1120px) { .historical-hero__layout--registry { max-width: none; } .historical-hero__layout--registry .historical-hero__copy, .historical-hero__layout--registry .historical-hero__title, .historical-hero__layout--registry .historical-hero__text { width: auto; max-width: none; justify-self: stretch; } } .historical-map-hero { position: relative; overflow: hidden; min-height: 220px; margin: 0; border: 1px solid rgba(210, 182, 118, 0.2); border-radius: 18px; background: linear-gradient(180deg, rgba(19, 24, 16, 0.9), rgba(10, 13, 9, 0.72)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px rgba(0, 0, 0, 0.24); } .historical-map-hero[hidden] { display: none; } .historical-map-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(210, 182, 118, 0.12); border-radius: inherit; background: linear-gradient(90deg, rgba(7, 9, 7, 0.24), transparent 34%), linear-gradient(180deg, transparent 54%, rgba(7, 9, 7, 0.44)); pointer-events: none; } .historical-map-hero__image { width: 100%; height: 100%; min-height: 220px; object-fit: cover; } .current-match-map-hero { display: grid; isolation: isolate; } .current-match-map-hero > * { grid-area: 1 / 1; } .current-match-map-placeholder { z-index: 0; display: grid; align-content: end; gap: 6px; min-height: 220px; padding: 24px; color: var(--text); background: linear-gradient(135deg, rgba(183, 201, 125, 0.12), transparent 44%), repeating-linear-gradient( -28deg, rgba(210, 182, 118, 0.06) 0 1px, transparent 1px 20px ); } .current-match-map-placeholder strong { font-size: 1.16rem; text-transform: uppercase; } .current-match-map-placeholder span { color: var(--text-soft); } .current-match-scoreboard-message { max-width: 12ch; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1; } .historical-content { gap: 22px; } .historical-panel { backdrop-filter: blur(4px); } .historical-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .historical-panel__note { max-width: 58ch; margin: 10px 0 0; color: var(--muted); line-height: 1.55; } .historical-snapshot-meta { margin: 8px 0 0; color: var(--text-soft); font-size: 0.86rem; line-height: 1.5; } .historical-selector { display: flex; flex-wrap: wrap; gap: 12px; } .historical-selector__button { min-height: 48px; padding: 0 18px; border: 1px solid rgba(183, 201, 125, 0.28); border-radius: 999px; background: linear-gradient(180deg, rgba(24, 30, 22, 0.94), rgba(11, 14, 10, 0.98)); color: var(--text-soft); font: inherit; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease; } .historical-selector__button:hover, .historical-selector__button:focus-visible, .historical-selector__button.is-active { transform: translateY(-1px); border-color: rgba(210, 182, 118, 0.5); background: linear-gradient(180deg, rgba(183, 201, 125, 0.18), rgba(89, 101, 58, 0.24)); color: var(--text); } .historical-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; } .historical-tabs--timeframe { margin-bottom: 10px; } .historical-tab { min-height: 42px; padding: 0 16px; border: 1px solid rgba(159, 168, 141, 0.2); border-radius: 999px; background: rgba(13, 17, 12, 0.62); color: var(--muted); font: inherit; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease; } .historical-tab:hover, .historical-tab:focus-visible, .historical-tab.is-active { transform: translateY(-1px); border-color: rgba(210, 182, 118, 0.46); background: linear-gradient(180deg, rgba(183, 201, 125, 0.16), rgba(89, 101, 58, 0.18)); color: var(--text); } .historical-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; } .historical-mvp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; } .historical-elo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; } .historical-stat-card, .historical-match-card, .historical-mvp-card, .historical-elo-card { position: relative; overflow: hidden; padding: 18px; border: 1px solid rgba(159, 168, 141, 0.16); border-radius: 18px; background: linear-gradient(180deg, rgba(28, 34, 25, 0.94), rgba(12, 15, 11, 0.98)); box-shadow: var(--shadow-soft); } .historical-stat-card p, .historical-stat-card strong, .historical-match-card p, .historical-match-card strong, .historical-mvp-card p, .historical-mvp-card strong, .historical-mvp-card span, .historical-elo-card p, .historical-elo-card strong, .historical-elo-card span { margin: 0; } .historical-stat-card p, .historical-match-meta__label { margin-bottom: 6px; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } .historical-stat-card strong { font-size: 1.05rem; line-height: 1.4; } .historical-mvp-card { display: grid; gap: 16px; } .historical-mvp-card--v2 { border-color: rgba(187, 143, 72, 0.26); background: radial-gradient(circle at top right, rgba(187, 143, 72, 0.12), transparent 40%), linear-gradient(180deg, rgba(31, 27, 18, 0.96), rgba(12, 15, 11, 0.98)); } .historical-mvp-card--rank-1 { border-color: rgba(210, 182, 118, 0.34); background: radial-gradient(circle at top right, rgba(210, 182, 118, 0.16), transparent 42%), linear-gradient(180deg, rgba(36, 32, 20, 0.96), rgba(12, 15, 11, 0.98)); } .historical-mvp-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .historical-mvp-card__rank { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; padding: 0 12px; border: 1px solid rgba(210, 182, 118, 0.26); border-radius: 999px; color: var(--accent-warm); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .historical-mvp-card__player { font-size: 1.18rem; line-height: 1.3; } .historical-mvp-card__version { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid rgba(187, 143, 72, 0.28); border-radius: 999px; color: var(--accent-warm); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .historical-mvp-card__score-label { margin-bottom: 6px; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } .historical-mvp-card__score-value { color: var(--accent-strong); font-size: 1.8rem; line-height: 1; } .historical-mvp-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .historical-mvp-card__meta span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; } .historical-mvp-card__footer { padding-top: 12px; border-top: 1px solid rgba(159, 168, 141, 0.12); color: var(--text-soft); font-size: 0.88rem; line-height: 1.5; } .historical-mvp-card__signals { display: grid; gap: 10px; } .historical-elo-card { display: grid; gap: 16px; border-color: rgba(96, 150, 124, 0.24); background: radial-gradient(circle at top right, rgba(96, 150, 124, 0.12), transparent 40%), linear-gradient(180deg, rgba(21, 32, 27, 0.96), rgba(12, 15, 11, 0.98)); } .historical-elo-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .historical-elo-card__rank { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; padding: 0 12px; border: 1px solid rgba(96, 150, 124, 0.28); border-radius: 999px; color: #a8d4bf; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .historical-elo-card__accuracy { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid rgba(96, 150, 124, 0.24); border-radius: 999px; color: #a8d4bf; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .historical-elo-card__meta, .historical-elo-card__scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .historical-elo-card__meta article, .historical-elo-card__scores article { padding: 10px 12px; border: 1px solid rgba(96, 150, 124, 0.14); border-radius: 14px; background: rgba(13, 17, 12, 0.42); } .historical-elo-card__meta span, .historical-elo-card__scores span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; } .historical-elo-card__summary { color: var(--text-soft); font-size: 0.9rem; line-height: 1.5; } .historical-elo-card__footer { padding-top: 12px; border-top: 1px solid rgba(159, 168, 141, 0.12); color: var(--text-soft); font-size: 0.88rem; line-height: 1.5; } .historical-mvp-card__signal-summary { color: var(--text-soft); font-size: 0.9rem; line-height: 1.5; } .historical-mvp-card__signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .historical-mvp-card__signal-grid article { padding: 10px 12px; border: 1px solid rgba(187, 143, 72, 0.14); border-radius: 14px; background: rgba(13, 17, 12, 0.42); } .historical-mvp-card__signal-grid span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; } .historical-state { margin: 0 0 16px; padding: 14px 16px; border: 1px dashed rgba(159, 168, 141, 0.28); border-radius: 14px; color: var(--text-soft); background: rgba(13, 17, 12, 0.52); } .historical-state.is-error { border-style: solid; border-color: rgba(210, 182, 118, 0.28); color: var(--accent-warm); } .historical-state[hidden] { display: none; } .historical-table-shell { overflow-x: auto; } .historical-detail-section { display: grid; gap: 14px; margin-top: 18px; } .historical-detail-section__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .historical-detail-section__header h3 { margin: 0; font-size: 1.08rem; } .historical-table { width: 100%; border-collapse: collapse; min-width: 620px; } .historical-table th, .historical-table td { padding: 14px 12px; border-bottom: 1px solid rgba(159, 168, 141, 0.12); text-align: left; } .historical-table th { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } .historical-table td { color: var(--text); } .historical-table tbody tr:last-child td { border-bottom: 0; } .historical-table--players { min-width: 920px; } .historical-table__position { color: var(--accent-warm); font-weight: 700; } .historical-match-list { display: grid; gap: 14px; } .historical-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; } .historical-pagination[hidden] { display: none; } .historical-pagination__size, .historical-pagination__nav { display: flex; align-items: center; gap: 10px; } .historical-pagination__size { color: var(--text-soft); font-size: 0.86rem; font-weight: 700; } .historical-pagination__size select { min-height: 42px; padding: 0 34px 0 12px; border: 1px solid rgba(159, 168, 141, 0.2); border-radius: 6px; color: var(--text); background: rgba(13, 17, 12, 0.72); font: inherit; } .historical-pagination__nav p { margin: 0; min-width: 110px; color: var(--text-soft); font-size: 0.86rem; font-weight: 700; text-align: center; } .historical-pagination .historical-tab { margin: 0; } .historical-pagination .historical-tab:disabled { transform: none; border-color: rgba(159, 168, 141, 0.12); color: rgba(169, 173, 154, 0.48); cursor: default; } .current-match-killfeed-screen { position: relative; width: 100%; min-height: 180px; max-height: 520px; padding: 10px; overflow: hidden; border: 1px solid rgba(159, 168, 141, 0.2); border-radius: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 24%), rgba(7, 9, 9, 0.94); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.44), inset 0 18px 48px rgba(0, 0, 0, 0.24); } .current-match-killfeed-screen::after { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: repeating-linear-gradient( 180deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 5px ); pointer-events: none; content: ""; } .current-match-killfeed { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px; max-height: 500px; overflow: hidden; } .current-match-killfeed__column { display: grid; align-content: start; gap: 6px; min-width: 0; } .current-match-killfeed__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(86px, 112px) minmax(0, 1fr); align-items: center; gap: 8px; min-height: 54px; padding: 6px 9px; overflow: hidden; border: 1px solid rgba(159, 168, 141, 0.14); border-left: 2px solid rgba(159, 168, 141, 0.24); border-radius: 3px; color: var(--text); background: rgba(19, 22, 22, 0.78); animation: current-match-killfeed-enter 180ms ease-out; } .current-match-killfeed__column:last-child .current-match-killfeed__row:last-child { border-color: rgba(210, 182, 118, 0.22); background: linear-gradient(90deg, rgba(210, 182, 118, 0.08), transparent 46%), rgba(24, 25, 22, 0.92); } .current-match-killfeed__row.is-teamkill { border-left-color: rgba(210, 182, 118, 0.64); background: linear-gradient(90deg, rgba(210, 182, 118, 0.12), transparent 48%), rgba(73, 49, 27, 0.32); } .current-match-killfeed__player { display: grid; align-content: center; gap: 3px; min-width: 0; font-size: 0.88rem; line-height: 1.2; } .current-match-killfeed__player-identity { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; flex-wrap: wrap; } .current-match-killfeed__player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .current-match-killfeed__player--killer { color: var(--text); } .current-match-killfeed__player--victim { color: var(--text-soft); } .current-match-killfeed__player-meta { display: flex; align-items: center; gap: 4px; min-width: 0; } .current-match-killfeed__player--killer .current-match-killfeed__player-identity, .current-match-killfeed__player--killer .current-match-killfeed__player-meta { justify-content: flex-end; } .current-match-killfeed__player--victim .current-match-killfeed__player-identity, .current-match-killfeed__player--victim .current-match-killfeed__player-meta { justify-content: flex-start; } .current-match-killfeed__weapon { display: grid; grid-template-rows: 25px auto; align-items: center; justify-content: center; gap: 1px; min-width: 92px; min-height: 38px; padding: 2px 5px; border: 1px solid rgba(159, 168, 141, 0.18); border-radius: 3px; color: var(--text); background: rgba(8, 10, 11, 0.74); } .current-match-killfeed__weapon-icon { display: block; width: min(100%, 104px); height: 24px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72)); } .current-match-killfeed__weapon-fallback { display: grid; width: 24px; height: 24px; justify-self: center; place-items: center; border: 1px solid rgba(210, 182, 118, 0.3); border-radius: 3px; color: var(--accent-warm); font-size: 0.82rem; font-weight: 800; } .current-match-killfeed__weapon-fallback[hidden] { display: none; } .current-match-killfeed__weapon em { display: block; max-width: 112px; overflow: hidden; color: var(--muted); font-size: 0.58rem; font-style: normal; line-height: 1.1; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .current-match-killfeed__teamkill { display: inline-flex; align-items: center; justify-content: center; min-height: 18px; padding: 0 5px; border-radius: 4px; font-size: 0.62rem; font-weight: 800; } .current-match-killfeed__teamkill { border: 1px solid rgba(210, 182, 118, 0.36); color: var(--accent-warm); } .current-match-killfeed__team-badge { min-width: auto; padding-inline: 8px; font-size: 0.62rem; } .current-match-player-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 18px; margin-top: 10px; } .current-match-player-intro .historical-panel__note { margin-top: 0; } .current-match-player-count { flex: 0 0 auto; width: fit-content; margin: 0; padding: 7px 10px; border: 1px solid rgba(159, 168, 141, 0.16); border-radius: 6px; color: var(--text-soft); background: rgba(14, 17, 18, 0.7); font-size: 0.8rem; font-weight: 700; } @keyframes current-match-killfeed-enter { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } .historical-comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; } .historical-comparison-card { display: grid; gap: 14px; padding: 18px; border: 1px solid rgba(159, 168, 141, 0.16); border-radius: 18px; background: radial-gradient(circle at top right, rgba(183, 201, 125, 0.1), transparent 42%), linear-gradient(180deg, rgba(28, 34, 25, 0.94), rgba(12, 15, 11, 0.98)); box-shadow: var(--shadow-soft); } .historical-comparison-card__top, .historical-comparison-card__scores { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .historical-comparison-card__eyebrow, .historical-comparison-card__delta-label, .historical-comparison-card__meta span { margin: 0 0 6px; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; } .historical-comparison-card__title { margin: 0; font-size: 1.08rem; line-height: 1.35; } .historical-comparison-card__delta-value { color: var(--accent-strong); font-size: 1.35rem; line-height: 1; } .historical-comparison-card__score-block strong { display: block; font-size: 1rem; } .historical-comparison-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .historical-comparison-card__meta article { padding: 10px 12px; border: 1px solid rgba(159, 168, 141, 0.14); border-radius: 14px; background: rgba(13, 17, 12, 0.42); } .historical-comparison-card__summary { margin: 0; padding-top: 12px; border-top: 1px solid rgba(159, 168, 141, 0.12); color: var(--text-soft); font-size: 0.9rem; line-height: 1.5; } .historical-match-card { display: grid; gap: 14px; } .historical-match-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .historical-match-card__title { margin: 0; font-size: 1.08rem; } .historical-match-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .historical-match-card__result { padding: 0.45rem 0.75rem; border: 1px solid rgba(183, 201, 125, 0.24); border-radius: 999px; color: var(--accent-strong); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .historical-match-card__link { display: inline-flex; align-items: center; min-height: 34px; padding: 0 0.8rem; border: 1px solid rgba(210, 182, 118, 0.34); border-radius: 999px; color: var(--accent-warm); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; } .historical-match-card__link:hover, .historical-match-card__link:focus-visible { border-color: rgba(210, 182, 118, 0.62); color: var(--text); } .historical-match-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; } .historical-match-meta strong { display: block; line-height: 1.5; } @media (max-width: 720px) { .historical-hero__layout, .historical-hero__topline, .historical-panel__header, .historical-detail-section__header, .historical-match-card__top { flex-direction: column; align-items: flex-start; } .historical-hero__layout { display: grid; grid-template-columns: 1fr; } .historical-hero__copy, .historical-hero__copy > div, .historical-hero__text { width: 100%; max-width: 100%; } .historical-hero__layout--registry .historical-hero__copy, .historical-hero__layout--registry .historical-hero__title { max-width: 100%; } .historical-map-hero { width: 100%; min-height: 190px; } .historical-map-hero__image { min-height: 190px; } .historical-selector { flex-direction: column; } .historical-tabs { flex-direction: column; } .historical-mvp-card__top { flex-direction: column; } .current-match-player-intro { align-items: flex-start; flex-direction: column; } .historical-mvp-card__meta { grid-template-columns: 1fr; } .historical-mvp-card__signal-grid { grid-template-columns: 1fr; } .historical-comparison-card__top, .historical-comparison-card__scores { flex-direction: column; } .historical-comparison-card__meta { grid-template-columns: 1fr; } .historical-match-card__actions { justify-content: flex-start; } .historical-pagination, .historical-pagination__nav { align-items: stretch; flex-direction: column; } .historical-pagination__size { justify-content: space-between; } .historical-tab { width: 100%; } .historical-selector__button { width: 100%; } .historical-table { min-width: 540px; } .current-match-killfeed { grid-template-columns: 1fr; max-height: 500px; } .current-match-killfeed__row { grid-template-columns: minmax(0, 1fr) minmax(86px, 116px) minmax(0, 1fr); } } @media (max-width: 480px) { .current-match-killfeed__row { grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr); gap: 5px; padding-inline: 6px; } .current-match-killfeed__weapon { min-width: 82px; padding-inline: 3px; } .current-match-killfeed__player-name { display: -webkit-box; overflow: hidden; font-size: 0.78rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; white-space: normal; } .current-match-killfeed__player-identity { gap: 5px; } .current-match-killfeed__teamkill { min-height: 16px; font-size: 0.54rem; } } @media (prefers-reduced-motion: reduce) { .current-match-killfeed__row { animation: none; } } .historical-match-card--clean { gap: 12px; } .historical-match-card__top--clean { display: block; } .historical-match-meta--clean { grid-template-columns: minmax(220px, 1.4fr) minmax(130px, 0.75fr) minmax(110px, 0.65fr) minmax(110px, 0.65fr) 340px; align-items: end; } .historical-match-meta--clean > article { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; } .historical-match-card__actions-cell { display: flex; align-items: end; justify-content: flex-end; min-width: 340px; } .historical-match-card__actions-cell .historical-match-card__actions { gap: 10px; align-items: center; justify-content: flex-end; } #recent-matches-list .historical-match-card__actions { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 10px; } #recent-matches-list .historical-match-card__result, #recent-matches-list .historical-match-card__link { flex: 0 0 auto; } @media (max-width: 920px) { .historical-match-meta--clean { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); } .historical-match-card__actions-cell { justify-content: flex-start; min-width: 0; } .historical-match-card__actions-cell .historical-match-card__actions { justify-content: flex-start; } #recent-matches-list .historical-match-card__actions { flex-wrap: wrap; justify-content: flex-start; } } /* Hide public scoreboard action only in the recent matches list. The internal detail page can still show its own scoreboard button. */ #recent-matches-list .historical-match-card__link--scoreboard { display: none; }