/* Clip surfaces share media geometry, touch targets and recovery affordances. */
.bz-clips-page [hidden] { display: none !important; }
.bz-clips-page video { display: block; }
.bz-clips-page button:disabled { cursor: wait; opacity: .6; }
.bz-clips-page .bz-btn, .bz-clips-page .bz-clipview__framebtn { min-height: 44px; }
.bz-clips-page .bz-clipview__framebtn { min-width: 44px; justify-content: center; }
.bz-clips-page .bz-clips-sort, .bz-clips-page .bz-bottok__filter,
.bz-clips-page .bz-bottok__side-btn, .bz-clips-page .bz-clipview__unmute { border-radius: var(--bz-r-sm); }
.bz-clips-page .bz-clips-sort.is-active { box-shadow: inset 3px 0 var(--bz-accent); }
.bz-clips-page .bz-vclips__more { min-height: 44px; font-size: 11px; }
.bz-clips-page .bz-clip__name, .bz-clips-page .bz-upnext-card__name { font-size: 16px; line-height: 1.2; }
.bz-clips-page .bz-clips-grid, .bz-clips-page .bz-clipview__upnext-grid { align-items: start; }
.bz-clips-page .bz-clip__media, .bz-clips-page .bz-upnext-card__media { aspect-ratio: var(--bz-clip-ratio, 16 / 9); }
.bz-clips-page .bz-vclip__media { aspect-ratio: var(--bz-clip-ratio, 9 / 16); }
.bz-clips-page [data-bz-clip-preview] { object-fit: contain; }
.bz-clips-page [data-bz-clip-preview][data-padded="true"] { object-fit: cover; }
.bz-clips-page .bz-clip__media, .bz-clips-page .bz-vclip__media, .bz-clips-page .bz-upnext-card__media {
    background: var(--bz-surface-1) url('../brand/sparky-white.svg') center / 42px auto no-repeat;
}
.bz-clips-page .bz-vclip__name { font-size: 14px; }
.bz-clips-page .bz-vclips__row { align-items: start; }
.bz-clips-load { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px 0; flex-wrap: wrap; }
.bz-clips-sentinel:not(.is-loading) .bz-clips-sentinel__shimmer { display: none; }
.bz-clips-page .bz-clips-sentinel { min-height: 1px; }
.bz-clip-notice { padding: 12px 16px; background: var(--bz-surface-2); color: var(--bz-text); border: 1px solid var(--bz-border-strong); overflow-wrap: anywhere; }
.bz-bottok-page .bz-clip-notice { position: fixed; z-index: 120; left: 50%; bottom: calc(var(--bz-tabbar-pad) + 20px); transform: translateX(-50%); width: min(90vw, 420px); }

.bz-clipview__player { min-width: 0; }
.bz-clips-page .bz-clipview__player video {
    --bz-clip-ratio: 1.7777778;
    width: 100%; height: auto; aspect-ratio: var(--bz-clip-ratio);
    max-height: none; object-fit: contain; margin-inline: auto;
}
.bz-clips-page .bz-clipview--vertical .bz-clipview__player video {
    --bz-clip-ratio: .5625;
    width: min(100%, calc((100svh - 210px) * var(--bz-clip-ratio)));
    height: auto; max-width: none; max-height: none;
}
.bz-clips-page .bz-clipview__player video[data-padded="true"] { object-fit: cover; }
.bz-clipview__status { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding-top: 8px; color: var(--bz-text-dim); }
.bz-clipview__status:has(span:empty):has(button[hidden]) { display: none; }
.bz-clips-page .bz-clipview__unmute { min-height: 44px; top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.bz-clipview__aside h1 { overflow-wrap: anywhere; }

.bz-bottok-page .bz-bottok { min-height: 0; scrollbar-width: none; overflow-anchor: none; }
.bz-bottok-page .bz-bottok__video { display: block; }
.bz-bottok-page .bz-bottok__card { min-height: 0; }
.bz-bottok-page .bz-bottok__card--padded video { object-fit: cover; }
.bz-bottok__playback { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; color: var(--bz-text); cursor: pointer; }
.bz-bottok__playback-label { display: none; padding: 14px 20px; border: 1px solid var(--bz-border-strong); background: rgba(10,8,20,.85); font: 700 16px var(--bz-font-ui); }
.bz-bottok__card[data-state="paused"] .bz-bottok__playback-label,
.bz-bottok__card[data-state="error"] .bz-bottok__playback-label,
.bz-bottok__card[data-state="slow"] .bz-bottok__playback-label { display: inline-block; }
.bz-bottok__playback:focus-visible { outline: 2px solid var(--bz-focus); outline-offset: -4px; }
.bz-bottok__media-status { position: absolute; top: 35%; left: 12px; right: 12px; text-align: center; pointer-events: none; text-shadow: 0 1px 4px var(--bz-bg); }
.bz-bottok-page .bz-bottok__shade, .bz-bottok-page .bz-bottok__overlay { pointer-events: none; }
.bz-bottok-page .bz-bottok__loader { flex: 0 0 100%; min-height: 100%; scroll-snap-align: start; flex-direction: column; gap: 16px; padding: 80px 24px; text-align: center; }
.bz-bottok-page .bz-bottok__loader .bz-eyebrow { animation: none; }
.bz-bottok-page .bz-bottok__side { gap: 16px; }
.bz-bottok-page .bz-bottok__side-count { font-size: 10px; }
.bz-bottok-page .bz-bottok__filters { flex-wrap: nowrap; gap: 6px; }
.bz-bottok-page .bz-bottok__filter { padding-inline: 10px; white-space: nowrap; }
@media (max-width: 1099.98px) {
    .bz-bottok-page { overflow: hidden; }
    .bz-bottok-page .bz-page--bleed { padding: 0; }
    .bz-bottok-page .bz-bottok { height: calc(100dvh - var(--bz-tabbar-pad)); }
    .bz-bottok-page .bz-bottok__side { bottom: 24px; }
    .bz-bottok-page .bz-bottok__overlay { bottom: 18px; }
    .bz-bottok-page .bz-bottok__filters { padding: 8px max(6px, env(safe-area-inset-left)); justify-content: center; }
    .bz-bottok-page .bz-bottok__filter { flex-shrink: 0; padding-inline: 8px; font-size: 10px; }
    .bz-bottok-page .bz-bottok__filter-dot { margin-right: 4px; width: 4px; height: 4px; }
}
@media (max-width: 600px) {
    .bz-clips-page .bz-clipview__upnext-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bz-clips-page .bz-clips-sorts { flex-wrap: wrap; }
    .bz-clips-page .bz-clip__play { opacity: 1; width: 44px; height: 44px; border-radius: var(--bz-r-sm); }
    .bz-clips-page .bz-clipview--vertical .bz-clipview__player video { width: min(100%, calc((100svh - 160px) * var(--bz-clip-ratio))); }
}
@media (max-height: 520px) {
    .bz-bottok-page .bz-bottok__side { flex-direction: row; bottom: 16px; gap: 10px; }
    .bz-bottok-page .bz-bottok__overlay { bottom: 76px; right: 18px; }
    .bz-bottok-page .bz-bottok__title { font-size: 17px; }
    .bz-bottok-page .bz-bottok__chips { display: none; }
}
/* Keep the complete fight in view, including in a rotated phone viewport. */
.bz-bottok-page .bz-bottok__video { object-fit: contain; }
.bz-bottok-page .bz-bottok__card--padded video {
    position: absolute; inset: 0; margin: auto;
    width: min(100%, calc(var(--bz-feed-height) * .5625));
    height: min(100%, calc(var(--bz-feed-width) * 1.7777778));
    object-fit: cover;
}