/* Static silhouettes of the schedule. No invented match data or loading delay. */
.schedule-skeleton {
  --skeleton-fill: color-mix(in srgb, var(--muted) 15%, transparent);
  --skeleton-surface: color-mix(in srgb, var(--surface) 78%, transparent);
}

.skeleton-block {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 11px;
  border-radius: 4px;
  background: var(--skeleton-fill);
}

.skeleton-short { width: 46%; }
.skeleton-medium { width: 72%; }
.skeleton-stack { display: flex; min-width: 0; flex-direction: column; gap: 10px; }
.skeleton-rail {
  display: grid;
  grid-template-columns: 184px minmax(220px, 1fr) minmax(340px, .92fr);
  min-height: 120px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--skeleton-surface);
}
.skeleton-rail > div { justify-content: center; padding: 20px 22px; }
.skeleton-rail > div + div { border-left: 1px solid var(--border); }
.skeleton-time { height: 27px; width: 92%; }
.skeleton-track { height: 5px; margin: 6px 0; }
.skeleton-section-title { display: flex; align-items: center; min-height: 39px; margin: 0; }
.skeleton-section-title > span { width: 100px; height: 18px; }
.skeleton-group { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--skeleton-surface); }
.skeleton-group-title { display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 22px; border-bottom: 1px solid var(--border); }
.skeleton-group-title > span:first-child { width: 116px; height: 15px; }
.skeleton-group-title .skeleton-count { width: 26px; }
.skeleton-columns, .skeleton-row { display: grid; grid-template-columns: .7fr 1.55fr 1.35fr 1.35fr .9fr 1.35fr; align-items: center; gap: 24px; padding: 0 22px; }
.skeleton-columns { height: 44px; opacity: .65; background: var(--surface-subtle); }
.skeleton-columns > span { width: 52px; height: 9px; }
.skeleton-row { min-height: 64px; }
.skeleton-row + .skeleton-row { border-top: 1px solid var(--border); }
.skeleton-date { width: 48px; }
.skeleton-stage, .skeleton-venue { width: 70%; }
.skeleton-team { display: flex; align-items: center; min-width: 0; gap: 12px; }
.skeleton-team > span:not(.skeleton-logo) { width: 76px; }
.skeleton-home { justify-content: flex-end; }
.skeleton-logo { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; }
.skeleton-score { align-items: center; }
.skeleton-score > span { width: 40px; }
.skeleton-score > .skeleton-short { width: 30px; height: 9px; }

@media (max-width: 1199px) {
  .skeleton-rail { grid-template-columns: 166px minmax(180px, 1fr) minmax(260px, .92fr); }
  .skeleton-rail > div { padding: 20px 18px; }
}
@media (max-width: 1023px) {
  .skeleton-rail { grid-template-columns: 166px minmax(0, 1fr); }
  .skeleton-rail > .skeleton-next { grid-column: 1 / -1; min-height: 104px; border-left: 0; border-top: 1px solid var(--border); }
  .skeleton-next > span { max-width: 240px; }
  .skeleton-columns { display: none; }
  .skeleton-row { grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr); gap: 18px 12px; margin: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
  .skeleton-date { grid-area: 1 / 1; }
  .skeleton-stage { grid-area: 1 / 2; width: 100%; align-items: center; }
  .skeleton-venue { grid-area: 1 / 3; justify-self: end; align-items: flex-end; }
  .skeleton-home { grid-area: 2 / 1; }
  .skeleton-score { grid-area: 2 / 2; }
  .skeleton-away { grid-area: 2 / 3; }
}
@media (max-width: 639px) {
  .skeleton-rail { grid-template-columns: 128px minmax(0, 1fr); margin-bottom: 16px; }
  .skeleton-rail > div { padding: 16px 14px; }
  .skeleton-time { height: 24px; }
  .skeleton-section-title { min-height: 34px; margin: 0; }
  .skeleton-group-title { height: 46px; padding: 0 14px; }
  .skeleton-row { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); margin: 9px; padding: 12px; gap: 16px 10px; }
  .skeleton-team { gap: 7px; }
  .skeleton-team > span:not(.skeleton-logo) { width: 48px; }
  .skeleton-logo { width: 24px; height: 24px; flex-basis: 24px; }
  .skeleton-stage, .skeleton-venue { gap: 7px; }
}

.skeleton-unknown { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--border); border-radius: 8px; background: var(--skeleton-surface); }
.skeleton-unknown > span { max-width: 220px; }
.skeleton-subsection-title { display: flex; align-items: center; min-height: 28px; padding: 0 4px; }
.skeleton-subsection-title > span { width: 84px; height: 14px; }
.skeleton-race .skeleton-logo { display: none; }
.skeleton-race .skeleton-home { justify-content: flex-start; }