/* UNDERDOG TV - the top of FILMY (films-top.js, Tools/network/FILMY-TOP10-PLAN.md): the rail of who you follow, the
   Top 10 row whose tile grows into a muted preview, its Hall of fame tab. The old hero (.bu-tvh) is not drawn here.
   Sizes: --ft-w a small tile, --ft-h the tiles' height, --ft-num the room of the big number, --ft-wo an open tile. */

.bu-ft-on .bu-tvh { display: none !important; }

.bu-tv-films .bu-ft {
  --ft-w: clamp(250px, 18vw, 350px);
  --ft-h: clamp(300px, 23vw, 356px);
  --ft-num: 62px;
  --ft-media: .56;
  --ft-wo: min(900px, calc(100% - var(--ft-w) * .6 - var(--ft-num)));
  position: relative;
  display: grid;
  grid-template-columns: clamp(214px, 15vw, 262px) minmax(0, 1fr);
  gap: clamp(22px, 2.4vw, 44px);
  max-width: var(--page-max);
  margin: 0 auto;
  padding-top: calc(var(--header-h) / var(--ui-zoom) + 22px);
  zoom: var(--ui-zoom);
}
/* the page's list below (films-preview.js) lives in the right column: no second zoom, no second gutter */
.bu-tv-films .bu-ft .bu-tvx-body { zoom: 1; max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.bu-ft-col { min-width: 0; }

/* ------------------------------------------------------------------ the left rail */
.bu-ft-rail {
  position: sticky;
  top: calc(var(--header-h) / var(--ui-zoom) + 18px);
  align-self: start;
  max-height: calc((100vh - var(--header-h)) / var(--ui-zoom) - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-bottom: 18px;
  z-index: 3;
}
.bu-ft-rail::-webkit-scrollbar { display: none; }
.bu-ft-lbl { margin: 18px 12px 8px; color: var(--text-3); font: 600 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.bu-ft-nav .bu-ft-lbl { margin-top: 2px; }
.bu-ft-nv {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 10px;
  color: var(--text-2); font: 600 13px var(--font-display); letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  transition: background .2s, color .2s;
}
.bu-ft-nv .bu-ic { width: 18px; height: 18px; flex: none; }
.bu-ft-nv:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.bu-ft-nv.is-gold { color: var(--gold-2); }
@media (max-width: 1499px) { .bu-ft-nv em { display: none; } }
.bu-ft-nv em {
  margin-left: auto; padding: 3px 7px; border-radius: 6px; background: var(--red-soft); color: #ff9097;
  font: 600 10px var(--font-mono); font-style: normal; letter-spacing: .03em; text-transform: none; white-space: nowrap;
}
.bu-ft-follow { margin-top: 6px; border-top: 1px solid var(--line); }
.bu-ft-person {
  display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 6px 12px; border-radius: 10px;
  color: #fff; text-decoration: none; transition: background .2s;
}
.bu-ft-person:hover { background: rgba(255, 255, 255, .05); }
.bu-ft-pava {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #34385f, #16182b); color: #fff; font: 700 12px var(--font-mono);
}
.bu-ft-pava.is-fighter { border-radius: 10px; background: linear-gradient(135deg, #3a1d22, #16090b); box-shadow: inset 0 0 0 1.5px rgba(255, 56, 56, .7); }
.bu-ft-pwords { display: flex; flex-direction: column; min-width: 0; }
.bu-ft-pwords b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.bu-ft-pwords small { overflow: hidden; color: var(--text-3); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.bu-ft-dot { flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red-glow); }
.bu-ft-muted { margin: 12px; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.bu-ft-followcard { margin: 14px 4px 0; padding: 16px; border: 1px solid var(--line-2); border-radius: 14px; background: linear-gradient(160deg, rgba(88, 101, 242, .12), transparent 70%), var(--surface-1); }
.bu-ft-followcard b { display: block; font: 600 16px/1.15 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.bu-ft-followcard p { margin: 8px 0 12px; color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.bu-ft-login { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 10px;
  background: #5865f2; color: #fff; font: 600 13px var(--font-body); cursor: pointer; }
.bu-ft-login:hover { background: #4752c4; }

/* the strip of faces (the rail's people where there is no rail) */
.bu-ft-strip { display: none; gap: 14px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter) 10px; }
.bu-ft-strip::-webkit-scrollbar { display: none; }
.bu-ft-strip[hidden] { display: none !important; }
.bu-ft-face { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 64px; color: var(--text-2); text-decoration: none; }
.bu-ft-face .bu-ft-pava { width: 54px; height: 54px; font-size: 15px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); }
.bu-ft-face .bu-ft-pava.is-fighter { border-radius: 16px; box-shadow: 0 0 0 2px rgba(255, 56, 56, .45); }
.bu-ft-face .bu-ft-pava.is-new { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--red); }
.bu-ft-face .bu-ft-pava.is-find { background: transparent; border: 1.5px dashed var(--line-3); box-shadow: none; }
.bu-ft-fname { max-width: 64px; overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bu-ft-stripcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-1); }
.bu-ft-stripcard span { font-size: 13px; font-weight: 600; }
.bu-ft-striplogin { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: #5865f2; color: #fff; font: 600 12.5px var(--font-body); cursor: pointer; }

/* ------------------------------------------------------------------ the Top 10 */
.bu-ft-top { position: relative; padding-bottom: 6px; }
.bu-ft-top[hidden] { display: none !important; }
/* the page's glow takes the open film's colours (a blurred poster, faded out downwards and at the rail) */
.bu-ft-amb {
  position: absolute; z-index: 0; top: -120px; left: -80px; right: calc(-1 * var(--gutter)); height: 760px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 94%), linear-gradient(90deg, transparent, #000 110px);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 30%, transparent 94%), linear-gradient(90deg, transparent, #000 110px);
  mask-composite: intersect;
}
.bu-ft-amb img { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; opacity: 0; filter: blur(80px) saturate(1.45); transition: opacity 1.2s var(--ease); }
.bu-ft-amb img.is-on { opacity: .44; }
.bu-ft-head { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-bottom: 20px; }
.bu-ft-headcopy { flex: 1 1 380px; min-width: 0; max-width: 760px; }
.bu-ft-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--text-3); font: 700 11px var(--font-mono); letter-spacing: .18em; }
.bu-ft-kicker .bu-ic { width: 15px; height: 15px; }
.bu-ft-title { margin: 0; font: 700 clamp(36px, 3.8vw, 64px)/.94 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
.bu-ft-swap { display: inline-block; animation: bu-ft-swap .5s var(--ease-out); }
@keyframes bu-ft-swap { from { opacity: 0; transform: translateY(12px); } }
.bu-ft-cap { margin: 12px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.bu-ft-myvote {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 12px; padding: 5px 12px 5px 5px; border: 1px solid rgba(233, 185, 73, .5);
  border-radius: 11px; background: rgba(233, 185, 73, .08); color: var(--text-2); font-size: 13px; text-decoration: none;
}
.bu-ft-myvote img { width: 44px; height: 28px; flex: none; border-radius: 6px; object-fit: cover; }
.bu-ft-myvote b { overflow: hidden; color: var(--gold-2); text-overflow: ellipsis; white-space: nowrap; }
.bu-ft-tabs {
  position: relative; display: inline-flex; flex: none; padding: 4px; border: 1px solid var(--line-2); border-radius: 14px;
  background: rgba(8, 9, 13, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.bu-ft-pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 10px; background: #fff;
  transition: transform .45s var(--ease-out), width .45s var(--ease-out), background .3s;
}
.bu-ft-pill.is-gold { background: linear-gradient(135deg, var(--gold-2), var(--gold-3)); }
.bu-ft-tab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px;
  background: none; color: var(--text-2); font: 600 13px var(--font-display); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: color .3s;
}
.bu-ft-tab .bu-ic { width: 16px; height: 16px; }
.bu-ft-tab:hover { color: #fff; }
.bu-ft-tab.is-on { color: #08090d; }
.bu-ft-tab-month:not(.is-on) { color: var(--gold-2); }
.bu-ft-tab[hidden] { display: none; }
.bu-ft-ts { display: none; }
.bu-ft-tab-hall:not(.is-on) { color: var(--gold-2); }
/* the Hall of fame: its three views and Play all under the words */
.bu-ft-sub { display: flex; flex-wrap: wrap; align-items: center; flex-basis: 100%; gap: 10px 14px; }
.bu-ft-views { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bu-ft-view {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(8, 9, 13, .5); color: var(--text-2); font: 600 12.5px var(--font-display); letter-spacing: .07em; text-transform: uppercase; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.bu-ft-view .bu-ic { width: 15px; height: 15px; }
.bu-ft-view:hover { color: #fff; border-color: var(--line-3); }
.bu-ft-view.is-on { border-color: transparent; background: linear-gradient(135deg, var(--gold-2), var(--gold-3)); color: #1a1200; }
.bu-ft-view:focus-visible, .bu-ft-playall:focus-visible { outline: 2px solid var(--red-2); outline-offset: 2px; }
.bu-ft-playall { min-height: 40px; }
.bu-ft-row.is-hall .bu-ft-item { flex-basis: var(--ft-w); padding-left: 0; }
.bu-ft-row.is-hall .bu-ft-item.is-open { flex-basis: var(--ft-wo); }
.bu-ft-row.is-hall .bu-ft-num { display: none; }
.bu-ft-row.is-hall .bu-ft-card { border-color: rgba(233, 185, 73, .45); }
.bu-ft-row.is-hall .bu-ft-item.is-open .bu-ft-card { border-color: var(--gold); box-shadow: 0 40px 90px rgba(0, 0, 0, .65), 0 0 0 1px rgba(233, 185, 73, .4); }
.bu-ft-badge.is-period { color: var(--gold-2); border-color: rgba(233, 185, 73, .55); }
.bu-ft-tab:focus-visible, .bu-ft-arrow:focus-visible, .bu-ft-hit:focus-visible, .bu-ft-nv:focus-visible, .bu-ft-person:focus-visible { outline: 2px solid var(--red-2); outline-offset: 2px; }

.bu-ft-rowwrap { position: relative; z-index: 1; }
.bu-ft-row {
  position: relative; display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  margin: 0 -6px; padding: 8px 6px 30px;
}
.bu-ft-row::-webkit-scrollbar { display: none; }
.bu-ft-arrow {
  position: absolute; z-index: 4; top: calc(var(--ft-h) * var(--ft-media) / 2 - 16px); display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--line-3); border-radius: 50%; background: rgba(8, 9, 13, .78); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s, transform .3s;
}
.bu-ft-arrow .bu-ic { width: 20px; height: 20px; }
.bu-ft-arrow.is-prev { left: -14px; }
.bu-ft-arrow.is-next { right: -14px; }
.bu-ft-rowwrap:hover .bu-ft-arrow, .bu-ft-arrow:focus-visible { opacity: 1; }
.bu-ft-arrow:hover { transform: scale(1.08); }
.bu-ft-arrow[hidden] { display: none; }
.bu-ft-hint { position: relative; z-index: 1; margin: -12px 0 0; color: var(--text-3); font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

/* a tile: the big number, then the card; the open tile grows (flex-basis), its picture fills it (height) */
.bu-ft-item {
  position: relative; flex: 0 0 calc(var(--ft-num) + var(--ft-w)); padding-left: var(--ft-num); min-width: 0;
  transition: flex-basis .65s var(--ease-out);
}
.bu-ft-item.is-n10 { flex-basis: calc(var(--ft-num) + 54px + var(--ft-w)); padding-left: calc(var(--ft-num) + 54px); }
.bu-ft-item.is-open { flex-basis: calc(var(--ft-num) + var(--ft-wo)); }
.bu-ft-item.is-n10.is-open { flex-basis: calc(var(--ft-num) + 54px + var(--ft-wo)); }
.bu-ft-row.is-in .bu-ft-item { animation: bu-ft-rise .7s both var(--ease-out); animation-delay: var(--d); }
@keyframes bu-ft-rise { from { opacity: 0; transform: translateY(28px) scale(.98); } }
.bu-ft-num {
  position: absolute; left: 0; top: calc(var(--ft-h) * var(--ft-media) - 108px); color: transparent; font: 700 150px/.72 var(--font-display);
  letter-spacing: -.06em; -webkit-text-stroke: 2px rgba(255, 255, 255, .3); pointer-events: none; user-select: none;
  transition: color .6s, -webkit-text-stroke-color .6s;
}
.bu-ft-item.is-open .bu-ft-num { color: rgba(233, 185, 73, .14); -webkit-text-stroke-color: var(--gold-2); }
.bu-ft-card {
  position: relative; height: var(--ft-h); overflow: hidden; border: 1px solid var(--line-2); border-radius: 18px; background: var(--surface-1);
  transition: border-color .35s, box-shadow .6s, transform .4s var(--ease-out);
}
.bu-ft-item:not(.is-open) .bu-ft-card:hover { transform: translateY(-6px); border-color: var(--line-3); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.bu-ft-item.is-open .bu-ft-card { border-color: rgba(255, 255, 255, .28); box-shadow: 0 40px 90px rgba(0, 0, 0, .65); }
.bu-ft-media {
  position: absolute; top: 0; left: 0; right: 0; height: calc(var(--ft-h) * var(--ft-media)); overflow: hidden; background: #090a0d;
  transition: height .65s var(--ease-out);
}
.bu-ft-item.is-open .bu-ft-media { height: 100%; }
.bu-ft-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; transition: transform 1s var(--ease-out), filter .6s; }
.bu-ft-poster.is-none { background: radial-gradient(ellipse at 30% 30%, #2a1418, #0b0c10); }
.bu-ft-item:not(.is-open) .bu-ft-card:hover .bu-ft-poster { transform: scale(1.07); }
.bu-ft-item.is-open .bu-ft-poster { animation: bu-ft-kb 16s ease-in-out .6s infinite alternate; }
@keyframes bu-ft-kb { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
.bu-ft-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.bu-ft-item.is-live .bu-ft-video { opacity: 1; }
.bu-ft-item.is-live .bu-ft-poster { animation: none; }
/* a tall film in a wide tile (or the other way): the film whole, over its own blurred picture */
.bu-ft-item.is-fit .bu-ft-video { object-fit: contain; }
/* a wide tile keeps its words on the left: a tall film stands on the right */
@media (min-width: 761px) { .bu-ft-item.is-fit .bu-ft-video { object-position: 82% 50%; } }
.bu-ft-item.is-fit.is-live .bu-ft-poster { filter: blur(24px) brightness(.5); transform: scale(1.15); }
.bu-ft-badges { position: absolute; z-index: 2; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.bu-ft-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 7px;
  background: rgba(8, 9, 13, .74); color: #fff; font: 700 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.bu-ft-badge .bu-ic { width: 13px; height: 13px; }
.bu-ft-badge.is-week { border-color: transparent; background: var(--red); }
.bu-ft-badge.is-lead { border-color: rgba(233, 185, 73, .7); color: var(--gold-2); }
.bu-ft-badge.is-mine, .bu-ft-badge.is-gold { border-color: transparent; background: linear-gradient(135deg, var(--gold-2), var(--gold-3)); color: #1a1200; }
.bu-ft-dur { position: absolute; z-index: 2; right: 9px; bottom: 9px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .74); font-size: 11.5px; transition: opacity .25s; }
.bu-ft-peek {
  position: absolute; z-index: 2; top: 50%; left: 50%; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 999px; background: rgba(8, 9, 13, .72); font: 600 12px var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transform: translate(-50%, -30%); transition: opacity .35s, transform .35s var(--ease-out); pointer-events: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.bu-ft-peek .bu-ic { width: 15px; height: 15px; color: var(--red-2); }
.bu-ft-item:not(.is-open) .bu-ft-card:hover .bu-ft-peek { opacity: 1; transform: translate(-50%, -50%); }
.bu-ft-item.is-open .bu-ft-media > .bu-ft-badges, .bu-ft-item.is-open .bu-ft-dur, .bu-ft-item.is-open .bu-ft-peek { opacity: 0; visibility: hidden; }
.bu-ft-small {
  position: absolute; top: calc(var(--ft-h) * var(--ft-media)); left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 9px;
  padding: 14px 16px; transition: opacity .2s;
}
.bu-ft-item.is-open .bu-ft-small { opacity: 0; visibility: hidden; }
.bu-ft-t { display: -webkit-box; margin: 0; overflow: hidden; font: 600 15.5px/1.3 var(--font-body); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bu-ft-stat, .bu-ft-st { display: flex; align-items: center; gap: 7px; margin: auto 0 0; color: var(--text-2); font: 600 12.5px var(--font-mono); }
.bu-ft-stat .bu-ic, .bu-ft-st .bu-ic { width: 15px; height: 15px; flex: none; color: #ff4d6a; }
.bu-ft-top[data-tab="month"] .bu-ft-stat .bu-ic, .bu-ft-top[data-tab="month"] .bu-ft-st .bu-ic { color: var(--gold-2); }
.bu-ft-credit { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 13px; }
.bu-ft-ava {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #34385f, #16182b);
  color: #fff; font: 700 10px var(--font-mono);
}
.bu-ft-ava.is-studio { background: linear-gradient(135deg, var(--red), #6b0d14); }
.bu-ft-role { flex: none; color: var(--text-3); font: 600 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.bu-ft-name { min-width: 0; overflow: hidden; color: #fff; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
a.bu-ft-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.bu-ft-cup { display: inline-flex; flex: none; color: var(--gold-2); }
.bu-ft-cup .bu-ic { width: 14px; height: 14px; }
.bu-ft-credit .bua-follow { flex: none; margin-left: 4px; }
/* the small tile is one button (the preview opens); the open tile hands the clicks to its own controls */
.bu-ft-hit { position: absolute; z-index: 3; inset: 0; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.bu-ft-item.is-open .bu-ft-hit { visibility: hidden; }
.bu-ft-big { position: absolute; inset: 0; z-index: 4; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.bu-ft-item.is-open .bu-ft-big { opacity: 1; visibility: visible; transition: opacity .5s .3s, visibility 0s; }
.bu-ft-big::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 9, 13, .94) 0%, rgba(8, 9, 13, .64) 38%, rgba(8, 9, 13, 0) 68%), linear-gradient(0deg, rgba(8, 9, 13, .72), rgba(8, 9, 13, 0) 45%);
}
.bu-ft-bigtop { position: absolute; top: 18px; left: 24px; right: 150px; display: flex; flex-wrap: wrap; gap: 6px; }
.bu-ft-bigtop .bu-ft-badges { position: static; display: contents; }
.bu-ft-info {
  position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; max-width: 620px;
  opacity: 0; transform: translateY(18px); transition: transform .5s, opacity .3s;
}
.bu-ft-item.is-open .bu-ft-info { opacity: 1; transform: none; transition: transform .7s .35s var(--ease-out), opacity .5s .35s; }
.bu-ft-bt { display: -webkit-box; margin: 0; overflow: hidden; font: 700 clamp(26px, 2.5vw, 40px)/.96 var(--font-display); letter-spacing: -.005em; text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.bu-ft-info .bu-ft-credit .bu-ft-ava { width: 32px; height: 32px; font-size: 11px; }
.bu-ft-info .bu-ft-name { font-size: 15px; }
.bu-ft-fight { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; color: var(--text-2); font-size: 13px; }
.bu-ft-fight .bu-ic { width: 15px; height: 15px; flex: none; color: var(--red-2); }
.bu-ft-fight span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-ft-fight em { flex: none; color: var(--text-3); font: 600 10.5px var(--font-mono); font-style: normal; text-transform: uppercase; }
.bu-ft-st { margin: 0; font-size: 13px; }
.bu-ft-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.bu-ft-acts .bu-ft-watch { min-height: 44px; min-width: 0; max-width: 100%; }
.bu-ft-wdur { margin-left: -2px; opacity: .9; }
.bu-ft-acts .bu-film-react { min-height: 44px; }
.bu-ft-acts .bua-vote { min-height: 44px; }
.bu-ft-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line-3); border-radius: 10px; background: rgba(21, 25, 35, .8); color: #fff; cursor: pointer; }
.bu-ft-icon span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bu-ft-icon .bu-ic { width: 18px; height: 18px; }
.bu-ft-icon[hidden] { display: none; }
.bu-ft-start {
  position: absolute; top: 16px; right: 16px; display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: rgba(255, 56, 56, .92); color: #fff; font: 600 13px var(--font-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 10px 40px var(--red-glow);
}
.bu-ft-start .bu-ic { width: 18px; height: 18px; }
.bu-ft-item.is-manual:not(.is-live) .bu-ft-start { display: inline-flex; }
.bu-ft-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .14); }
.bu-ft-progress span { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }

.bu-ft-row.is-hall .bu-ft-skel { margin-left: 0; }
.bu-ft-skel {
  flex: 0 0 calc(var(--ft-num) + var(--ft-w)); height: var(--ft-h); margin-left: var(--ft-num); border-radius: 18px; flex-basis: var(--ft-w);
  background: linear-gradient(100deg, var(--surface-1) 30%, var(--surface-2) 50%, var(--surface-1) 70%); background-size: 300% 100%; animation: bu-ft-shine 1.4s infinite linear;
}
@keyframes bu-ft-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.bu-ft-emptycard {
  display: flex; align-items: center; gap: 22px; flex: 1 1 100%; min-height: calc(var(--ft-h) * .7); padding: 28px; border: 1px dashed var(--line-3); border-radius: 18px;
  background: radial-gradient(ellipse at 0% 50%, rgba(233, 185, 73, .08), transparent 60%), var(--surface-1);
}
.bu-ft-emptycard h3 { margin: 0 0 8px; font: 700 clamp(22px, 2vw, 30px)/1.05 var(--font-display); text-transform: uppercase; }
.bu-ft-emptycard p { max-width: 620px; margin: 0 0 16px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.bu-ft-emptyglyph { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 18px; background: var(--red-soft); color: var(--red-2); }
.bu-ft-emptyglyph .bu-ic { width: 30px; height: 30px; }
.bu-ft-emptyglyph.is-gold, .bu-ft-vote-empty .bu-ft-emptyglyph { background: var(--gold-soft); color: var(--gold-2); }
.bu-ft-lastwin { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; color: #fff; text-decoration: none; }
.bu-ft-lastwin small { color: var(--gold-2); font: 600 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }


/* My films (films-preview.js): only the list */
.bu-film-mine-on .bu-ft-top, .bu-film-mine-on .bu-ft-strip { display: none !important; }

/* ------------------------------------------------------------------ narrower: no rail, the strip of faces */
@media (max-width: 1099px) {
  .bu-tv-films .bu-ft { display: block; }
  .bu-ft-rail { display: none; }
  .bu-ft-strip { display: flex; }
  .bu-ft-amb { left: calc(-1 * var(--gutter)); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 94%); mask-image: linear-gradient(180deg, #000 30%, transparent 94%); }
  .bu-tv-films .bu-ft { --ft-w: clamp(240px, 34vw, 320px); --ft-wo: min(760px, calc(100% - 90px)); }
}
/* a phone held upright: tiles that fill most of the width; the open tile is a tall card with its words at the bottom */
@media (max-width: 760px) {
  .bu-tv-films .bu-ft { --ft-w: 70vw; --ft-h: 330px; --ft-num: 40px; --ft-media: .52; --ft-wo: calc(100vw - var(--gutter) - var(--ft-num) - 36px); padding-top: calc(var(--header-h) + 8px); }
  .bu-ft-head { gap: 14px; margin-bottom: 14px; }
  .bu-ft-kicker { display: none; }
  .bu-ft-title { font-size: clamp(30px, 9vw, 40px); }
  .bu-ft-cap { margin-top: 8px; font-size: 13px; }
  .bu-ft-tabs { display: flex; width: 100%; }
  .bu-ft-tab { flex: 1 1 0; justify-content: center; gap: 6px; padding: 0 6px; font-size: 12px; }
  .bu-ft-tl { display: none; }
  .bu-ft-ts { display: inline; }
  .bu-ft-top[data-tab="hall"] .bu-ft-cap { display: none; }
  .bu-ft-view { min-height: 36px; padding: 0 11px; font-size: 11.5px; }
  .bu-ft-row.is-hall .bu-ft-item { flex-basis: 78vw; }
  .bu-ft-row.is-hall .bu-ft-item.is-open { flex-basis: calc(100vw - var(--gutter) - 36px); }
  .bu-ft-row { gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter) 22px; scroll-padding-left: var(--gutter); }
  .bu-ft-num { top: calc(var(--ft-h) * var(--ft-media) - 72px); font-size: 100px; -webkit-text-stroke-width: 1.5px; }
  .bu-ft-item.is-n10 { flex-basis: calc(var(--ft-num) + 36px + var(--ft-w)); padding-left: calc(var(--ft-num) + 36px); }
  .bu-ft-item.is-n10.is-open { flex-basis: calc(var(--ft-num) + 36px + var(--ft-wo)); }
  .bu-ft-arrow, .bu-ft-hint { display: none !important; }
  .bu-ft-big::before { background: linear-gradient(0deg, rgba(8, 9, 13, .96) 0%, rgba(8, 9, 13, .72) 46%, rgba(8, 9, 13, 0) 76%); }
  .bu-ft-bigtop { top: 12px; left: 12px; right: 12px; }
  .bu-ft-info { left: 14px; right: 14px; bottom: 16px; gap: 8px; }
  .bu-ft-bt { font-size: 23px; }
  .bu-ft-info .bu-ft-fight, .bu-ft-infob { display: none; }
  .bu-ft-info .bu-ft-credit .bua-follow { display: none; }
  .bu-ft-acts { gap: 8px; }
  .bu-ft-bigtop { right: 58px; }
  .bu-ft-acts .bu-ft-share { display: none; }
  .bu-ft-start { top: 10px; right: 10px; width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; }
  .bu-ft-start span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bu-ft-item.is-manual:not(.is-live) .bu-ft-bt { padding-right: 36px; }
  .bu-ft-emptycard { flex-direction: column; align-items: flex-start; padding: 22px; }
}
@media (max-width: 380px) {
  .bu-tv-films .bu-ft { --ft-w: 74vw; --ft-num: 34px; }
  .bu-ft-bt { font-size: 20px; }
  .bu-ft-num { font-size: 88px; top: calc(var(--ft-h) * var(--ft-media) - 63px); }
  .bu-ft-tab .bu-ic { display: none; }
}
/* a short phone held upright (320x568, 375x667): the words under the title go, a lower card - Watch stays on the first screen */
@media (max-width: 760px) and (max-height: 700px) and (orientation: portrait) {
  .bu-tv-films .bu-ft { --ft-h: 262px; }
  .bu-ft-cap { display: none; }
  .bu-ft-title { font-size: 30px; }
  .bu-ft-head { gap: 10px; margin-bottom: 10px; }
  .bu-ft-strip .bu-ft-stripcard { display: none; }
  .bu-ft-strip:not(:has(.bu-ft-face)) { display: none !important; }
  .bu-ft-tab { min-height: 38px; }
  .bu-ft-bt { font-size: 21px; }
  .bu-ft-info .bu-ft-st { display: none; }
  .bu-ft-small .bu-ft-credit { display: none; }
}
/* a phone on its side (and other short screens): a low row, the words on one line */
@media (orientation: landscape) and (max-height: 500px) {
  .bu-tv-films .bu-ft { --ft-h: min(232px, max(150px, calc(100vh - var(--header-h) - var(--tab-space, 0px) - 62px)));
    --ft-w: clamp(220px, 30vw, 300px); --ft-wo: min(620px, calc(100% - 120px)); --ft-media: .55; padding-top: calc(var(--header-h) + 8px); }
  .bu-ft-strip, .bu-ft-kicker, .bu-ft-cap, .bu-ft-hint, .bu-ft-myvote { display: none !important; }
  .bu-ft-head { flex-wrap: nowrap; align-items: center; margin-bottom: 8px; }
  .bu-ft-title { font-size: 26px; }
  .bu-ft-tabs { width: auto; }
  .bu-ft-tab { min-height: 38px; }
  .bu-ft-num { font-size: 92px; top: calc(var(--ft-h) * var(--ft-media) - 66px); }
  .bu-ft-bt { font-size: 22px; }
  .bu-ft-info { bottom: 14px; gap: 6px; }
  .bu-ft-info .bu-ft-fight, .bu-ft-info .bu-ft-st, .bu-ft-bigtop { display: none; }
  .bu-ft-acts .bu-ft-watch, .bu-ft-acts .bu-film-react, .bu-ft-acts .bua-vote, .bu-ft-icon { min-height: 40px; }
  .bu-ft-row { padding-bottom: 14px; }
  .bu-ft-bt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bu-ft-small .bu-ft-t { -webkit-line-clamp: 1; }
}
/* a small phone on its side (568x320): only the tabs above the row, the card's own words cut to the essentials */
@media (orientation: landscape) and (max-height: 360px) {
  .bu-ft-headcopy { display: none; }
  .bu-ft-head { justify-content: flex-start; }
  .bu-ft-info .bu-ft-credit, .bu-ft-small .bu-ft-credit { display: none; }
  .bu-ft-wdur, .bu-ft-acts .bu-ft-share { display: none; }
  .bu-ft-num { font-size: 72px; top: calc(var(--ft-h) * var(--ft-media) - 52px); }
}
/* tall wide screens (an ultrawide or 4K monitor): taller tiles, the open one wider */
@media (min-width: 1800px) and (min-height: 1000px) {
  .bu-tv-films .bu-ft { --ft-h: clamp(340px, 22vw, 420px); --ft-w: clamp(300px, 15vw, 380px); --ft-wo: min(1040px, calc(100% - var(--ft-w) * .6 - var(--ft-num))); }
}
@media (hover: none) {
  .bu-ft-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bu-ft-item, .bu-ft-media, .bu-ft-card, .bu-ft-poster, .bu-ft-info, .bu-ft-big, .bu-ft-pill, .bu-ft-amb img { transition: none !important; }
  .bu-ft-row.is-in .bu-ft-item, .bu-ft-item.is-open .bu-ft-poster, .bu-ft-swap, .bu-ft-skel { animation: none !important; }
}
/* the open tile's dates: the fight's and the film's (films-watch.js; a date the film does not carry yet: red sample) */
.bu-ft-info .bu-ft-dates { font-size: 12px; }
@media (max-width: 760px) { .bu-ft-info .bu-ft-dates { gap: 2px 10px; font-size: 11px; } .bu-ft-info .bu-ft-dates .bu-fw-dk { display: none; } }
@media (max-width: 760px) and (max-height: 700px) and (orientation: portrait) { .bu-ft-info .bu-ft-dates { display: none; } }
@media (orientation: landscape) and (max-height: 500px) { .bu-ft-info .bu-ft-dates { display: none; } }
/* the whole film plays under the row (films-watch.js) */
.bu-ft-top > .bu-fw { position: relative; z-index: 2; }
/* a phone: the open tile's first badge only (the day's / the fight's; "official" is in its credit) - two lines of badges
   ran into the title on the lowest phones */
@media (max-width: 760px) { .bu-ft-bigtop .bu-ft-badges { flex-wrap: nowrap; } .bu-ft-bigtop .bu-ft-badges > .bu-ft-badge + .bu-ft-badge { display: none; } }
/* the open tile's Copy link, Download, Share (films-watch.js): the same round-cornered icons as its info button; a phone
   held upright stacks them at the card's right edge (the words keep the rest of the width) */
.bu-ft-tools { gap: 10px; }
.bu-ft-tools .bu-fq-btn { width: 44px; height: 44px; border-color: var(--line-3); background: rgba(21, 25, 35, .8); color: #fff; }
.bu-ft-tools .bu-fq-btn .bu-ic { width: 18px; height: 18px; }
@media (max-width: 760px) and (orientation: portrait) {
  .bu-ft-info { right: 64px; }
  .bu-ft-acts .bu-ft-wdur { display: none; }
  .bu-ft-tools { position: absolute; right: -54px; bottom: 0; flex-direction: column; gap: 8px; }
  .bu-ft-tools .bu-fq-btn { width: 42px; height: 42px; border-color: rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(8, 9, 13, .62);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
/* a phone on its side / a low window: the three stand right above the words, at the left (the badges' band is free
   there - the badges hide; the preview's play button keeps the right), so the row under the words stays one line */
@media (orientation: landscape) and (max-height: 500px) {
  .bu-ft-tools { position: absolute; left: 0; bottom: calc(100% + 8px); gap: 8px; }
  .bu-ft-tools .bu-fq-btn { width: 40px; height: 40px; border-color: rgba(255, 255, 255, .3); background: rgba(8, 9, 13, .62);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
/* the lowest window (a 400% zoom): no room above the words - the three take the heart's place in the row (the heart
   stays on the list's tile) */
@media (orientation: landscape) and (max-height: 300px) {
  .bu-ft-tools { position: static; }
  .bu-ft-acts .bu-ft-like { display: none; }
}
/* a wide screen: Copy link says its name (the open tile's row has the room) */
@media (min-width: 1500px) and (orientation: landscape) {
  .bu-ft-tools .bu-fq-btn.is-link { width: auto; padding: 0 14px 0 12px; }
  .bu-ft-tools .bu-fq-btn.is-link .bu-fq-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
/* the game's badges (Viral Corner FILMY 1:1): the kind top left, the format top right of a tile's picture; the row's own
   badges (the day's film, official) bottom left over the length's row; the open tile carries them all in its top line */
.bu-ft-kind { position: absolute; z-index: 2; top: 10px; left: 10px; display: flex; max-width: calc(100% - 76px); }
.bu-ft-fmt { position: absolute; z-index: 2; top: 10px; right: 10px; }
.bu-ft-media > .bu-ft-badges { top: auto; bottom: 9px; right: 64px; flex-wrap: wrap-reverse; }
.bu-ft-item.is-open .bu-ft-kind, .bu-ft-item.is-open .bu-ft-fmt { opacity: 0; visibility: hidden; }
.bu-ft-bigtop .bu-ft-gbadges { display: contents; }
.bu-ft-bigtop .bu-kind, .bu-ft-bigtop .bu-fmt { height: 24px; }
/* the open tile's title: the fight, then the deck on its red plate */
.bu-ft-bt .bu-ft-deck { margin-left: 10px; font-size: 12px; vertical-align: .3em; }
@media (max-width: 760px) {
  .bu-ft-bt .bu-ft-deck { margin-left: 6px; font-size: 10.5px; }
}
/* the narrowest phones (280-360 px): the open tile's credit keeps its name readable - "Film by" steps aside */
@media (max-width: 360px) and (orientation: portrait) { .bu-ft-info .bu-ft-role { display: none; } .bu-ft-info .bu-ft-name { min-width: 48px; } }