/*
  Final color contract
  --------------------
  This file intentionally loads after every feature stylesheet. The legacy hub
  has both dark-shell and light-table themes; keeping their foreground and
  background colors paired here prevents later feature rules from combining a
  foreground from one theme with a background from the other.
*/
:root {
  --ui-shell: #1d1d1a;
  --ui-shell-raised: #292926;
  --ui-shell-line: #41413c;
  --ui-shell-text: #f7f7f4;
  --ui-shell-muted: #c8c8c1;
  --ui-table: #ffffff;
  --ui-table-alt: #f6f6f3;
  --ui-table-head: #e9e9e4;
  --ui-table-sticky: #eeeeea;
  --ui-table-sticky-alt: #e6e6e1;
  --ui-table-total: #d9d9d3;
  --ui-table-line: #c9c9c3;
  --ui-table-text: #111111;
  --ui-table-muted: #555550;
  /* Sampled from the 2026 event reference wall and lifted slightly for screens. */
  --ui-accent: #ff4f01;
}

/* The navbar mark is a dedicated vector asset already filled with the UI accent. */
.brand-logo {
  filter: none;
}

/* Dark page chrome always carries light type. */
.content-section,
.content-section.detail-section,
.table-panel,
.box-table-panel,
.history-table-panel,
.profile-session-section,
.team-profile-stats-panel,
.full-leaderboard-panel,
.boys-pool-standings-panel,
.overview-leader-categories-panel,
.leaderboard-section,
.standings-section,
.upcoming-schedule-section,
.program-age-nav {
  border-color: var(--ui-shell-line) !important;
  background: var(--ui-shell) !important;
  color: var(--ui-shell-text) !important;
}

.content-section > h2,
.content-section > h3,
.content-section .section-header h2,
.content-section .section-header h3,
.table-panel > h3,
.box-table-panel > h3,
.history-table-panel > h3,
.full-leaderboard-head h3,
.team-profile-title-block h2,
.program-age-nav > span {
  color: var(--ui-shell-text) !important;
}

.content-section .section-header p,
.full-leaderboard-head p,
.full-leaderboard-head span,
.team-profile-title-block p {
  color: var(--ui-shell-muted) !important;
}

/* The season masthead is a dark hero, so its display title carries the event accent. */
.last-week-callout h2 {
  color: var(--ui-accent) !important;
}

.last-week-callout p {
  color: var(--ui-shell-muted) !important;
}

/* Secondary controls on dark panels need a stronger idle state than body muted text. */
.leaderboard-mode-button:not([aria-pressed="true"]),
.leaderboard-view-control > span,
.leaderboard-division-filter > span,
.overview-table-filter > span,
.schedule-filter-row label > span,
.upcoming-date-heading em,
.upcoming-time-heading em {
  color: var(--ui-shell-muted) !important;
}

/* Breadcrumbs use the event yellow and stay legible on charcoal. */
.content-section .breadcrumbs {
  color: var(--ui-shell-muted) !important;
}

.content-section .breadcrumbs a {
  color: var(--ui-accent) !important;
}

.content-section .breadcrumbs a:hover,
.content-section .breadcrumbs a:focus-visible {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-color: var(--ui-accent);
  text-underline-offset: 4px;
}

.content-section .breadcrumbs span[aria-current="page"] {
  color: var(--ui-shell-text) !important;
}

.content-section .breadcrumb-divider {
  color: #898981 !important;
}

/* Dense data views always use dark ink on white/gray cells. */
.box-table,
.profile-session-table,
.full-leaderboard-table,
.team-roster-table,
.team-stats-table,
.boys-pool-table,
.history-table,
.home-pool-section table {
  background: var(--ui-table) !important;
  color: var(--ui-table-text) !important;
}

.box-table th,
.profile-session-table th,
.full-leaderboard-table th,
.team-roster-table th,
.team-stats-table th,
.boys-pool-table th,
.history-table th,
.home-pool-section th {
  border-color: var(--ui-table-line) !important;
  background: var(--ui-table-head) !important;
  color: var(--ui-table-text) !important;
  font-weight: 400 !important;
}

.box-table td,
.profile-session-table td,
.full-leaderboard-table td,
.team-roster-table td,
.team-stats-table td,
.boys-pool-table td,
.history-table td,
.home-pool-section td {
  border-color: var(--ui-table-line) !important;
  background: var(--ui-table) !important;
  color: var(--ui-table-text) !important;
}

.box-table tbody tr:nth-child(even) td,
.profile-session-table tbody tr:nth-child(even) td,
.full-leaderboard-table tbody tr:nth-child(even) td,
.team-roster-table tbody tr:nth-child(even) td,
.team-stats-table tbody tr:nth-child(even) td,
.boys-pool-table tbody tr:nth-child(even) td,
.history-table tbody tr:nth-child(even) td,
.home-pool-section tbody tr:nth-child(even) td {
  background: var(--ui-table-alt) !important;
}

.box-table tbody tr:hover td,
.profile-session-table tbody tr:hover td,
.full-leaderboard-table tbody tr:hover td,
.team-roster-table tbody tr:hover td,
.team-stats-table tbody tr:hover td,
.boys-pool-table tbody tr:hover td,
.history-table tbody tr:hover td,
.home-pool-section tbody tr:hover td {
  background: #ecece7 !important;
}

/* Sticky identity cells remain distinct without becoming a dark sub-table. */
.box-table th:first-child,
.profile-session-table th:first-child,
.profile-session-table th:nth-child(2),
.full-leaderboard-table th.player-column,
.team-roster-table th:first-child,
.team-stats-table th.team-name-column,
.history-table th:first-child {
  background: var(--ui-table-head) !important;
  color: var(--ui-table-text) !important;
}

.box-table td:first-child,
.profile-session-table td:first-child,
.profile-session-table td:nth-child(2),
.full-leaderboard-table td.player-column,
.team-roster-table td:first-child,
.team-stats-table td.team-name-column,
.history-table td:first-child {
  background: var(--ui-table-sticky) !important;
  color: var(--ui-table-text) !important;
}

.box-table tbody tr:nth-child(even) td:first-child,
.profile-session-table tbody tr:nth-child(even) td:first-child,
.profile-session-table tbody tr:nth-child(even) td:nth-child(2),
.full-leaderboard-table tbody tr:nth-child(even) td.player-column,
.team-roster-table tbody tr:nth-child(even) td:first-child,
.team-stats-table tbody tr:nth-child(even) td.team-name-column,
.history-table tbody tr:nth-child(even) td:first-child {
  background: var(--ui-table-sticky-alt) !important;
}

.box-table tbody tr:hover td:first-child,
.profile-session-table tbody tr:hover td:first-child,
.profile-session-table tbody tr:hover td:nth-child(2),
.full-leaderboard-table tbody tr:hover td.player-column,
.team-roster-table tbody tr:hover td:first-child,
.team-stats-table tbody tr:hover td.team-name-column,
.history-table tbody tr:hover td:first-child {
  background: #ddddD7 !important;
}

.team-total-row td,
.team-total-row td:first-child,
.profile-summary-row td,
.profile-summary-row td:first-child {
  background: var(--ui-table-total) !important;
  color: var(--ui-table-text) !important;
}

/* Interactive text inside light data cells must follow the cell, not the shell. */
.box-table :is(a, strong, button),
.profile-session-table :is(a, strong, button),
.full-leaderboard-table :is(a, strong, button),
.team-roster-table :is(a, strong, button),
.team-stats-table :is(a, strong, button),
.boys-pool-table :is(a, strong, button),
.history-table :is(a, strong, button),
.home-pool-section table :is(a, strong, button) {
  color: var(--ui-table-text) !important;
}

/* Metric-ring centers are dark even though the surrounding history cell is light. */
.history-table .history-metric-ring strong {
  position: relative;
  z-index: 1;
  color: #111111 !important;
  font-weight: 700 !important;
}

.history-table .history-metric-ring {
  position: relative;
  --ring-color: #111111;
  background: conic-gradient(var(--ring-color) var(--metric-fill), #c7c7c1 0);
}

.history-table .history-metric-ring::before {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--history-ring-center, var(--ui-table));
  content: "";
}

.history-table tbody tr:nth-child(even) {
  --history-ring-center: var(--ui-table-alt);
}

.history-table tbody tr:hover {
  --history-ring-center: #ecece7;
}

.history-table .history-metric-ring.tier-bronze {
  --ring-color: #b87333;
}

.history-table .history-metric-ring.tier-silver {
  --ring-color: #c4c9cf;
}

.history-table .history-metric-ring.tier-gold {
  --ring-color: #d5a21b;
}

.metric-ring-card.tier-none {
  --ring-color: #111111;
}

.metric-ring-card.tier-bronze,
.cram-tier-value.tier-bronze {
  --ring-color: #b87333;
}

.metric-ring-card.tier-silver,
.cram-tier-value.tier-silver {
  --ring-color: #aeb4bb;
}

.metric-ring-card.tier-gold,
.cram-tier-value.tier-gold {
  --ring-color: #d5a21b;
}

.cram-tier-value {
  display: inline-flex;
  min-width: 42px;
  justify-content: center;
  border-bottom: 4px solid var(--ring-color, #111111);
  color: #111111 !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.25;
}

.history-table .history-metric-ring.tone-green {
  --ring-color: #37a66f;
}

.history-table .history-metric-ring.tone-blue {
  --ring-color: #45aeea;
}

.history-table .history-metric-ring.tone-orange {
  --ring-color: #e9902f;
}

.history-table .history-metric-ring.tone-red {
  --ring-color: #cf4b3d;
}

.history-table .history-metric-ring.tone-violet {
  --ring-color: #936de5;
}

.box-table td a:hover,
.profile-session-table td a:hover,
.full-leaderboard-table td a:hover,
.team-roster-table td a:hover,
.team-stats-table td a:hover,
.boys-pool-table td a:hover,
.history-table td a:hover,
.home-pool-section td a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profile-score-link,
.profile-game-score-link {
  color: var(--ui-table-text) !important;
  text-decoration-color: var(--ui-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.profile-score-link strong,
.profile-game-score-link .game-log-score,
.profile-game-score-link .game-log-score.result-win,
.profile-game-score-link .game-log-score.result-loss {
  color: var(--ui-table-text) !important;
}

.profile-score-link:hover,
.profile-score-link:focus-visible,
.profile-game-score-link:hover,
.profile-game-score-link:focus-visible {
  color: var(--ui-table-text) !important;
  text-decoration: underline;
  text-decoration-color: var(--ui-accent);
}

/* Rank labels live in white cards, despite being nested inside a dark section. */
.overview-leader-category-card .overview-leader-rank,
.home-leaderboard-card .leaderboard-rank,
.nba-leaderboard-card .leaderboard-rank {
  color: var(--ui-table-muted) !important;
}

.team-roster-sort-button:hover,
.team-roster-sort-button[aria-pressed="true"],
.full-leaderboard-sort-button:hover,
.full-leaderboard-sort-button[aria-pressed="true"],
.team-stats-sort-button:hover,
.team-stats-sort-button[aria-pressed="true"] {
  color: var(--ui-table-text) !important;
}

.team-roster-sort-button,
.full-leaderboard-sort-button,
.team-stats-sort-button {
  font-weight: 400 !important;
}

/* The summary rail is an event accent, not another black band. */
.full-leaderboard-panel {
  padding: 0 !important;
}

.full-leaderboard-head {
  align-items: center;
  margin: 0;
  padding: 12px 14px;
  background: var(--ui-accent) !important;
  color: #111111 !important;
}

/*
  Keep the summary rail attached to the visible scroll viewport. The table can
  continue underneath it horizontally, but the section title and row count do
  not disappear with off-screen stat columns.
*/
.full-leaderboard-panel > .full-leaderboard-head {
  position: sticky;
  left: 0;
  z-index: 12;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

.full-leaderboard-head :is(h3, p, span) {
  color: #111111 !important;
}

.full-leaderboard-head :is(p, span) {
  font-weight: 700;
}

/* Let the identity column shrink-wrap its longest visible name. */
.full-leaderboard-table:not(.team-stats-table) {
  table-layout: auto;
}

.full-leaderboard-table th.player-column,
.full-leaderboard-table td.player-column {
  width: 1% !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap;
}

/*
  The legacy 2360px team table scaled every declared column proportionally,
  which made the frozen Team cell hundreds of pixels wider than its content.
  These widths add up to the table canvas, keeping the identity column compact
  and leaving the extra room where it is useful: the scannable stat columns.
*/
.team-stats-table .rank-column {
  width: 48px !important;
}

.team-stats-table .team-name-column {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

.team-stats-table .team-record-column {
  width: 100px !important;
}

.team-stats-table .stat-column {
  width: 83px !important;
}

/* Stat-free team/player directories shown while public Cerebro surfaces are off. */
.entity-directory-search {
  display: grid;
  width: min(100%, 420px);
  gap: 6px;
  margin: 0 0 18px;
  color: var(--ui-shell-text);
  font-weight: 700;
}

.entity-directory-search input {
  min-height: 46px;
  border: 1px solid var(--ui-table-line);
  border-radius: 0;
  padding: 0 14px;
  background: var(--ui-table);
  color: var(--ui-table-text);
  font: 700 16px Helvetica, Arial, sans-serif;
}

.entity-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  border: 1px solid var(--ui-shell-line);
  background: var(--ui-shell-line);
}

.entity-directory-grid > .empty-state,
.entity-directory-grid > .empty-state-loading {
  grid-column: 1 / -1;
}

.entity-directory-link {
  display: grid;
  align-content: center;
  min-height: 78px;
  gap: 5px;
  padding: 14px 16px;
  background: var(--ui-table);
  color: var(--ui-table-text) !important;
  text-decoration: none;
}

.entity-directory-link:hover,
.entity-directory-link:focus-visible {
  background: var(--ui-table-alt);
  outline: 2px solid var(--ui-accent);
  outline-offset: -2px;
}

.entity-directory-link strong {
  color: var(--ui-table-text);
  font-size: 17px;
}

.entity-directory-link span {
  color: var(--ui-table-muted);
  font-size: 13px;
}

/* Event yellow is reserved for dark title rails and primary box-score actions. */
.boys-pool-card h3,
.home-pool-section h5,
.overview-leader-category-card h4,
.box-team-title,
.profile-session-heading {
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent) !important;
  color: #111111 !important;
}

.boys-pool-card h3 *,
.home-pool-section h5 *,
.overview-leader-category-card h4 *,
.box-team-title *,
.profile-session-heading * {
  color: #111111 !important;
}

.box-link,
.upcoming-box-link,
.home-box-link {
  border-color: var(--ui-accent) !important;
  border-radius: 0 !important;
  background: var(--ui-accent) !important;
  color: #111111 !important;
}

.box-link:hover,
.upcoming-box-link:hover,
.home-box-link:hover {
  border-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
}

/* Completed-game box scores use a dark treatment so live actions stay visually distinct. */
a.primary-action.completed-box-link,
a.upcoming-box-link.completed-box-link,
a.home-box-link.completed-box-link,
a.completed-box-link:visited {
  border-color: var(--ui-accent) !important;
  background: #111111 !important;
  color: var(--ui-accent) !important;
}

a.primary-action.completed-box-link:hover,
a.upcoming-box-link.completed-box-link:hover,
a.home-box-link.completed-box-link:hover,
a.completed-box-link:focus-visible {
  border-color: var(--ui-accent) !important;
  background: #242420 !important;
  color: var(--ui-accent) !important;
}

input,
select,
.overview-search-filter input,
.team-stats-search-filter input,
.leaderboard-player-search-filter input,
.schedule-filter-row input {
  border-radius: 0 !important;
}

.detail-loading-screen {
  display: grid;
  min-height: clamp(460px, 72vh, 760px);
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.detail-loading-screen h2,
.detail-loading-screen p {
  margin: 0;
}

.detail-loading-spinner {
  width: 58px;
  height: 58px;
  border: 6px solid #55554f;
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: detail-loading-spin .8s linear infinite;
}

@keyframes detail-loading-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Table title bars and controls retain the restrained event treatment. */
.box-team-title,
.profile-session-heading,
.home-pool-section h5 {
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent) !important;
  color: #111111 !important;
}

.box-team-title :is(h3, a, span, strong, em),
.profile-session-heading :is(span, strong, em),
.home-pool-section h5 {
  color: #111111 !important;
}

.box-team-title h3 {
  min-width: 0;
  margin: 0;
  font-size: clamp(36px, 3vw, 54px);
  line-height: 1;
}

@media (max-width: 720px) {
  .box-team-title h3 {
    font-size: 28px;
  }
}

.overview-leader-category-card h4,
.overview-leader-category-card h4 span,
.overview-leader-category-card h4 b,
.box-team-title h3,
.box-team-title h3 a,
.box-team-title span,
.box-team-title strong,
.box-team-title em {
  color: #111111 !important;
}

.print-box-button,
.print-box-button:hover {
  border-color: #ffffff !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #111111 !important;
}

.overview-full-link.overview-full-link-accent,
.overview-full-link.overview-full-link-accent:hover {
  border-color: var(--ui-accent) !important;
  border-radius: 0 !important;
  background: var(--ui-accent) !important;
  color: #111111 !important;
}

.overview-full-link.overview-full-link-accent:hover {
  filter: brightness(.94);
}

.empty-state:not(.empty-state-loading) {
  border-color: #55554f;
  background: var(--ui-shell-raised);
  color: var(--ui-shell-muted);
}

:is(a, button, input, select):focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 3px;
}

/* Live games use the event accent consistently across every game surface. */
.gdp-live-stats-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid var(--ui-accent) !important;
  border-radius: 0 !important;
  padding: 7px 12px;
  background: var(--ui-accent) !important;
  color: #111111 !important;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
}

.gdp-live-stats-link:hover,
.gdp-live-stats-link:focus-visible {
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: #111111 !important;
}

.universal-age-bar .age-toggle-buttons button[aria-pressed="true"],
.universal-age-bar .age-toggle-buttons button[aria-pressed="true"]:hover {
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent) !important;
  color: #111111 !important;
}

.currently-live-section {
  padding: 20px !important;
  border: 1px solid var(--ui-shell-line) !important;
  background: var(--ui-shell) !important;
  color: var(--ui-shell-text) !important;
}

.currently-live-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.currently-live-head h2 {
  margin: 0;
  color: var(--ui-accent) !important;
  font-family: Anton, Impact, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.currently-live-head span,
.currently-live-empty {
  color: var(--ui-shell-muted) !important;
  font-weight: 700;
}

.currently-live-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.currently-live-rail.is-upcoming {
  display: flex;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-color: var(--ui-accent) var(--ui-shell-raised);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.currently-live-rail.is-upcoming::-webkit-scrollbar {
  height: 8px;
}

.currently-live-rail.is-upcoming::-webkit-scrollbar-track {
  background: var(--ui-shell-raised);
}

.currently-live-rail.is-upcoming::-webkit-scrollbar-thumb {
  border: 1px solid var(--ui-shell-raised);
  background: var(--ui-accent);
}

.currently-live-rail.is-upcoming .currently-live-card {
  flex: 0 0 clamp(250px, 24vw, 320px);
  scroll-snap-align: start;
}

.currently-live-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  gap: 10px;
  border: 1px solid var(--ui-shell-line);
  padding: 14px;
  background: var(--ui-shell-raised);
  color: var(--ui-shell-text);
}

.currently-live-card-kicker,
.currently-live-teams > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.currently-live-card-kicker span {
  color: var(--ui-accent);
  font-weight: 800;
  text-transform: uppercase;
}

.gdp-live-game-state {
  color: var(--ui-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.currently-live-teams {
  display: grid;
  gap: 7px;
  font-size: 16px;
  font-weight: 800;
}

.gdp-live-score {
  --gdp-score-color: var(--ui-shell-text);
  display: inline-grid;
  min-width: 2ch;
  min-height: 1.45em;
  place-items: center;
  padding: 0 3px;
  color: var(--gdp-score-color);
  font-family: Anton, Impact, sans-serif;
  font-size: 1.25em;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1;
  transform-origin: center;
}

.gdp-live-score[hidden] {
  display: none;
}

.gdp-live-score.is-score-up {
  animation: gdp-score-up 1.25s ease-out;
}

.gdp-live-score.is-score-down {
  animation: gdp-score-down .85s ease-out;
}

@keyframes gdp-score-up {
  0% {
    background: var(--ui-accent);
    color: #0a0a0a;
    transform: translateY(7px) scale(.84);
  }
  35% {
    background: var(--ui-accent);
    color: #0a0a0a;
    transform: translateY(0) scale(1.13);
  }
  100% {
    background: transparent;
    color: var(--gdp-score-color);
    transform: none;
  }
}

@keyframes gdp-score-down {
  0% {
    opacity: .45;
    transform: translateY(-5px) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .all-live-score-card.is-close-game,
  .gdp-live-score.is-score-up,
  .gdp-live-score.is-score-down {
    animation: none;
  }
}

.upcoming-game-card.is-live {
  border-color: var(--ui-accent);
}

.upcoming-live-game-state {
  color: #111111 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.upcoming-game-card.is-live .upcoming-game-time em {
  width: fit-content;
  padding: 2px 4px;
  background: var(--ui-accent);
  color: #0a0a0a;
}

.upcoming-game-card .gdp-live-score {
  --gdp-score-color: #111111;
  color: var(--gdp-score-color);
}

.all-live-page {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 24px;
  background: #1b1c19;
  color: #f7f7f4;
}

.all-live-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #4a4b45;
  padding: 12px 0 26px;
}

.all-live-hero .eyebrow,
.all-live-event-head span,
.all-live-card-head span {
  color: var(--ui-accent) !important;
}

.all-live-hero h1 {
  margin: 6px 0 8px;
  color: #ffffff;
  font-family: Anton, Impact, sans-serif;
  font-size: 58px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: .95;
  text-transform: uppercase;
}

.all-live-hero p {
  max-width: 680px;
  margin: 0;
  color: #c8c8c2 !important;
  font-size: 16px;
}

.all-live-hero > strong {
  flex: 0 0 auto;
  padding: 10px 12px;
  background: var(--ui-accent);
  color: #0a0a0a;
  font-size: 14px;
  text-transform: uppercase;
}

.all-live-dashboard {
  display: grid;
  gap: 34px;
  padding-top: 28px;
}

.all-live-event-group {
  display: grid;
  gap: 26px;
}

.all-live-event-group + .all-live-event-group {
  border-top: 2px solid #5a5b54;
  padding-top: 34px;
}

.all-live-event-head,
.all-live-division-head,
.all-live-card-head,
.all-live-card-location {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.all-live-event-head span,
.all-live-card-head span {
  display: block;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.all-live-event-head h2,
.all-live-division-head h3 {
  margin: 0;
  font-family: Anton, Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.all-live-event-head h2 {
  margin-top: 3px;
  color: #ffffff;
  font-size: 38px;
}

.all-live-event-head > strong,
.all-live-division-head span {
  color: #c8c8c2;
  font-size: 13px;
  text-transform: uppercase;
}

.all-live-division-group {
  display: grid;
  gap: 14px;
}

.all-live-division-head {
  border-bottom: 1px solid #44453f;
  padding-bottom: 8px;
}

.all-live-division-head h3 {
  color: var(--ui-accent);
  font-size: 25px;
}

.all-live-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.all-live-score-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 16px;
  min-width: 0;
  min-height: 230px;
  border: 1px solid #4a4b45;
  padding: 18px;
  background: #10110f;
  color: #f7f7f4;
}

.all-live-score-card.is-close-game {
  border-color: #ff334d;
  background: #16090b;
  animation: all-live-close-game-aura 1.4s ease-in-out infinite;
  isolation: isolate;
}

.all-live-close-game-alert {
  display: inline-block;
  min-width: 118px;
  margin-bottom: 7px;
  border: 2px solid #ffb000;
  padding: 5px 12px 4px;
  background: #e51d38;
  box-shadow: 0 0 16px rgba(255, 48, 48, .7);
  color: #fff;
  font-family: "Anton", Impact, sans-serif;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.all-live-close-game-alert[hidden] {
  display: none;
}

@keyframes all-live-close-game-aura {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(255, 51, 77, .65), 0 0 16px rgba(255, 51, 77, .65), 0 -6px 24px rgba(255, 176, 0, .28);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(255, 51, 77, .95), 0 0 34px rgba(255, 51, 77, .95), 0 -12px 42px rgba(255, 176, 0, .52);
  }
}

.all-live-score-card.is-featured {
  min-height: 280px;
  border: 2px solid var(--ui-accent);
  padding: 24px;
  background: #070807;
}

.all-live-card-head {
  align-items: baseline;
}

.all-live-card-head > div {
  min-width: 0;
}

.all-live-card-head em {
  display: block;
  margin-top: 3px;
  color: #a8a8a2;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.all-live-card-head .gdp-live-game-state {
  color: var(--ui-accent);
  font-size: 18px;
}

.all-live-card-teams {
  display: grid;
  align-content: center;
  gap: 14px;
}

.all-live-card-teams > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.all-live-card-teams span {
  overflow: hidden;
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all-live-card-teams em {
  color: #a8a8a2;
  font-size: .72em;
  font-style: normal;
}

.all-live-score-card .gdp-live-score {
  --gdp-score-color: #ffffff;
  color: var(--gdp-score-color);
  font-size: 34px;
}

.all-live-score-card.is-featured .all-live-card-teams span {
  font-size: 27px;
}

.all-live-score-card.is-featured .gdp-live-score {
  font-size: 54px;
}

.all-live-card-location {
  border-top: 1px solid #3e3f39;
  padding-top: 12px;
  color: #c8c8c2;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.all-live-card-location strong {
  color: #ffffff;
}

.all-live-top-performer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-top: 1px solid #3e3f39;
  padding-top: 14px;
}

.all-live-top-performer[hidden] {
  display: none;
}

.all-live-top-performer-copy {
  min-width: 0;
}

.all-live-top-performer-copy span,
.all-live-top-performer-copy strong,
.all-live-top-performer-copy small {
  display: block;
}

.all-live-top-performer-copy span {
  margin-bottom: 3px;
  color: var(--ui-accent);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.all-live-top-performer-copy strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all-live-top-performer-copy small {
  overflow: hidden;
  margin-top: 2px;
  color: #a8a8a2;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all-live-top-performer-stats {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.all-live-top-performer-stats span {
  display: grid;
  justify-items: center;
  min-width: 28px;
}

.all-live-top-performer-stats b {
  color: #ffffff;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.all-live-top-performer-stats em {
  margin-top: 4px;
  color: #a8a8a2;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.all-live-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.all-live-card-actions .gdp-live-stats-link,
.all-live-card-actions .peach-jam-livestream-link {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  border-radius: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.all-live-card-actions .peach-jam-livestream-link {
  border-color: var(--ui-accent);
  background: transparent;
  color: var(--ui-accent);
}

.all-live-dashboard .empty-state,
.all-live-dashboard .loading-empty-state {
  min-height: 280px;
  border: 1px solid #44453f;
  background: #10110f;
  color: #ffffff;
}

.all-live-upcoming-strip {
  display: none;
}

.all-live-leader-ticker {
  position: relative;
  min-height: 282px;
  margin-top: 16px;
  border-top: 3px solid var(--ui-accent);
  background: #10110f;
  color: #ffffff;
}

.all-live-leader-ticker-viewport {
  position: relative;
  min-height: 282px;
  overflow: hidden;
}

.all-live-leader-ticker-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.all-live-leader-ticker-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.all-live-leader-ticker-slide > header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-transform: uppercase;
}

.all-live-leader-ticker-slide > header span,
.all-live-leader-ticker-slide > header em {
  color: var(--ui-accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.all-live-leader-ticker-slide > header strong {
  font-family: Anton, Impact, sans-serif;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0;
}

.all-live-leader-ticker-categories {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  overflow-x: auto;
  scrollbar-color: var(--ui-accent) #22231f;
}

.all-live-leader-ticker-category {
  min-width: 205px;
  border-left: 1px solid #454640;
  padding-left: 10px;
}

.all-live-leader-ticker-category h3 {
  margin: 0 0 5px;
  color: var(--ui-accent);
  font-family: Anton, Impact, sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
}

.all-live-leader-ticker-category ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.all-live-leader-ticker-category li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border-left: 1px solid #454640;
  padding-left: 8px;
  font-size: 12px;
}

.all-live-leader-ticker-category li > b {
  color: #858680;
  font-size: 9px;
}

.all-live-leader-ticker-category li > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  overflow: hidden;
}

.all-live-leader-ticker-category li strong,
.all-live-leader-ticker-category li em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.all-live-leader-ticker-category li strong {
  color: #ffffff;
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.05;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.all-live-leader-ticker-category li em {
  color: #a8a9a3;
  font-style: normal;
  white-space: nowrap;
}

.all-live-leader-ticker-category li data {
  color: var(--ui-accent);
  font-size: 12px;
  font-weight: 900;
}

.all-live-leader-ticker-category li.is-empty {
  grid-template-columns: 1fr;
  color: #a8a9a3;
}

.all-live-leader-ticker-status {
  position: absolute;
  right: 12px;
  bottom: 8px;
  z-index: 2;
  margin: 0;
  color: #a8a9a3;
  font-size: 10px;
}

@media (max-width: 720px) {
  .all-live-page {
    padding: 16px;
  }

  .all-live-hero {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 20px;
  }

  .all-live-hero h1 {
    font-size: 42px;
  }

  .all-live-score-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .all-live-score-card,
  .all-live-score-card.is-featured {
    min-height: 230px;
    padding: 16px;
  }

  .all-live-score-card.is-featured .all-live-card-teams span {
    font-size: 22px;
  }

  .all-live-score-card.is-featured .gdp-live-score {
    font-size: 42px;
  }

  .all-live-card-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .all-live-top-performer-stats {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }
}

@media (min-width: 721px) {
  body[data-route="live-scores"],
  body[data-route="live-scores"] .app-shell,
  body[data-route="live-scores"] main {
    background: #d7d8d4;
  }

  .all-live-page {
    width: 100%;
    min-height: calc(100vh - 69px);
    margin: 0;
    padding: 10px 18px 14px;
    background: #d7d8d4;
    color: #111111;
  }

  .all-live-hero {
    align-items: center;
    gap: 18px;
    border-bottom-color: #9a9b96;
    padding: 0 0 8px;
  }

  .all-live-hero .eyebrow {
    color: #111111 !important;
    font-size: 10px;
  }

  .all-live-hero h1 {
    margin: 1px 0 0;
    color: #111111;
    font-size: 34px;
    line-height: 1;
  }

  .all-live-hero p {
    display: none;
  }

  .all-live-hero > strong {
    padding: 8px 10px;
    font-size: 12px;
  }

  .all-live-dashboard {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    padding-top: 8px;
  }

  .all-live-event-group,
  .all-live-division-group,
  .all-live-score-grid {
    display: contents;
  }

  .all-live-event-head,
  .all-live-division-head {
    display: none;
  }

  .all-live-score-card,
  .all-live-score-card.is-featured {
    flex: 0 1 calc((100% - 32px) / 5);
    grid-template-rows: auto auto auto auto;
    width: calc((100% - 32px) / 5);
    gap: 4px;
    min-height: 0;
    padding: 8px;
  }

  .all-live-close-game-alert {
    min-width: 82px;
    margin-bottom: 4px;
    border-width: 1px;
    padding: 3px 7px 2px;
    font-size: 10px;
  }

  .all-live-card-head .gdp-live-game-state {
    font-size: 12px;
  }

  .all-live-card-teams {
    gap: 5px;
  }

  .all-live-card-teams > div {
    gap: 10px;
  }

  .all-live-card-teams span,
  .all-live-score-card.is-featured .all-live-card-teams span {
    font-size: 13px;
  }

  .all-live-score-card .gdp-live-score,
  .all-live-score-card.is-featured .gdp-live-score {
    font-size: 25px;
  }

  .all-live-card-location {
    padding-top: 4px;
    font-size: 9px;
  }

  .all-live-top-performer {
    gap: 6px;
    padding-top: 4px;
  }

  .all-live-top-performer-copy span {
    font-size: 8px;
  }

  .all-live-top-performer-copy strong {
    font-size: 11px;
  }

  .all-live-top-performer-copy small {
    font-size: 9px;
  }

  .all-live-top-performer-stats {
    gap: 5px;
  }

  .all-live-top-performer-stats span {
    min-width: 22px;
  }

  .all-live-top-performer-stats b {
    font-size: 13px;
  }

  .all-live-top-performer-stats em {
    font-size: 8px;
  }

  .all-live-card-actions .gdp-live-stats-link,
  .all-live-card-actions .peach-jam-livestream-link {
    min-height: 28px;
    font-size: 10px;
  }

  .all-live-dashboard .empty-state,
  .all-live-dashboard .loading-empty-state {
    flex: 1 1 100%;
  }

  .all-live-upcoming-strip {
    display: grid;
    gap: 7px;
    margin-top: 10px;
    border-top: 1px solid #9a9b96;
    padding-top: 8px;
    color: #111111;
  }

  .all-live-upcoming-strip > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }

  .all-live-upcoming-strip h2 {
    margin: 0;
    color: #111111;
    font-family: Anton, Impact, sans-serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .all-live-upcoming-strip > header span {
    color: #454641;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .all-live-upcoming-viewport {
    overflow: hidden;
  }

  .all-live-upcoming-track {
    display: flex;
    width: max-content;
    gap: 8px;
    animation: all-live-upcoming-scroll var(--live-upcoming-duration, 60s) linear infinite;
    will-change: transform;
  }

  .all-live-upcoming-group {
    display: flex;
    gap: 8px;
  }

  .all-live-upcoming-card {
    display: grid;
    gap: 4px;
    width: 250px;
    border-left: 4px solid var(--ui-accent);
    padding: 8px 10px;
    background: #f5f5f2;
    color: #111111;
  }

  .all-live-upcoming-card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .all-live-upcoming-card > div span,
  .all-live-upcoming-card > div strong {
    color: #111111;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .all-live-upcoming-card p {
    overflow: hidden;
    margin: 0;
    color: #111111 !important;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .all-live-upcoming-card p em {
    color: #5d5e58;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
  }

  .all-live-upcoming-card small {
    overflow: hidden;
    color: #5d5e58;
    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .all-live-leader-ticker {
    position: relative;
    min-height: 104px;
    height: 104px;
    margin: 10px 0 0;
    border-top-width: 2px;
  }

  .all-live-leader-ticker-viewport {
    min-height: 102px;
    height: 102px;
  }

  .all-live-leader-ticker-slide {
    grid-template-columns: 136px minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
    padding: 8px 14px;
  }

  .all-live-leader-ticker-slide > header {
    align-content: center;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    border-right: 1px solid #454640;
  }

  .all-live-leader-ticker-slide > header strong {
    font-size: 24px;
    line-height: 1;
  }

  .all-live-leader-ticker-categories {
    overflow: hidden;
  }

  .all-live-leader-ticker-category {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    padding-left: 8px;
  }

  .all-live-leader-ticker-category h3 {
    margin: 0;
    font-size: 22px;
  }

  .all-live-leader-ticker-category ol {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  .all-live-leader-ticker-category li {
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 5px;
    padding-left: 7px;
    font-size: 11px;
    line-height: 1.05;
  }

  .all-live-leader-ticker-category li > b {
    font-size: 9px;
  }

  .all-live-leader-ticker-category li strong {
    font-size: 13px;
  }

  .all-live-leader-ticker-category li em {
    font-size: 9px;
  }

  .all-live-leader-ticker-category li data {
    font-size: 17px;
  }
}

@media (min-width: 721px) and (max-width: 1279px) {
  .all-live-score-card,
  .all-live-score-card.is-featured {
    flex-basis: calc((100% - 16px) / 3);
    width: calc((100% - 16px) / 3);
  }
}

@keyframes all-live-upcoming-scroll {
  to {
    transform: translateX(calc(-50% - 4px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .all-live-upcoming-viewport {
    overflow-x: auto;
  }

  .all-live-upcoming-track {
    animation: none;
  }

  .all-live-upcoming-group[aria-hidden="true"] {
    display: none;
  }

  .all-live-leader-ticker-slide {
    display: none;
    transition: none;
  }

  .all-live-leader-ticker-slide:first-child {
    display: grid;
    opacity: 1;
    transform: none;
  }
}

.currently-live-teams em,
.home-away-marker {
  color: inherit !important;
  font-size: .8em;
  font-style: normal;
  font-weight: 700;
}

.currently-live-card p {
  margin: 0;
  color: var(--ui-shell-muted) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.currently-live-card .gdp-live-stats-link {
  width: 100%;
}

.currently-live-actions {
  display: grid;
  gap: 8px;
}

.currently-live-actions .gdp-live-stats-link,
.currently-live-actions .peach-jam-livestream-link {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.peach-jam-livestream-link {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-accent);
  padding: 8px 12px;
  background: transparent;
  color: var(--ui-accent) !important;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}

.peach-jam-livestream-link:hover,
.peach-jam-livestream-link:focus-visible {
  background: var(--ui-accent);
  color: #111 !important;
}

.nba-tv-livestream-link {
  gap: 8px;
  min-height: 38px;
  background: #ffffff;
  color: #111111 !important;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
}

.nba-tv-livestream-link img {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  object-fit: contain;
}

.nba-tv-livestream-link:hover,
.nba-tv-livestream-link:focus-visible {
  background: var(--ui-accent);
}

.currently-live-actions .peach-jam-livestream-link {
  width: 100%;
}

.upcoming-date-heading-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--ui-shell-line);
  margin-bottom: 10px;
}

.upcoming-date-heading-row .upcoming-date-heading {
  flex: 1 1 auto;
  border-bottom: 0;
  margin-bottom: 0;
}

.upcoming-date-state {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid var(--ui-accent);
  margin-bottom: 8px;
  padding: 6px 10px;
  background: var(--ui-accent);
  color: #111;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.upcoming-date-state:hover,
.upcoming-date-state:focus-visible {
  background: #111;
  color: var(--ui-accent);
}

.upcoming-date-heading-row .peach-jam-livestream-link {
  flex: 0 0 auto;
  min-height: 34px;
  margin-bottom: 8px;
  padding: 6px 10px;
  font-size: 12px;
  text-transform: uppercase;
}

.team-upcoming-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.upcoming-game-meta .gdp-live-stats-link {
  margin-left: auto;
}

.upcoming-game-meta .nba-tv-livestream-link {
  min-height: 34px;
  padding-block: 3px;
}

.bracket-game > .gdp-live-stats-link {
  width: calc(100% - 20px);
  margin: 10px;
}

@media (max-width: 720px) {
  .currently-live-section {
    padding: 16px 0 16px 14px !important;
  }

  .currently-live-head {
    padding-right: 14px;
  }

  .currently-live-head h2 {
    font-size: 22px;
  }

  .currently-live-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 14px 6px 0;
    scrollbar-color: var(--ui-accent) var(--ui-shell-raised);
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .currently-live-rail::-webkit-scrollbar {
    height: 8px;
  }

  .currently-live-rail::-webkit-scrollbar-track {
    background: var(--ui-shell-raised);
  }

  .currently-live-rail::-webkit-scrollbar-thumb {
    border: 1px solid var(--ui-shell-raised);
    background: var(--ui-accent);
  }

  .currently-live-card {
    flex: 0 0 min(82vw, 320px);
    scroll-snap-align: start;
  }

  .upcoming-date-heading-row {
    gap: 8px;
  }

  .upcoming-date-heading-row .peach-jam-livestream-link {
    max-width: 112px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .upcoming-date-state {
    padding-inline: 8px;
    font-size: 11px;
  }

  .team-upcoming-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .upcoming-game-meta .gdp-live-stats-link {
    width: 100%;
    margin-left: 0;
  }

  .upcoming-game-meta .nba-tv-livestream-link {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}