.highlights{margin:0 0 32px;padding:26px 0 4px;min-width:0}
.highlights-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.highlights-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.highlights-title h2{margin:0;font:italic 900 clamp(26px,3vw,38px)/1.1 var(--display);text-transform:uppercase}
.highlights-demo-label{font:700 10px var(--body);text-transform:uppercase;letter-spacing:1px;padding:4px 7px;border:1px solid #53555b;border-radius:3px;color:#b2b2b2}
.highlight-carousel{position:relative}
.highlights:has(.initial-loading) .highlight-navigation{visibility:hidden;pointer-events:none}
.highlight-navigation{position:absolute;inset:0 0 auto;height:var(--highlight-image-height,100%);pointer-events:none;display:flex;align-items:center;justify-content:space-between}
.highlight-navigation .button{pointer-events:auto;width:44px;height:44px;padding:0;border-radius:7px;border:1px solid #f06b78;background:#b62437;color:#fff;box-shadow:0 3px 14px #0008;transform:translateX(-50%)}
.highlight-navigation .button:last-child{transform:translateX(50%)}
.highlight-navigation .button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.highlight-navigation .button:hover:not(:disabled){background:#d32b41}
.highlight-navigation .button:disabled{opacity:1;background:#28282a;border-color:#4d4f55;color:#7d7d7d;cursor:default}
.highlight-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:none;scrollbar-width:none;padding:0;overscroll-behavior-x:contain}
.highlight-card{flex:0 0 calc((100% - 40px)/3);min-width:0;padding:0;text-align:left;background:transparent;border:0;border-radius:0;overflow:hidden;color:var(--white);scroll-snap-align:none;cursor:pointer}
.highlight-card:hover .highlight-copy{color:#fff}
.highlight-card:hover .highlight-image{box-shadow:inset 0 0 0 1px #b73848}
.highlight-card:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.highlight-image{display:block;position:relative;aspect-ratio:16/9;background:#222224;overflow:hidden;border-radius:5px}
.highlight-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.highlight-card:hover img{transform:scale(1.025)}
.highlight-image::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,#0007);pointer-events:none}
.highlight-views,.highlight-duration{position:absolute;z-index:1;font:700 13px/1.3 var(--body);font-variant-numeric:tabular-nums;color:#fff;padding:5px 9px;background:#090909f2;border:1px solid #f7f9ff26;border-radius:4px;box-shadow:0 2px 6px #0008}
.highlight-views{bottom:10px;left:10px}
.highlight-duration{bottom:10px;right:10px}
.highlight-play{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border:1px solid #f7f9ff80;border-radius:50%;background:#10101299;color:#fff;font-size:17px;padding-left:3px}
.highlight-copy{position:absolute;z-index:1;top:10px;left:10px;max-width:calc(100% - 20px);display:block;padding:6px 10px;background:#090909f2;border:1px solid #f7f9ff26;border-radius:4px;box-shadow:0 2px 6px #0008;color:#fff;text-shadow:0 1px 2px #000}
.highlight-copy strong{display:block;font:700 18px/1.3 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .highlight-track::-webkit-scrollbar{display:none}
#highlight-dialog{padding:0;width:min(920px,calc(100vw - 32px));max-height:90svh;background:#1c1c1e;border:1px solid #53555b;border-top:4px solid var(--red);border-radius:6px;color:var(--white)}
#highlight-dialog::backdrop{background:#000c;backdrop-filter:blur(6px)}
.highlight-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px}
.highlight-dialog-head h2{font:700 24px/1.2 var(--body);margin:0}
#highlight-close{font-size:28px;padding:0 6px;background:none;border:0;color:var(--white);cursor:pointer}
#highlight-player{aspect-ratio:16/9}#highlight-player iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:700px){.highlights{padding-top:18px;margin-bottom:24px}.highlight-card{flex-basis:84%}.highlight-track{gap:12px}.highlight-copy{padding:6px 9px}.highlights-head{gap:10px}.highlights-title{gap:8px}.highlight-navigation .button{width:36px;height:36px;transform:translateX(-8px)}.highlight-navigation .button:last-child{transform:translateX(8px)}.highlight-dialog-head{padding:16px}.highlight-dialog-head h2{font-size:19px}}
@media(prefers-reduced-motion:reduce){.highlight-image img{transition:none}}

/* A media section between the goal dashboard and participation rules. */
.subathon-page .details .content-grid>#clips{grid-column:1/-1;width:100%;margin:0;padding:0;scroll-margin-top:calc(var(--anchor-gap) - 4px)}


.highlights-title{position:relative;padding-bottom:15px}
.highlights-title::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:3px;background:var(--red)}

.highlight-card:hover .highlight-play,
.highlight-card:focus-visible .highlight-play{background:var(--red);border-color:var(--red);color:#fff}

/* Compact media strip with navigation beside the heading. */
.highlight-card{flex-basis:calc((100% - 60px)/3.25)}
.highlights-head .highlight-navigation{position:static;inset:auto;height:auto;gap:8px;flex-shrink:0;pointer-events:auto}
.highlights-head .highlight-navigation .button{transform:none;width:40px;height:40px;box-shadow:none}
.highlight-copy{top:auto;bottom:0;left:0;max-width:none;width:100%;padding:32px 16px 14px;border:0;border-radius:0;background:linear-gradient(transparent,#000d);box-shadow:none}
.highlight-copy strong{font-size:20px}
.highlight-views{top:10px;bottom:auto}
.highlight-duration{top:10px;bottom:auto}
@media(max-width:700px){.highlight-card{flex-basis:86%}.highlights-head .highlight-navigation .button{width:36px;height:36px}.highlight-copy strong{font-size:17px}}


/* Larger clip labels and black metadata badges. */
.highlight-copy strong{font-size:24px;line-height:1.25}
.highlight-views,.highlight-duration{font-size:13px;padding:5px 8px;background:#090909f2;border-color:#f7f9ff26;color:#fff;box-shadow:0 2px 6px #0005}
@media(max-width:700px){.highlight-copy strong{font-size:21px}.highlight-views,.highlight-duration{font-size:12px;padding:4px 7px}}