/* Shared v2 video cards. Compact is the baseline for every larger size.
   Scope outranks the legacy home/profile card rules while they coexist. */
html[data-v2-icons] .video-card {
  --vc-inset: .5rem;
  --vc-gap: .375rem;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  gap: 0;
  padding: var(--vc-inset);
  border: 1px solid var(--ink-300);
  border-radius: var(--rad-md);
  background: var(--ink-100);
  color: var(--ink-800);
  text-decoration: none;
  overflow: visible;
  animation: none;
  transition: border-color 150ms ease-out, transform 150ms ease-out;
}
html[data-v2-icons] .video-card:hover { border-color: var(--ink-500); }
html[data-v2-icons] .video-card:focus-visible { outline: 2px solid var(--red-400); outline-offset: 3px; }
html[data-v2-icons] .video-card .vc-thumb {
  position: relative;
  flex: none;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  border-radius: max(.375rem, calc(var(--rad-md) - var(--vc-inset)));
  overflow: hidden;
  background: var(--ink-200);
}
html[data-v2-icons] .video-card .vc-thumb img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;
}
html[data-v2-icons] .video-card .vc-left {
  --vc-tile: min(1.625rem, calc((56.25cqw - 2.75rem - (var(--vc-mod-count) - 1) * 3px) / var(--vc-mod-count)));
  position: absolute;
  inset-block: .5rem;
  inset-inline-start: .5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .375rem;
}
html[data-v2-icons] .video-card .vc-mode {
  position: static;
  display: block;
  flex: none;
  padding: .1875rem .375rem;
  font: 600 .5625rem/1.2 var(--font-mono);
  letter-spacing: .08em;
  color: #171717;
  background: #f5f5f0;
  border-radius: .1875rem;
}
html[data-v2-icons] .video-card .vc-mods { display: flex; flex-direction: column; gap: 3px; }
html[data-v2-icons] .video-card .vc-mod {
  display: grid;
  place-items: center;
  inline-size: var(--vc-tile);
  block-size: var(--vc-tile);
  flex: none;
  border: 1px solid #ffffff80;
  border-radius: .1875rem;
  background: #121212e6;
  color: #fff;
  font: 600 clamp(.4375rem, calc(var(--vc-tile) * .42), .6875rem)/1 var(--font-mono);
  letter-spacing: 0;
}
html[data-v2-icons] .video-card .vc-result {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-end: .5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3125rem;
}
html[data-v2-icons] .video-card .vc-score,
html[data-v2-icons] .video-card .vc-pp,
html[data-v2-icons] .video-card .vc-duration {
  padding: .1875rem .375rem;
  background: #121212e6;
  color: #fff;
  border-radius: .1875rem;
  font: 600 .625rem/1.2 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
}
html[data-v2-icons] .video-card .vc-grade {
  position: static;
  display: grid;
  place-items: center;
  inline-size: auto;
  min-inline-size: 1.625rem;
  block-size: 1.75rem;
  padding: .125rem .375rem;
  font: 900 1.375rem/1 var(--font-display);
  border-radius: .1875rem;
}
html[data-v2-icons] .video-card .vc-duration {
  position: absolute;
  inset-block-end: .5rem;
  inset-inline-end: .5rem;
  z-index: 2;
}
html[data-v2-icons] .video-card .vc-event { inset-block-start: auto; inset-block-end: .5rem; inset-inline-start: .5rem; }
html[data-v2-icons] .video-card .vc-flags { display: flex; flex-wrap: wrap; gap: .375rem; }
html[data-v2-icons] .video-card .vc-muted,
html[data-v2-icons] .video-card .vc-visibility { position: static; display: inline-flex; align-self: flex-start; margin: 0; font-size: .5625rem; }
html[data-v2-icons] .video-card .vc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
  gap: var(--vc-gap);
  padding: .625rem .25rem .25rem;
}
html[data-v2-icons] .video-card .vc-title { position: relative; min-inline-size: 0; }
html[data-v2-icons] .video-card .vc-title-text {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
  font: 600 .8125rem/1.4 var(--font-body);
  color: var(--ink-900);
}
html[data-v2-icons] .video-card .vc-title-tooltip {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(100% + .5rem);
  z-index: 5;
  padding: .625rem .75rem;
  max-block-size: 10rem;
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: normal;
  border: 1px solid var(--ink-500);
  border-radius: var(--rad-sm);
  background: var(--ink-900);
  color: var(--ink-0);
  font: 500 .8125rem/1.45 var(--font-body);
  visibility: hidden;
  opacity: 0;
  box-shadow: 0 4px 14px #0003;
  transition: opacity 120ms ease-out;
}
html[data-v2-icons] .video-card .vc-title[data-truncated]:hover .vc-title-tooltip,
html[data-v2-icons] .video-card:focus-visible .vc-title[data-truncated] .vc-title-tooltip { visibility: visible; opacity: 1; }
/* Reversed wrapping puts an overflowing map ABOVE its player row, while
   short self-rendered names retain the compact player/map order. */
html[data-v2-icons] .video-card .vc-identity { display: flex; flex-wrap: wrap-reverse; gap: .3125rem .5rem; align-items: baseline; }
html[data-v2-icons] .video-card .vc-map {
  flex: 1 1 auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 .625rem/1.45 var(--font-mono);
  color: var(--ink-700);
}
html[data-v2-icons] .video-card .vc-people { display: flex; flex-wrap: wrap; gap: .25rem .5rem; min-inline-size: 0; max-inline-size: 100%; font: 600 .625rem/1.45 var(--font-mono); }
html[data-v2-icons] .video-card .vc-person { color: var(--red-400); overflow-wrap: anywhere; cursor: pointer; }
html[data-v2-icons] .video-card .vc-person:hover { text-decoration: underline; text-underline-offset: .15em; }
html[data-v2-icons] .video-card .vc-person:focus-visible { outline: 2px solid var(--red-400); outline-offset: 2px; border-radius: 2px; }
html[data-v2-icons] .video-card .vc-rendered-by { font-weight: 400; color: var(--ink-700); }
html[data-v2-icons] .video-card .vc-winner { color: var(--ink-700); }
html[data-v2-icons] .video-card.vc-map-first .vc-map { flex-basis: 100%; }
/* A shared controller promotes just the affected visual row. Explicit slots
   reserve absent metadata without adding empty elements or invented values. */
html[data-v2-icons] [data-vc-measuring] > .video-card { content-visibility: visible; }
html[data-v2-icons] .video-card[data-vc-stacked] .vc-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--vc-map-height, auto) auto;
  align-content: start;
  align-items: start;
}
html[data-v2-icons] .video-card[data-vc-stacked] .vc-map { grid-row: 1; }
html[data-v2-icons] .video-card[data-vc-stacked] .vc-people { grid-row: 2; }
html[data-v2-icons] .video-card[data-vc-row] .vc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--vc-title-height) calc(var(--vc-identity-height) + var(--vc-gap)) var(--vc-flags-slot) var(--vc-stats-slot) minmax(var(--vc-meta-slot), 1fr);
  gap: 0;
}
html[data-v2-icons] .video-card[data-vc-row] .vc-body > * { align-self: start; }
html[data-v2-icons] .video-card[data-vc-row] .vc-title { grid-row: 1; }
html[data-v2-icons] .video-card[data-vc-row] .vc-identity { grid-row: 2; margin-block-start: var(--vc-gap); }
html[data-v2-icons] .video-card[data-vc-row] .vc-flags { grid-row: 3; margin-block-start: var(--vc-gap); }
html[data-v2-icons] .video-card[data-vc-row] .vc-stats { grid-row: 4; margin-block-start: var(--vc-gap); }
html[data-v2-icons] .video-card[data-vc-row] .vc-meta { grid-row: 5; align-self: end; margin-block-start: var(--vc-gap); }
html[data-v2-icons] .video-card .vc-stats { display: flex; flex-wrap: wrap; gap: .375rem .75rem; font: 600 .75rem/1.4 var(--font-mono); color: var(--ink-800); }
html[data-v2-icons] .video-card .vc-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .375rem .75rem; margin-block-start: auto; font: 400 .625rem/1.45 var(--font-mono); color: var(--ink-700); }
html[data-v2-icons] .video-card[data-card-size='standard'] { --vc-gap: .5rem; }
html[data-v2-icons] .video-card[data-card-size='standard'] .vc-body { padding: .75rem .375rem .375rem; }
html[data-v2-icons] .video-card[data-card-size='standard'] .vc-title-text { font-size: .875rem; }
html[data-v2-icons] .video-card[data-card-size='large'] {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(.875rem, 2vw, 1.5rem);
  --vc-inset: .75rem;
}
html[data-v2-icons] .video-card[data-card-size='large'] .vc-body { gap: .75rem; padding: clamp(.5rem, 1.5vw, 1.5rem) clamp(.5rem, 1.5vw, 1.5rem) clamp(.5rem, 1.5vw, 1.5rem) 0; }
html[data-v2-icons] .video-card[data-card-size='large'] .vc-title-text { font-size: clamp(1.125rem, 2vw, 1.625rem); }
html[data-v2-icons] .video-card[data-card-size='large'] .vc-score,
html[data-v2-icons] .video-card[data-card-size='large'] .vc-pp { font-size: .8125rem; }
html[data-v2-icons] .video-card[data-card-size='large'] .vc-grade { min-inline-size: 2rem; block-size: 2.25rem; font-size: 1.75rem; }
html[data-v2-icons] .video-card[data-card-size='large'] .vc-people,
html[data-v2-icons] .video-card[data-card-size='large'] .vc-map,
html[data-v2-icons] .video-card[data-card-size='large'] .vc-meta { font-size: .75rem; }
html[data-v2-icons] .video-card .vc-judgments,
html[data-v2-icons] .video-card .vc-details { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; }
html[data-v2-icons] .video-card .vc-judgments > div,
html[data-v2-icons] .video-card .vc-details > div { display: flex; align-items: baseline; gap: .375rem; font: 400 .6875rem/1.45 var(--font-mono); }
html[data-v2-icons] .video-card .vc-judgments dt,
html[data-v2-icons] .video-card .vc-details dt { color: var(--ink-700); }
html[data-v2-icons] .video-card .vc-judgments dd,
html[data-v2-icons] .video-card .vc-details dd { margin: 0; color: var(--ink-900); overflow-wrap: anywhere; }
/* Video thumbnails outside the family (weekly video/deleted cards) use the
   same four rounded corners, retaining their existing controls and layout. */
html[data-v2-icons] .hm-week-card { padding: .75rem; gap: .75rem; }
html[data-v2-icons] .hm-week-card .thumb,
html[data-v2-icons] .pf-stage .card:not(.video-card) .thumb { border-radius: var(--rad-sm); overflow: hidden; }
html[data-v2-icons] .pf-stage .card:not(.video-card) { padding: .5rem; }
@media (max-width: 760px) {
  html[data-v2-icons] .video-card[data-card-size='large'] { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html[data-v2-icons] .video-card[data-card-size='large'] .vc-body { padding: .875rem .375rem .375rem; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-v2-icons] .video-card,
  html[data-v2-icons] .video-card .vc-title-tooltip { transition: none; }
}