/* Preview-only library; original home remains intact behind this view. */
.rp-extra-filter { background: #17191f; color: #e9e9ef; border: 1px solid #373944; border-radius: 6px; padding: 11px 12px; min-width: 120px; flex: 1; width: 120px; font: inherit; }
.rp-ratings { display: block; color: #ddd3aa; font-size: 11px; margin-top: 7px; }
.rp-owner { color: #a9abb7; display: block; margin-top: 6px; font-size: 11px; }
#bu-home.rp-active > :not(#bu-replays-preview) { display: none !important; }
#bu-replays-preview { --rp-red: #ff343c; --rp-muted: #a6a8b2; width: min(var(--page-max, 1640px), 100%); margin: 0 auto; padding: calc(var(--header-h, 64px) / var(--ui-zoom, 1) + 30px) clamp(18px, 3.4vw, 60px) 80px; color: #f7f7f7; zoom: var(--ui-zoom, 1); }
#bu-replays-preview[hidden], #bu-replays-preview [hidden] { display: none !important; }
.rp-page * { box-sizing: border-box; }
.rp-page button, .rp-page input, .rp-page select { font: inherit; }
.rp-page button, .rp-page a { -webkit-tap-highlight-color: transparent; }
.rp-page a { color: inherit; text-decoration: none; }
.rp-page button { cursor: pointer; color: inherit; }
.rp-page button:focus-visible, .rp-page a:focus-visible, .rp-page input:focus-visible, .rp-page select:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rp-heading { margin-bottom: 23px; }
.rp-eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font: 700 10px var(--font-display); letter-spacing: 1.8px; }
.rp-eyebrow b { background: var(--rp-red); border-radius: 4px; padding: 2px 5px; letter-spacing: 0; }
.rp-eyebrow > span { color: var(--rp-red); padding-left: 10px; }
.rp-heading h1 { font: 700 clamp(25px, 3vw, 43px)/1.1 var(--font-display); letter-spacing: -.6px; margin: 0 0 9px; }
.rp-intro { font-size: 13px; color: var(--rp-muted); margin: 0; }
.rp-hero { position: relative; isolation: isolate; min-height: 276px; overflow: hidden; border: 1px solid #ffffff22; border-radius: 13px; background: #171819; }
.rp-media { position: relative; overflow: hidden; background: radial-gradient(ellipse at 70% 35%, #454650, #191a20 65%, #111215); aspect-ratio: 16/9; }
.rp-image, .rp-motion { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; }
.rp-image { transition: transform .4s, opacity .3s; }
.rp-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #050608a8, transparent 70%); }
.rp-hero-media { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.rp-hero-media .rp-image { object-position: 68% 43%; opacity: .85; }
.rp-hero-media::after { background: linear-gradient(90deg, #090a0cf5 0%, #090a0cc9 36%, #090a0c29 72%, #090a0c55), linear-gradient(0deg, #090a0c70, transparent); }
.rp-hero-media .rp-media-mark, .rp-hero-media .rp-media-label { display: none; }
.rp-hero-copy { max-width: 850px; padding: 27px 34px 32px; }
.rp-kicker { display: flex; flex-wrap: wrap; gap: 16px; font: 600 10px var(--font-display); letter-spacing: 1.8px; color: #ffce76; margin-bottom: 15px; }
.rp-kicker span:last-child { color: #bab8b8; }
.rp-hero-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 15px; max-width: 710px; font: 700 clamp(28px, 3.1vw, 44px)/1.18 var(--font-display); text-transform: uppercase; }
.rp-hero-names small { font: 600 13px var(--font-display); color: #ff545b; }
.rp-hero-meta { margin: 14px 0 19px; color: #cacbd1; font-size: 12px; }
.rp-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rp-button { display: inline-flex; justify-content: center; align-items: center; min-height: 43px; padding: 10px 20px; border-radius: 6px; border: 1px solid #ffffff3b; font: 600 12px var(--font-display) !important; text-transform: uppercase; letter-spacing: .35px; transition: background .2s, transform .2s; }
.rp-primary { background: var(--rp-red); border-color: var(--rp-red); box-shadow: 0 5px 24px #ff343c23; }
.rp-primary:hover { background: #ff555c; transform: translateY(-1px); }
.rp-secondary { background: #101115bb; }
.rp-secondary:hover { background: #2a2b31; }
.rp-hero-caption { position: absolute; right: 22px; bottom: 21px; color: #ffffffa0; font: 500 9px var(--font-display); letter-spacing: 1.5px; }
.rp-library { margin-top: 27px; }
.rp-library-head, .rp-library-name { display: flex; align-items: center; gap: 12px; }
.rp-library-head { justify-content: space-between; margin-bottom: 15px; }
.rp-library-head h2 { margin: 0; font: 600 18px var(--font-display); letter-spacing: .6px; }
.rp-count { font-size: 11px; color: var(--rp-muted); }
.rp-open-file { padding: 6px 0 6px 12px; border: 0; background: none; font-size: 11px !important; color: #c4c5cb !important; }
.rp-open-file:hover { color: #fff !important; }
.rp-tools { background: #0b0c0feF; border-top: 1px solid #ffffff13; margin-bottom: 20px; }
.rp-modes { display: flex; gap: 25px; border-bottom: 1px solid #ffffff17; padding: 0 3px; }
.rp-modes button { border: 0; border-bottom: 2px solid transparent; padding: 15px 2px 12px; background: none; font: 600 12px var(--font-display); text-transform: uppercase; color: #91929c; }
.rp-modes button.is-active { border-color: var(--rp-red); color: #fff; }
.rp-search-row { display: flex; gap: 9px; margin-top: 15px; }
.rp-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 13px; background: #131419; border: 1px solid #ffffff14; border-radius: 6px; }
.rp-search span { font-size: 23px; color: #858692; }
.rp-search input { width: 100%; border: 0; color: #fff; font-size: 12px; background: none; min-height: 41px; outline-offset: 0; }
.rp-search input::placeholder { color: #8f909a; }
.rp-page select { background: #15161b; color: #cfd0d6; border: 1px solid #ffffff1b; border-radius: 6px; font-size: 11px; padding: 0 12px; min-height: 41px; max-width: 220px; }
.rp-filter-toggle { background: #15161b; border: 1px solid #ffffff1b; border-radius: 6px; padding: 0 15px; font-size: 12px !important; }
.rp-filter-toggle.is-active { border-color: #ff343c80; }
.rp-views { display: flex; padding: 3px; background: #15161b; border: 1px solid #ffffff1b; border-radius: 6px; }
.rp-views button { width: 34px; border: 0; border-radius: 4px; background: none; color: #878892; font-size: 20px; }
.rp-views button[aria-pressed="true"] { background: #33353d; color: #fff; }
.rp-source-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; }
.rp-sources { display: flex; gap: 5px; }
.rp-sources button { background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 5px 9px; font-size: 10px; color: #a5a6b0; }
.rp-sources button[aria-pressed="true"] { background: #26272d; border-color: #ffffff12; color: #fff; }
.rp-spoilers { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #b7b8c2; cursor: pointer; }
.rp-spoilers input { accent-color: var(--rp-red); width: 14px; height: 14px; }
.rp-more { display: flex; gap: 8px; flex-wrap: wrap; padding: 13px 0 0; }
.rp-more select { flex: 1; }
.rp-more small { align-self: center; font-size: 10px; color: #e1b46a; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 17px; }
.rp-card { min-width: 0; display: grid; grid-template-columns: 1fr auto; overflow: hidden; border: 1px solid #ffffff18; border-radius: 9px; background: #131419; transition: border-color .2s, transform .2s; }
.rp-card:hover { border-color: #ffffff44; }
.rp-card-visual { display: block; grid-column: 1 / -1; }
.rp-media-open { position: absolute; inset: 0; z-index: 2; }
.rp-card-visual:hover .rp-image { transform: scale(1.035); }
.rp-media-mark { position: absolute; right: 15px; bottom: 25px; font: 700 55px/1 var(--font-display); opacity: .13; }
.rp-media-label { position: absolute; left: 11px; top: 10px; z-index: 1; font: 600 8px var(--font-display); letter-spacing: .7px; padding: 3px 5px; background: #0a0b0c88; border-radius: 3px; }
.rp-duration { position: absolute; z-index: 2; right: 9px; bottom: 9px; padding: 3px 5px; border-radius: 3px; background: #050505bb; font-size: 10px; }
.rp-play { position: absolute; inset: 0; z-index: 2; margin: auto; width: 37px; height: 37px; display: grid; place-items: center; padding-left: 2px; background: #15161970; border: 1px solid #ffffff66; border-radius: 50%; font-size: 11px; backdrop-filter: blur(5px); }
.rp-preview { position: absolute; bottom: 10px; left: 10px; z-index: 3; padding: 5px 8px; border: 1px solid #ffffff40; border-radius: 4px; background: #050505aa; font-size: 10px !important; }
.rp-hero-media .rp-preview { left: auto; right: 18px; bottom: auto; top: 18px; }
.rp-card-body { grid-column: 1 / -1; padding: 13px 13px 6px; }
.rp-card-tags { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.rp-badge { color: #b0b1ba; font: 600 8px var(--font-display); text-transform: uppercase; letter-spacing: .55px; }
.rp-official { color: #e9c278; }
.rp-tag-mode { color: #858692; font-size: 9px; border-left: 1px solid #ffffff22; padding-left: 7px; }
.rp-card-names { display: flex; flex-direction: column; font: 600 18px/1.35 var(--font-display); overflow-wrap: anywhere; }
.rp-card-names small { font: 600 8px var(--font-display); letter-spacing: 1px; color: #ff686e; margin: 3px 0; }
.rp-card-details { display: flex; align-items: center; gap: 8px; font-size: 9px; color: #92949f; margin-top: 10px; min-height: 14px; }
.rp-result-tag { font-size: 8px; color: #d7b788; }
.rp-date { align-self: center; padding: 7px 0 10px 13px; font-size: 10px; color: #93949e; }
.rp-card-actions { padding: 5px 9px 9px 0; display: flex; align-items: center; justify-content: end; gap: 5px; }
.rp-info { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; border: 1px solid #ffffff28; background: #14161b80; font: italic 600 13px Georgia, serif !important; }
.rp-info:hover { border-color: #ffffff99; }
.rp-like { border: 0; background: none; padding: 6px 4px; font-size: 12px !important; white-space: nowrap; color: #b0b1bc !important; }
.rp-like.is-liked { color: #ff5c65 !important; }
.rp-like:disabled { opacity: .45; cursor: default; }
.rp-list-mode, .rp-list-duration { display: none; }
.rp-empty { grid-column: 1 / -1; display: flex; align-items: center; flex-direction: column; gap: 18px; border: 1px dashed #ffffff24; padding: 45px 20px; border-radius: 8px; color: #a9abb5; }
.rp-columns { display: grid; grid-template-columns: minmax(230px, 1fr) 115px 125px 85px 112px; padding: 0 14px 10px 154px; font-size: 10px; color: #858793; }
.rp-list { display: flex; flex-direction: column; gap: 8px; }
.rp-list .rp-card { display: grid; grid-template-columns: 126px minmax(230px, 1fr) 115px 125px 85px 112px; align-items: center; min-height: 88px; padding-right: 14px; }
.rp-list .rp-card-visual { grid-column: auto; min-width: 0; align-self: stretch; }
.rp-list .rp-media { min-height: 88px; height: 100%; width: 100%; aspect-ratio: auto; }
.rp-list .rp-media-label, .rp-list .rp-preview, .rp-list .rp-media-mark, .rp-list .rp-duration { display: none; }
.rp-list .rp-card-body { grid-column: auto; min-width: 0; padding: 11px 15px; }
.rp-list .rp-card-tags { margin-bottom: 6px; }
.rp-list .rp-tag-mode { display: none; }
.rp-list .rp-card-names { flex-direction: row; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 15px; }
.rp-list .rp-card-details { margin-top: 5px; }
.rp-list .rp-date { padding: 0; font-size: 11px; }
.rp-list .rp-card-actions { padding: 0; }
.rp-list .rp-list-mode, .rp-list .rp-list-duration { display: block; color: #a9aab6; font-size: 11px; }
@media (min-width: 1800px) { #bu-replays-preview { padding-top: calc(var(--header-h, 64px) / var(--ui-zoom, 1) + 36px); } .rp-hero { min-height: 292px; } }
@media (max-width: 1100px) { .rp-list .rp-card { grid-template-columns: 108px minmax(180px, 1fr) 92px 104px 60px 88px; } .rp-columns { grid-template-columns: minmax(180px, 1fr) 92px 104px 60px 88px; padding-left: 137px; } }
@media (max-width: 800px) { .rp-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; } .rp-hero { min-height: 270px; } .rp-hero-copy { padding: 26px; max-width: 85%; } .rp-hero-caption { display: none; } .rp-hero-names { font-size: 32px; } .rp-hero-media::after { background: linear-gradient(90deg, #090a0cee, #090a0c80 65%, #090a0c40); } .rp-list .rp-card { grid-template-columns: 105px minmax(0, 1fr) auto; padding: 0 10px 0 0; gap: 0; } .rp-list .rp-card-visual { grid-row: 1 / 3; } .rp-list .rp-card-body { grid-column: 2; grid-row: 1; padding: 12px 12px 4px; } .rp-list .rp-date { grid-column: 2; grid-row: 2; padding: 0 12px 11px; font-size: 9px; } .rp-list .rp-card-actions { grid-column: 3; grid-row: 1 / 3; flex-direction: column; } .rp-list .rp-list-mode, .rp-list .rp-list-duration, .rp-columns { display: none !important; } .rp-list .rp-tag-mode, .rp-list .rp-duration { display: inline; } }
@media (max-width: 540px) { #bu-replays-preview { padding-top: calc(var(--header-h, 64px) + 22px); } .rp-heading h1 { font-size: 28px; } .rp-intro { font-size: 12px; line-height: 1.65; } .rp-hero { min-height: 280px; border-radius: 9px; } .rp-hero-copy { padding: 22px 20px; max-width: none; } .rp-kicker { font-size: 8px; gap: 10px; } .rp-hero-names { font-size: 30px; gap: 6px 9px; max-width: 90%; } .rp-hero-names small { font-size: 10px; } .rp-hero-meta { max-width: 220px; font-size: 10px; line-height: 1.6; } .rp-hero-actions { gap: 7px; } .rp-button { padding: 10px 13px; font-size: 11px !important; } .rp-hero-media .rp-preview { top: auto; bottom: 13px; right: 12px; font-size: 8px !important; } .rp-hero-media .rp-image { object-position: 67% center; opacity: .6; } .rp-library-head { align-items: start; gap: 10px; } .rp-library-name { flex-wrap: wrap; gap: 4px 8px; } .rp-library-head h2 { font-size: 17px; } .rp-count { font-size: 9px; } .rp-open-file { font-size: 9px !important; max-width: 125px; padding-top: 3px; line-height: 1.5; text-align: right; } .rp-modes { gap: 0; justify-content: space-between; } .rp-modes button { font-size: 11px; padding: 14px 3px 11px; } .rp-search-row { flex-wrap: wrap; } .rp-search { flex-basis: 100%; } .rp-search-row > select { flex: 1; max-width: none; } .rp-views button { width: 34px; } .rp-filter-toggle { padding: 0 12px; } .rp-source-row { align-items: start; flex-wrap: wrap; gap: 12px; } .rp-sources { gap: 1px; } .rp-sources button { font-size: 10px; padding: 7px 8px; } .rp-spoilers { margin-left: auto; font-size: 10px; min-height: 26px; } .rp-more select { min-width: calc(50% - 8px); max-width: none; } .rp-card-body { padding: 11px 10px 5px; } .rp-card-tags { gap: 4px; flex-wrap: wrap; } .rp-badge, .rp-tag-mode { font-size: 8px; } .rp-card-names { font-size: 16px; } .rp-card-details { font-size: 8px; flex-wrap: wrap; gap: 3px; } .rp-date { padding-left: 10px; font-size: 8px; } .rp-card-actions { padding-right: 5px; gap: 0; } .rp-info { width: 29px; min-width: 29px; height: 29px; } .rp-like { font-size: 11px !important; } .rp-media-label { font-size: 6px; left: 7px; top: 7px; } .rp-media-mark { font-size: 38px; } .rp-preview { font-size: 8px !important; padding: 5px; left: 6px; bottom: 7px; } .rp-duration { font-size: 8px; right: 5px; bottom: 7px; } .rp-grid { gap: 10px; } .rp-list .rp-card-names { flex-direction: column; gap: 0; font-size: 14px; } .rp-list .rp-card-names small { margin: 2px 0; } .rp-list .rp-card { grid-template-columns: 90px minmax(0, 1fr) 36px; } .rp-list .rp-media { min-height: 126px; } .rp-list .rp-card-tags { margin-bottom: 5px; } }
@media (prefers-reduced-motion: reduce) { .rp-page *, .rp-page *::before, .rp-page *::after { transition: none !important; animation: none !important; } }
@media (pointer: coarse) { .rp-page .rp-info, .rp-page .rp-like, .rp-views button { min-width: 44px; min-height: 44px; } .rp-modes button, .rp-sources button { min-height: 42px; } .rp-grid .rp-date { grid-column: 1 / -1; padding-bottom: 0; } .rp-grid .rp-card-actions { grid-column: 1 / -1; justify-content: space-between; padding: 0 8px 4px; } .rp-list .rp-card { grid-template-columns: 90px minmax(0, 1fr) 44px; } .rp-preview { min-height: 34px; } }

/* Responsiveness (Tools/RESPONSIVE_TRACKER.md): readable minimums for every label - small print on a card is
   still read on a phone at arm's length - and a toolbar that keeps its controls on as few rows as they need. */
.rp-eyebrow, .rp-kicker { font-size: 11px; }
.rp-intro { font-size: 14px; line-height: 1.6; }
.rp-count, .rp-open-file { font-size: 12px !important; }
.rp-sources button, .rp-spoilers { font-size: 12px; }
.rp-media-label { font-size: 10px; padding: 4px 6px; }
.rp-duration, .rp-preview { font-size: 11px !important; }
.rp-badge { font-size: 10px; }
.rp-tag-mode { font-size: 11px; }
.rp-card-names small { font-size: 10px; }
.rp-card-details { font-size: 11px; }
.rp-result-tag { font-size: 10.5px; }
.rp-date { font-size: 11.5px; }
.rp-owner, .rp-ratings { font-size: 12px; }
.rp-hero-caption { font-size: 11px; }
.rp-more small, .rp-columns { font-size: 11px; }
.rp-search-row > select { min-width: 0; }
.rp-modes button { min-width: 44px; }
@media (max-width: 800px) {
  .rp-hero-meta { font-size: 12px; }
  .rp-card-body { padding: 14px 14px 6px; }
  .rp-card-names { font-size: 20px; }
  .rp-date { padding-left: 14px; }
  .rp-list .rp-date { font-size: 11px; }
}
@media (max-width: 540px) {
  .rp-heading { margin-bottom: 18px; }
  .rp-library { margin-top: 20px; }
  .rp-search-row { gap: 8px; }
  .rp-source-row { margin-top: 10px; }
  .rp-media-label { font-size: 9.5px; left: 9px; top: 9px; }
  .rp-kicker { font-size: 10.5px; }
}
@media (max-width: 540px) {
  .rp-heading h1 { margin-bottom: 6px; }
  .rp-intro { font-size: 13.5px; line-height: 1.5; }
  .rp-library-head { align-items: center; margin-bottom: 8px; }
  .rp-open-file { max-width: none; white-space: nowrap; padding-top: 0; }
  .rp-tools { margin-bottom: 14px; }
  .rp-search-row { margin-top: 10px; }
  .rp-sources button { padding: 6px 7px; }
  .rp-spoilers { min-height: 34px; }
  .rp-media-label { font-size: 10px; }
}
/* A phone on its side: the library's controls on the first screen - the heading shrinks, its intro waits */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 480px) {
  #bu-replays-preview { padding-top: calc(var(--header-h, 52px) + 14px); }
  .rp-eyebrow, .rp-intro { display: none; }
  .rp-heading { margin-bottom: 8px; }
  .rp-heading h1 { font-size: 24px; margin: 0; }
  .rp-library { margin-top: 8px; }
  .rp-library-head { margin-bottom: 6px; }
  .rp-modes button { padding: 10px 2px 8px; }
  .rp-search-row { margin-top: 8px; }
  .rp-source-row { margin-top: 8px; }
}
/* A phone of ordinary height or less: the library starts on the first screen (UNDERDOG_TV_PLAN §2: "na telefonie nie
   odsuwa biblioteki") - the heading's intro waits for taller phones, the source and spoiler controls share a row */
@media (max-width: 540px) {
  .rp-heading h1 { font-size: clamp(24px, 7.4vw, 28px); }
  .rp-source-row { align-items: center; gap: 4px 8px; }
  .rp-sources { flex-wrap: wrap; }
}
@media (max-width: 540px) and (max-height: 760px) {
  .rp-intro { display: none; }
  .rp-heading { margin-bottom: 12px; }
  .rp-library { margin-top: 14px; }
}
/* Phones: the search with its filters, then the sort with the view switch. Touch screens get 16px fields
   (style.css, iOS zooms in on smaller ones), so the sort takes the row's width - its longest Polish option
   ("Najczęściej oglądane") fits whole from 344px (Galaxy Fold cover) up. The markup order follows this reading order. */
@media (max-width: 540px) {
  .rp-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .rp-search-row > select { max-width: none; padding: 0 8px 0 10px; }
}
/* the narrowest phones with height to spare (Galaxy Fold cover 280x653): the sort on a row of its own, the view
   switch under it; a short one (320x568) keeps two rows so the first card stays on the first screen */
@media (max-width: 330px) and (min-height: 600px) {
  .rp-search-row > select { grid-column: 1 / -1; }
  .rp-views { grid-column: 1 / -1; justify-self: end; }
}



/* =====================================================================================================================
   The page after Damian's concept (2026-09-28): the library leads. Its heading over a still of the fight; a band that
   proves the replays are 3D (the orbit, replays-preview.js buildBand); one bar of filters; cards with the replay of
   the week in gold. This layer comes last and restyles the rules above.
   ===================================================================================================================== */
#bu-replays-preview { --rp-gold: #e9b949; --rp-line: #ffffff17; --rp-card: #111318; }

/* the heading: 3D REPLAYS / THE FIGHT LIBRARY / count + open a file, the fighters behind, three lines on the right */
.rp-lib-head { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(210px, 19vw, 290px); margin: 0 0 18px; padding: 0 clamp(22px, 3vw, 44px); overflow: hidden;
  border-radius: 16px; background: #0a0b0e; }
.rp-lib-bg { position: absolute; inset: 0; z-index: -1; }
.rp-lib-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.rp-lib-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #08090cf5 0%, #08090cc7 28%, #08090c33 55%, transparent 72%, #08090c80 100%), linear-gradient(0deg, #08090c99 0%, transparent 40%); }
.rp-lib-copy { position: relative; }
.rp-lib-eyebrow { margin: 0 0 6px; font: 700 clamp(15px, 1.2vw, 19px) var(--font-display); letter-spacing: 3px; color: var(--rp-red); }
.rp-lib-head h1 { margin: 0 0 10px; font: 700 clamp(40px, 4.6vw, 72px)/.98 var(--font-display); letter-spacing: -.5px; text-transform: uppercase; }
.rp-lib-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.rp-lib-row .rp-count { font-size: clamp(16px, 1.4vw, 22px) !important; color: #d3d4da; }
#bu-replays-preview .rp-open-file { min-height: 46px; padding: 11px 20px !important; border: 1px solid var(--rp-red); border-radius: 8px; background: var(--rp-red); font-size: 14px !important; text-transform: none; color: #fff !important; box-shadow: 0 8px 26px #ff343c33; }
#bu-replays-preview .rp-open-file:hover { background: #ff555c; }
.rp-lib-tag { position: absolute; right: clamp(24px, 3.4vw, 60px); top: 50%; margin: 0; transform: translateY(-50%) rotate(-7deg); font: italic 600 clamp(14px, 1.25vw, 20px)/1.7 var(--font-display);
  letter-spacing: 3px; color: #ffffffb8; text-shadow: 0 4px 18px #000; pointer-events: none; }

/* the 3D band: the words and three features | the orbit (drag it) | the camera around the ring | one line */
.rp-3d { display: grid; grid-template-columns: minmax(270px, 1fr) minmax(320px, 1.25fr) minmax(190px, .62fr) minmax(130px, .46fr); align-items: center; gap: 0 clamp(14px, 1.6vw, 26px);
  min-height: 210px; margin: 0 0 22px; padding: 0 clamp(18px, 2vw, 30px); overflow: hidden; border: 1px solid #ffffff1f; border-radius: 14px;
  background: radial-gradient(60% 120% at 50% 50%, #1b1d24 0%, #101217 60%, #0c0d11 100%); }
.rp-3d-copy { padding: 22px 0; }
.rp-3d-title { margin: 0 0 6px; font: 700 clamp(21px, 1.8vw, 32px)/1.05 var(--font-display); letter-spacing: -.2px; text-transform: uppercase; }
.rp-3d-line { margin: 0 0 18px; font-size: clamp(14px, 1.05vw, 16px); color: #d5d6dc; }
.rp-3d-feats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.rp-3d-feats li { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: #e4e5ea; }
.rp-3d-feats svg { width: 30px; height: 30px; padding: 6px; border-radius: 8px; border: 1px solid #ffffff24; background: #ffffff0a; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rp-orbit { position: relative; align-self: stretch; justify-self: stretch; width: calc(100% + 20px); min-height: 210px; margin: 0 -10px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); }
.rp-orbit:active { cursor: grabbing; }
.rp-orbit:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
.rp-orbit-poster, .rp-orbit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rp-orbit-poster { object-fit: cover; object-position: 50% 42%; }
.rp-orbit-poster:not([src]), .rp-orbit.is-live .rp-orbit-poster { visibility: hidden; }
.rp-orbit-ring { position: absolute; left: 6%; right: 6%; bottom: 14%; width: 88%; height: 34%; overflow: visible; pointer-events: none; transition: opacity .6s; }
.rp-orbit-back { fill: none; stroke: #ffffff4d; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rp-orbit-front, .rp-orbit-head { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px #000); }
.rp-orbit-360 { position: absolute; top: 16%; right: 16%; display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid #fff; border-radius: 50%; background: #0b0c10b3;
  font: 700 18px var(--font-display); color: #fff; pointer-events: none; }
.rp-orbit-drag { position: absolute; right: 18%; bottom: 3%; font: 600 11.5px var(--font-display); letter-spacing: 2.4px; color: #ffffffcc; pointer-events: none; text-shadow: 0 2px 8px #000; }
.rp-orbit.is-touched .rp-orbit-ring, .rp-orbit.is-touched .rp-orbit-drag { opacity: .35; }
.rp-3d-cam { position: relative; align-self: stretch; margin: 16px 0; padding: 10px 12px 6px; border: 1px solid #ffffff1c; border-radius: 10px; background: #0b0c10b3; }
.rp-3d-cam > span { display: block; font: 600 10.5px var(--font-display); letter-spacing: 1.6px; color: #9fa1ab; }
.rp-3d-cam svg { display: block; width: 100%; height: calc(100% - 16px); min-height: 110px; overflow: visible; }
.rp-ring-path { fill: none; stroke: #ffffff26; stroke-width: 1; stroke-dasharray: 3 4; }
.rp-ring-floor { fill: #ffffff0a; stroke: #ffffff59; stroke-width: 1.2; }
.rp-ring-post { stroke: #ffffffb3; stroke-width: 2.2; stroke-linecap: round; }
.rp-ring-rope { stroke: #ffffff8c; stroke-width: 1; }
.rp-ring-back { stroke: #ffffff47; }
.rp-ring-cam { fill: var(--rp-red); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 6px var(--rp-red)); transition: opacity .2s; }
.rp-ring-cam.is-behind { opacity: .55; }
.rp-3d-note { margin: 0; font-size: 14px; line-height: 1.55; color: #c2c4cc; }

/* the bar: Mode · Source · search · filters · Sort · view · hide results */
#bu-replays-preview .rp-tools { background: none; border: 0; margin-bottom: 18px; }
.rp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.rp-fgroup { display: flex; align-items: center; gap: 10px; }
.rp-flabel { font-size: 14px; color: #a3a5ae; }
#bu-replays-preview .rp-modes, #bu-replays-preview .rp-sources { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; }
#bu-replays-preview .rp-modes button, #bu-replays-preview .rp-sources button { min-height: 40px; padding: 0 16px; border: 1px solid #ffffff21; border-radius: 8px; background: #15171c;
  font: 600 13.5px var(--font-body, inherit); text-transform: none; letter-spacing: 0; color: #e2e3e8; transition: background-color .15s, border-color .15s; }
#bu-replays-preview .rp-modes button:hover, #bu-replays-preview .rp-sources button:hover { border-color: #ffffff55; }
#bu-replays-preview .rp-modes button.is-active, #bu-replays-preview .rp-sources button[aria-pressed="true"] { background: var(--rp-red); border-color: var(--rp-red); color: #fff; }
#bu-replays-preview .rp-search-row { display: flex; align-items: center; gap: 8px; flex: 1 1 300px; min-width: min(100%, 250px); margin: 0; }
#bu-replays-preview .rp-search { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 8px; background: #15171c; border-color: #ffffff21; }
#bu-replays-preview .rp-search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #9a9ca6; stroke-width: 1.8; stroke-linecap: round; }
#bu-replays-preview .rp-search input { min-height: 38px; font-size: 13.5px; }
#bu-replays-preview .rp-filter-toggle { display: grid; place-items: center; width: 40px; min-width: 40px; height: 40px; padding: 0; border-radius: 8px; background: #15171c; border-color: #ffffff21; }
#bu-replays-preview .rp-filter-toggle svg { width: 20px; height: 20px; fill: none; stroke: #e2e3e8; stroke-width: 1.8; stroke-linecap: round; }
#bu-replays-preview .rp-filter-toggle.is-active { border-color: var(--rp-red); }
#bu-replays-preview .rp-sortg select { min-height: 40px; min-width: 150px; border-radius: 8px; background-color: #15171c; border-color: #ffffff21; font-size: 13.5px; color: #e2e3e8; }
#bu-replays-preview .rp-views { height: 40px; padding: 3px; border-radius: 8px; background: #15171c; border-color: #ffffff21; }
#bu-replays-preview .rp-views button { display: grid; place-items: center; width: 34px; border-radius: 6px; }
#bu-replays-preview .rp-views svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#bu-replays-preview .rp-views button[aria-pressed="true"] { background: #33353d; color: #fff; }
#bu-replays-preview .rp-spoilers { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 13.5px; white-space: nowrap; color: #e2e3e8; cursor: pointer; }
/* the switch is the checkbox itself (its knob a gradient), so focus and clicks land on the control */
#bu-replays-preview .rp-spoilers input { -webkit-appearance: none; appearance: none; flex: none; width: 44px; height: 24px; margin: 0; border-radius: 999px; cursor: pointer;
  background: radial-gradient(circle at 12px 50%, #fff 0 8.5px, transparent 9.5px), #34363e; transition: background-color .2s; accent-color: var(--rp-red); }
#bu-replays-preview .rp-spoilers input:checked { background: radial-gradient(circle at 32px 50%, #fff 0 8.5px, transparent 9.5px), var(--rp-red); }
#bu-replays-preview .rp-spoilers input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#bu-replays-preview .rp-more { padding-top: 12px; }

/* the cards */
#bu-replays-preview .rp-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 244px), 1fr)); gap: 16px; }
#bu-replays-preview .rp-grid .rp-card { display: flex; flex-direction: column; border-radius: 14px; border-color: #ffffff1c; background: var(--rp-card); container-type: inline-size; }
#bu-replays-preview .rp-grid .rp-card:hover { border-color: #ffffff4a; transform: translateY(-2px); }
#bu-replays-preview .rp-grid .rp-card.rp-featured { border: 2px solid var(--rp-gold); box-shadow: 0 0 0 1px #e9b94933, 0 18px 50px #e9b9491f; }
#bu-replays-preview .rp-card-visual { position: relative; padding: 10px 10px 0; }
#bu-replays-preview .rp-grid .rp-media { border-radius: 10px; }
#bu-replays-preview .rp-card .rp-media-label, #bu-replays-preview .rp-card .rp-media-mark, #bu-replays-preview .rp-card .rp-play { display: none; }
#bu-replays-preview .rp-card .rp-duration { right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 6px; background: #000000c7; font: 700 13px var(--font-display) !important; letter-spacing: .5px; }
#bu-replays-preview .rp-card .rp-preview { left: 8px; bottom: 8px; border-radius: 6px; transition: opacity .2s; }
/* the preview button waits for the pointer (hovering plays it anyway); touch screens keep it */
@media (hover: hover) { #bu-replays-preview .rp-grid .rp-card .rp-preview { opacity: 0; } #bu-replays-preview .rp-grid .rp-card:hover .rp-preview, #bu-replays-preview .rp-grid .rp-card .rp-preview:focus-visible, #bu-replays-preview .rp-grid .rp-card .rp-preview[aria-pressed="true"] { opacity: 1; } }
.rp-flags { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px; pointer-events: none; }
.rp-flag-week { padding: 6px 10px; border-radius: 10px 0 8px 0; background: var(--rp-gold); font: 700 12px var(--font-display); letter-spacing: .5px; white-space: nowrap; text-transform: uppercase; color: #16110a; }
.rp-flag { display: inline-flex; align-items: center; gap: 5px; margin: 8px 8px 0 auto; padding: 4px 8px; border-radius: 6px; background: #0b0c10d9; border: 1px solid #ffffff33; font: 700 11px var(--font-display); letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.rp-flag:only-child { margin-left: 8px; margin-right: 0; }
.rp-flag-official { border-color: #e9b94980; color: var(--rp-gold); background: #1a1508e6; }
.rp-flag svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#bu-replays-preview .rp-card-body { padding: 14px 16px 4px; }
#bu-replays-preview .rp-title-link { display: block; min-height: 26px; padding: 2px 0; }
#bu-replays-preview .rp-grid .rp-card-names { display: block; margin: 0; overflow: hidden; font: 600 clamp(17px, 1.25vw, 19px)/1.25 var(--font-display); white-space: nowrap; text-overflow: ellipsis; color: #fff; }
.rp-card-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 13px; color: #b3b5be; }
.rp-card-meta span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rp-card-meta svg { flex: none; width: 15px; height: 15px; fill: none; stroke: #9a9ca6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rp-card-sub { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: #9a9ca6; }
.rp-card-sub .rp-sub-rounds::after { content: ""; display: inline-block; width: 1px; height: 12px; margin-left: 10px; vertical-align: -1px; background: #ffffff33; }
#bu-replays-preview .rp-card-sub .rp-like { margin-left: auto; padding: 4px 0 4px 6px; font-size: 13px !important; font-weight: 600; }
#bu-replays-preview .rp-card-details { flex-wrap: wrap; margin-top: 8px; font-size: 12px; }
#bu-replays-preview .rp-grid .rp-date { display: none; }
#bu-replays-preview .rp-grid .rp-card-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: auto; padding: 12px 16px 16px; }
#bu-replays-preview .rp-watch { min-height: 44px; border-radius: 8px; font-size: 14px !important; text-transform: none; letter-spacing: .3px; }
.rp-card-row2 { display: flex; gap: 8px; }
#bu-replays-preview .rp-film { flex: 1; min-width: 0; min-height: 40px; gap: 8px; padding: 8px 12px; border-radius: 8px; background: #16181d; border-color: #ffffff24; font-size: 13.5px !important; text-transform: none; }
.rp-studio { font: 600 10.5px var(--font-display); letter-spacing: 1.2px; color: #a3a5ae; }
.rp-pc { padding: 1px 5px; border: 1px solid #ffffff40; border-radius: 4px; font: 700 10px var(--font-display); letter-spacing: .6px; color: #c7c8cf; }
#bu-replays-preview .rp-card-row2 .rp-info { width: 40px; min-width: 40px; height: 40px; border-radius: 8px; font: 700 15px var(--font-display) !important; font-style: normal; letter-spacing: 1px; }
@container (max-width: 250px) { .rp-studio { display: none; } }
/* the list view keeps its columns: the name, then mode, date, length and the fight's menu */
#bu-replays-preview .rp-list .rp-card-meta, #bu-replays-preview .rp-list .rp-card-sub .rp-sub-date, #bu-replays-preview .rp-list .rp-watch, #bu-replays-preview .rp-list .rp-film, #bu-replays-preview .rp-list .rp-flags { display: none; }
#bu-replays-preview .rp-list .rp-card-names { font: 600 16px/1.3 var(--font-display); }
#bu-replays-preview .rp-list .rp-card-actions { display: flex; justify-content: flex-end; }
#bu-replays-preview .rp-list .rp-card-visual { padding: 0; }

/* the films the Studio makes by itself (after the library) */
.rp-auto { margin: clamp(30px, 3.4vw, 50px) 0; scroll-margin-top: calc(var(--header-h, 64px) / var(--ui-zoom, 1) + 16px); }
.rp-auto-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 16px; }
.rp-auto-head h2 { font: 700 clamp(22px, 2.2vw, 32px)/1 var(--font-display); letter-spacing: -.3px; margin: 0; }
.rp-auto-head p { margin: 0; font-size: 13.5px; color: var(--rp-muted); }
.rp-auto-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rp-auto-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 9 / 16; max-height: 460px; overflow: hidden; padding: 14px; border-radius: 12px;
  border: 1px solid #ffffff1f; background: #111215; transition: transform .2s, border-color .2s; scroll-margin: calc(var(--header-h, 64px) / var(--ui-zoom, 1) + 12px) 0 calc(var(--tab-space, 0px) + 12px); }
a.rp-auto-card:hover { transform: translateY(-3px); border-color: #ffffff5c; }
.rp-auto-media { position: absolute; inset: 0; background: #0b0c10 center / cover no-repeat; }
.rp-auto-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-auto-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #000000d9 0%, transparent 42%); }
.rp-auto-tag { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 4px 8px; border-radius: 5px; background: var(--rp-red); font: 700 10px var(--font-display); letter-spacing: 1.4px; color: #fff; }
.rp-auto-card b { position: relative; z-index: 1; font: 700 16px var(--font-display); letter-spacing: .4px; text-transform: uppercase; color: #fff; }
.rp-auto-soon { align-items: center; justify-content: center; gap: 8px; text-align: center; border-style: dashed; border-color: #ffffff38; background: radial-gradient(circle at 50% 38%, #ff343c24, transparent 62%), #0d0e11; }
.rp-auto-soon::after { display: none; }
.rp-auto-soon > span:last-child { font: 700 11px var(--font-display); letter-spacing: 1.6px; text-transform: uppercase; color: var(--rp-red); }
.rp-auto-note { font-size: 42px; line-height: 1; color: #ffffffb3; }
.rp-auto-foot { margin: 12px 0 0; font-size: 12px; color: var(--rp-muted); }

/* narrower computers: the band keeps the orbit and the camera, its closing line waits */
@media (max-width: 1279px) {
  .rp-3d { grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.2fr) minmax(170px, .6fr); }
  .rp-3d-note { display: none; }
  .rp-lib-tag { display: none; }
}
@media (max-width: 1023px) {
  .rp-3d { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .rp-3d-cam { display: none; }
  .rp-auto-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* phones: the heading short, the library first (the band comes after it, replays-preview.js placeBand), a bar of
   wrapping pills, one card a row */
@media (max-width: 760px) {
  .rp-lib-head { min-height: 150px; margin-bottom: 14px; padding: 18px; border-radius: 12px; }
  .rp-lib-bg img { object-position: 70% 30%; }
  .rp-lib-head h1 { font-size: clamp(30px, 9vw, 40px); margin-bottom: 8px; }
  .rp-lib-row { gap: 10px 16px; }
  #bu-replays-preview .rp-open-file { min-height: 44px; padding: 9px 14px !important; }
  .rp-bar { gap: 8px 8px; }
  .rp-fgroup { flex: 1 1 100%; gap: 8px; }
  .rp-flabel { display: none; }
  #bu-replays-preview .rp-modes, #bu-replays-preview .rp-sources { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  #bu-replays-preview .rp-modes button, #bu-replays-preview .rp-sources button { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 6px; font-size: clamp(11px, 3.2vw, 13px); white-space: nowrap; }
  /* the search with the view switch on a row, the sort with "hide results" on the next */
  #bu-replays-preview .rp-search-row { flex: 1 1 190px; order: 1; }
  #bu-replays-preview .rp-views { order: 2; }
  #bu-replays-preview .rp-sortg { order: 3; }
  #bu-replays-preview .rp-spoilers { order: 4; }
  #bu-replays-preview .rp-sortg { flex: 1 1 0; min-width: 0; }
  #bu-replays-preview .rp-sortg select { width: 100%; min-width: 0; max-width: none; }
  #bu-replays-preview .rp-spoilers { gap: 8px; font-size: 12.5px; }
  #bu-replays-preview .rp-grid { grid-template-columns: minmax(0, 1fr); }
  .rp-auto-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-auto-soon { aspect-ratio: auto; grid-column: 1 / -1; flex-direction: row; min-height: 64px; }
  .rp-auto-note { font-size: 28px; }
}
/* phones upright or on their side: the band after the library (replays-preview.js placeBand), in one column */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .rp-3d { grid-template-columns: minmax(0, 1fr); margin-top: 26px; padding: 0 16px 16px; }
  .rp-3d-copy { padding: 18px 0 8px; }
  .rp-orbit { width: calc(100% + 32px); min-height: 0; aspect-ratio: 16 / 10; max-height: 70svh; margin: 0 -16px; -webkit-mask-image: none; mask-image: none; }
  .rp-orbit-360 { width: 48px; height: 48px; font-size: 15px; top: 10px; right: 12px; }
  .rp-orbit-drag { right: 14px; bottom: 10px; }
  .rp-3d-cam { display: none; }
  .rp-3d-note { display: block; margin-top: 12px; font-size: 13px; }
}
/* a phone on its side: the heading shrinks to a line, the library starts on the first screen */
@media (orientation: landscape) and (max-height: 500px) {
  .rp-lib-head { min-height: 0; padding: 12px 16px; margin-bottom: 10px; }
  .rp-lib-eyebrow, .rp-lib-tag { display: none; }
  .rp-lib-head h1 { font-size: 24px; margin-bottom: 6px; }
  .rp-flabel { display: none; }
  /* the search first: it is the library's way in on this short screen */
  #bu-replays-preview .rp-bar > .rp-search-row, #bu-replays-preview .rp-bar > .rp-views { order: -1; }
}
@media (max-height: 300px) { .rp-orbit-360, .rp-orbit-drag { display: none; } }
@media (pointer: coarse) { #bu-replays-preview .rp-card-row2 .rp-info, #bu-replays-preview .rp-film { min-height: 44px; } #bu-replays-preview .rp-card-row2 .rp-info { width: 44px; } }