/* The curve marks a short ranking round; the recap shows actual list changes. */
.round-progress {
  height: 6px;
  margin: 2px 0 8px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
}
.round-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  border-radius: inherit;
  background: var(--olive);
  transition: transform 780ms cubic-bezier(.22, 1.25, .36, 1);
}
.round-recap {
  display: flex;
  flex-direction: column;
  min-height: min(610px, var(--question-height, 650px));
  padding: 24px 0 16px;
  touch-action: pan-x;
}
.round-recap-title {
  margin: 0 0 28px;
  max-width: 290px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.round-recap-list { list-style: none; margin: 0; padding: 0; }
.round-film {
  display: grid;
  grid-template-columns: 26px 44px minmax(0, 1fr) 48px;
  gap: 12px;
  align-items: center;
  position: relative;
  height: 84px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  transform: none;
  opacity: 1;
}
.rounds-host.is-moving .round-film {
  transition: transform 820ms cubic-bezier(.22, 1, .36, 1), opacity 400ms ease-out;
}
.rounds-host.is-settled .round-film { transition: none; }
.round-position { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.round-film-art { position: relative; width: 44px; height: 66px; overflow: hidden; border-radius: 4px; }
.round-film-art > .film-artwork { position: absolute; inset: 0; float: none; width: 100%; height: 100%; margin: 0; }
.round-film-art img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.round-film-info { min-width: 0; }
.round-film-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
}
.round-film-year { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 16px; }
.round-movement { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.round-movement.is-up, .round-movement.is-new { color: var(--olive); }
.round-movement svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.round-movement.is-stable { color: var(--muted); }
.round-continue { width: 100%; min-height: 52px; margin-top: 28px; }
.round-empty { color: var(--muted); font-size: 15px; line-height: 1.5; }
@media (max-height: 740px) {
  .round-recap { min-height: 0; padding-top: 16px; }
  .round-recap-title { margin-bottom: 18px; font-size: 29px; }
  .round-film { height: 72px; }
  .round-film-art { height: 60px; width: 40px; }
  .round-continue { margin-top: 20px; }
}
@media (max-width: 360px) {
  .round-film { grid-template-columns: 22px 38px minmax(0, 1fr) 42px; gap: 9px; }
  .round-film-art { width: 38px; height: 57px; }
  .round-film-title { font-size: 17px; line-height: 21px; }
}
@media (max-height: 600px) { .round-recap { touch-action: pan-y; } }
@media (prefers-reduced-motion: reduce) {
  .round-progress-fill, .rounds-host.is-moving .round-film { transition: none; }
}
.round-recap { min-height: var(--question-height); padding: 24px 0 0; }
.round-recap .exercise-footer { margin-top: auto; }
.round-continue { margin-top: 12px; }
.round-gap { list-style: none; height: 24px; padding-left: 5px; color: var(--muted); line-height: 16px; }
@media (max-height: 740px) { .round-recap { min-height: var(--question-height); } }