/* GENERATED by frontend/scripts/ui-contract-css.mjs from the game's own
   component styles (ADR-0039). Do not edit: change the SCSS and rerun. */
/* src/app/shared/ui/event-icon/event-icon.scss */
app-event-icon {
  --ei-size: 1.25rem;
  --ei-yellow: #f2ea4b;
  --ei-red: #ef4b55;
  --ei-green: #3fd18b;
  --ei-ball: #f4f6f8;
  --ei-ink: #15191e;
  position: relative;
  display: inline-flex;
  flex: none;
  width: var(--ei-size);
  height: var(--ei-size);
  color: var(--text);
}

.ei__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ei__tag {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
}

.ei__ball {
  fill: var(--ei-ball);
}

.ei__patch {
  fill: var(--ei-ink);
}

.ei__seam {
  fill: none;
  stroke: var(--ei-ink);
  stroke-width: 1;
}

.ei__card {
  stroke: none;
}

.ei__card--yellow {
  fill: var(--ei-yellow);
}

.ei__card--red {
  fill: var(--ei-red);
}

.ei__card--front,
.ei__badge--front {
  stroke: var(--bg);
  stroke-width: 1.4;
}

.ei__badge {
  stroke: var(--bg);
  stroke-width: 1.2;
}

.ei__badge--green {
  fill: var(--ei-green);
}

.ei__badge--red {
  fill: var(--ei-red);
}

.ei__badge-mark {
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ei__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ei__fill {
  fill: currentColor;
}

/* src/app/features/moments/moments-timeline/moments-timeline.scss */
.tl {
  --tl-pill-w: 2.75rem;
  --tl-pill-h: 1.75rem;
  --tl-link: clamp(0.5rem, 3vw, 1.75rem);
  --tl-icon-gap: 0.5rem;
  display: grid;
  gap: var(--space-2);
}

.tl__title {
  margin: 0;
  font-size: 0.9375rem;
}

.tl__fold {
  justify-self: center;
}

.tl__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.tl__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tl-link) var(--tl-pill-w) var(--tl-link) minmax(0, 1fr);
  align-items: center;
  row-gap: var(--space-1);
  min-width: 0;
}

.tl__pill {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--tl-pill-w);
  height: var(--tl-pill-h);
  padding: 0 var(--space-1);
  justify-self: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text) 9%, var(--bg));
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.tl__pill--goal {
  background: var(--text);
  color: var(--bg);
}

.tl__pill--moment {
  background: transparent;
  border: 1px dashed var(--text-muted);
  color: var(--text-muted);
}

.tl__link {
  grid-row: 1;
  height: 1px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
}
[data-side=home] > .tl__link {
  grid-column: 2;
}
[data-side=away] > .tl__link {
  grid-column: 4;
}
[data-side=neutral] > .tl__link {
  display: none;
}

.tl__event {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--tl-icon-gap);
  min-width: 0;
  padding: var(--space-1) calc(var(--space-1) * 1.5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
[data-side=home] > .tl__event {
  grid-column: 1;
  justify-self: end;
  flex-direction: row-reverse;
  text-align: right;
  padding-right: 0;
}
[data-side=away] > .tl__event {
  grid-column: 5;
  justify-self: start;
  text-align: left;
  padding-left: 0;
}
[data-side=neutral] > .tl__event {
  grid-column: 1/-1;
  grid-row: 2;
  justify-self: center;
  text-align: center;
}
[data-source=card] > .tl__event {
  grid-row: 1;
}
[data-status=landed] > .tl__event {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
[data-status=missed] > .tl__event {
  border-color: color-mix(in srgb, var(--live) 50%, transparent);
  background: color-mix(in srgb, var(--live) 7%, transparent);
}
[data-status=mixed] > .tl__event {
  border-color: color-mix(in srgb, var(--text-muted) 50%, transparent);
}
[data-status=annulled] > .tl__event {
  border-style: dashed;
  border-color: var(--text-muted);
}
[data-side=home][data-status]:not([data-status=neutral]) > .tl__event {
  padding-right: calc(var(--space-1) * 1.5);
}
[data-side=away][data-status]:not([data-status=neutral]) > .tl__event {
  padding-left: calc(var(--space-1) * 1.5);
}

.tl__text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.tl__primary {
  color: var(--text);
  font-weight: 700;
  font-size: 0.875rem;
  overflow-wrap: break-word;
}

.tl__secondary {
  color: var(--text-muted);
  font-size: 0.8125rem;
  overflow-wrap: break-word;
}

[data-source=counter] > .tl__pill {
  min-width: 2.25rem;
  height: 1.375rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 6%, var(--bg));
}
[data-source=counter] > .tl__event {
  gap: calc(var(--tl-icon-gap) * 0.75);
  padding-top: 0;
  padding-bottom: 0;
}
[data-source=counter] .tl__icon {
  --ei-size: 0.9375rem;
  color: var(--text-muted);
}
[data-source=counter] .tl__primary {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
}
[data-source=counter][data-side=neutral] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--tl-icon-gap);
}
[data-source=counter][data-side=neutral] > .tl__event {
  padding-left: 0;
  padding-right: 0;
}
[data-source=counter][data-side=neutral] > .tl__outcomes {
  flex-basis: 100%;
}

.tl__running {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.tl__outcomes {
  grid-row: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
[data-side=home] > .tl__outcomes {
  grid-column: 1/3;
  justify-items: end;
  text-align: right;
}
[data-side=away] > .tl__outcomes {
  grid-column: 4/-1;
  justify-items: start;
  text-align: left;
}
[data-side=neutral] > .tl__outcomes {
  grid-column: 1/-1;
  grid-row: 3;
  justify-items: center;
  text-align: center;
}
[data-source=card] > .tl__outcomes {
  grid-row: 2;
}

.tl__outcome {
  display: grid;
  justify-items: inherit;
  gap: 2px;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.tl__chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-1);
  min-width: 0;
  padding: 1px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
[data-side=home] .tl__chip {
  justify-content: flex-end;
}
[data-outcome=landed] > .tl__chip {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
[data-outcome=missed] > .tl__chip {
  border-color: color-mix(in srgb, var(--live) 45%, transparent);
}
[data-outcome=annulled] > .tl__chip {
  border-style: dashed;
}

.tl__glyph {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-outcome=landed] .tl__glyph {
  color: var(--accent);
}
[data-outcome=missed] .tl__glyph {
  color: var(--live);
}
[data-outcome=annulled] .tl__glyph {
  color: var(--text-muted);
}

.tl__outcome-what {
  min-width: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.tl__outcome-kind {
  color: var(--text);
  font-weight: 600;
}

.tl__score {
  font-weight: 800;
  white-space: nowrap;
}
[data-outcome=landed] .tl__score {
  color: var(--accent);
}
[data-outcome=missed] .tl__score {
  color: var(--live);
}

.tl__was {
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.tl__mark {
  padding: 0 var(--space-1);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.tl__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text);
  font-size: 0.78rem;
}

[data-withdrawn] .tl__icon, .tl__withdrawn {
  opacity: 0.6;
}
[data-withdrawn] .tl__icon::after, .tl__withdrawn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--text) calc(50% - 1px), var(--text) calc(50% + 1px), transparent calc(50% + 1px));
}

.tl__withdrawn {
  --ei-size: 1rem;
}

[data-withdrawn] > .tl__pill {
  color: var(--text-muted);
  text-decoration: line-through;
}
[data-withdrawn] .tl__primary {
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: line-through;
}

.tl__phase {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
}
.tl__phase::before, .tl__phase::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.tl__phase-label,
.tl__phase-score {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tl__phase-label {
  color: var(--text);
}

.tl__phase-score {
  font-weight: 700;
}

.tl__coverage {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.tl__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.tl__loading {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.tl__skeleton-row > .tl__pill {
  background: transparent;
}

.tl__bar {
  display: inline-block;
  box-sizing: border-box;
  height: 1.3em;
  padding-block: 0.3em;
  vertical-align: top;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--bg-elev-2) 0%, color-mix(in srgb, var(--text-muted) 22%, var(--bg-elev-2)) 50%, var(--bg-elev-2) 100%) 0 0/200% 100%;
  background-clip: content-box;
  animation: tl-shimmer 1.4s ease-in-out infinite;
}

.tl__bar--minute {
  width: 100%;
  height: 100%;
  padding: 0;
}

.tl__bar--icon {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
}

.tl__bar--primary {
  width: 6.5rem;
  max-width: 100%;
}

.tl__bar--secondary {
  width: 4.5rem;
  max-width: 100%;
}

.tl--arrived > .tl__list {
  animation: tl-fade-in 0.2s ease-out;
}

@keyframes tl-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
@keyframes tl-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tl__bar,
  .tl--arrived > .tl__list {
    animation: none;
  }
}