/* Cloud live discovery shares the approved preview presentation. */
.blp-real-ring { background: radial-gradient(ellipse at 50% 0, #89323755, transparent 72%), repeating-linear-gradient(0deg, transparent 0, transparent 46px, #ffffff07 47px, transparent 49px), #14161c; }
.blp-chip-live { background: #691b23; color: #ffd2d5; border-color: #ff4b5555; }
.blp-code-note { font-size: 11px; color: #a2a4af; line-height: 1.6; margin: 13px 0 0; }
.blp-mine { margin-top: 35px; border-top: 1px solid #ffffff18; padding-top: 22px; }
.blp-mine h2 { font: 600 24px var(--font-display); }
.blp-mine-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; margin-bottom: 12px; border: 1px solid #ffffff18; border-radius: 9px; background: #121319; }
.blp-mine-row strong { flex: 1 1 100%; font-size: 16px; }
.blp-archive-check { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; min-height: 44px; }
.blp-archive-check input { width: 20px; height: 20px; accent-color: #ff3440; }
.blp-mine-row .blp-chip { white-space: normal; }
#bu-livehub.bu-live-preview-active > :not(#bu-live-preview) { display: none !important; }
#bu-livehub.bu-live-preview-active { padding: 0 0 var(--tab-space, 0px); }
.blp-root { max-width: var(--page-max, 1600px); margin: auto; padding: calc(var(--header-h, 64px) / var(--ui-zoom, 1) + 20px) clamp(20px, 4vw, 72px) 60px; color: #f5f5f6; zoom: var(--ui-zoom, 1); }
.blp-root button, .blp-player button, .blp-root input, .blp-root select { font: inherit; }
.blp-root button, .blp-player button, .blp-root a { -webkit-tap-highlight-color: transparent; }
.blp-root button, .blp-player button { cursor: pointer; }
.blp-root :focus-visible, .blp-player :focus-visible { outline: 2px solid #ffdd83; outline-offset: 4px; }
.blp-hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 80px); padding: 30px 0 32px; }
.blp-kicker { color: #a9aab2; letter-spacing: .19em; font: 600 11px var(--font-mono); margin: 0 0 15px; }
.blp-kicker::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff3842; margin-right: 8px; }
.blp-title { font: 700 clamp(34px, 4.1vw, 67px)/1.07 var(--font-display); letter-spacing: -.03em; margin: 0 0 17px; }
.blp-title span { display: block; color: #ff3842; }
.blp-intro { max-width: 490px; color: #b9b9c2; font-size: 14px; line-height: 1.65; margin: 0; }
.blp-join { border: 1px solid #ffffff19; border-top: 2px solid #ff3842; border-radius: 12px; padding: 26px; background: radial-gradient(ellipse at 90% 0, #ad302519, transparent 65%), #141518; box-shadow: 0 15px 50px #0003; }
.blp-join h2 { margin: 0 0 17px; font: 600 25px var(--font-display); text-transform: uppercase; }
.blp-code-form { display: flex; gap: 8px; }
.blp-code-input { width: 100%; min-width: 0; border: 1px solid #ffffff25; border-radius: 7px; background: #090a0c; color: #fff; padding: 14px 12px; letter-spacing: .16em; text-transform: uppercase; font: 600 14px var(--font-mono) !important; }
.blp-code-input[aria-invalid] { border-color: #ff4b55; }
.blp-code-input::placeholder { font-size: 11px; color: #72747c; }
.blp-watch { border: 1px solid #ff414a; background: #ff3440; color: white; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; font: 600 13px var(--font-display) !important; text-transform: uppercase; white-space: nowrap; transition: background .15s, transform .15s; min-height: 44px; }
.blp-watch:hover { background: #ff5059; transform: translateY(-1px); }
.blp-watch .bu-ic { width: 15px; height: 15px; }
.blp-paste { border: 0; background: none; color: #c3c4cb; padding: 8px; font-size: 12px !important; }
.blp-code-demo { margin-top: 13px; font-size: 11px; color: #9698a3; }
.blp-code-sample { border: 0; padding: 4px; background: transparent; color: #f0cf89; letter-spacing: .08em; font: 600 11px var(--font-mono) !important; }
.blp-code-error { color: #ffc0c3; font-size: 12px; line-height: 1.5; margin: 8px 0 0; }
.blp-code-error:empty { display: none; }
.blp-preview-notice { display: flex; align-items: center; gap: 12px; color: #aaaab5; font-size: 11px; line-height: 1.5; padding: 13px 0; border-top: 1px solid #ffffff0e; border-bottom: 1px solid #ffffff0e; }
.blp-chip { display: inline-flex; gap: 5px; align-items: center; font: 600 10px var(--font-display); letter-spacing: .09em; text-transform: uppercase; line-height: 1.25; border-radius: 4px; padding: 5px 7px; background: #15171ddb; border: 1px solid #ffffff18; color: #e0e0e7; white-space: nowrap; }
.blp-chip-demo { background: #33281b; border-color: #dbac5935; color: #e4bc74; }
.blp-chip-gold { color: #efd69b; border-color: #ead99a35; }
.blp-catalog { margin-top: 30px; }
.blp-section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 21px; gap: 20px; }
.blp-section-heading h2 { font: 600 clamp(25px, 2.5vw, 36px) var(--font-display); margin: 0 0 3px; letter-spacing: -.02em; }
.blp-section-heading p { margin: 0; color: #92949d; font-size: 12px; }
.blp-result-count { font: 10px var(--font-mono); text-transform: uppercase; color: #9698a3; white-space: nowrap; }
.blp-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 18px; }
.blp-modes, .blp-selects { display: flex; gap: 7px; }
.blp-filter { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ffffff19; border-radius: 6px; min-height: 40px; padding: 9px 15px; background: #111217; color: #b6b8c0; font-size: 12px !important; text-decoration: none; white-space: nowrap; }
.blp-filter:hover { border-color: #ffffff45; color: white; }
.blp-filter.is-active { background: #f0f0f1; border-color: #f0f0f1; color: #111216; font-weight: 700; }
.blp-select { min-height: 40px; background: #111217; color: #b6b8c0; border: 1px solid #ffffff19; border-radius: 6px; padding: 8px 28px 8px 12px; font-size: 12px !important; max-width: 220px; }
.blp-select option { background: #15151b; }
.blp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }
.blp-card { border: 1px solid #ffffff18; border-radius: 11px; overflow: hidden; background: #111217; transition: border-color .18s, transform .18s; }
.blp-card:hover { border-color: #ffffff3a; transform: translateY(-2px); }
.blp-card.is-featured { border-color: #b18b473f; }
.blp-card-media { position: relative; isolation: isolate; height: clamp(180px, 15vw, 245px); overflow: hidden; background: #22252b; }
.blp-card-img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; opacity: .6; transition: transform .5s; }
.blp-card:hover .blp-card-img { transform: scale(1.035); }
.blp-card-media::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #090a0dea, #090a0d08 90%); }
.blp-card-img { z-index: -2; }
.blp-card-tags { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.blp-card-versus { position: absolute; left: 24px; right: 24px; bottom: 48px; display: flex; justify-content: space-between; align-items: center; gap: 14px; font: 600 clamp(20px, 2.2vw, 35px)/1.18 var(--font-display); text-transform: uppercase; }
.blp-card-versus span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.blp-card-versus span:last-child { text-align: right; }
.blp-card-versus small { color: #ff575f; font: 500 14px var(--font-display); }
.blp-card-bottom { position: absolute; bottom: 14px; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; }
.blp-viewers { display: inline-flex; align-items: center; gap: 7px; font: 10px var(--font-mono); color: #bfc0c7; }
.blp-viewers .bu-ic { width: 13px; height: 13px; }
.blp-card-body { padding: 17px 23px; }
.blp-card-caption { display: flex; justify-content: space-between; gap: 12px; color: #8e919b; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.blp-card-caption span:first-child { color: #d4bd91; }
.blp-card-stats { display: flex; justify-content: space-between; padding: 15px 0; }
.blp-fighter-stat { display: flex; flex-direction: column; gap: 5px; }
.blp-fighter-stat:last-child { text-align: right; }
.blp-fighter-stat strong { font: 500 18px var(--font-display); }
.blp-fighter-stat span { color: #8e919b; font-size: 10px; }
.blp-card-actions { display: flex; align-items: center; gap: 10px; border-top: 1px solid #ffffff0e; padding-top: 13px; }
.blp-card-actions .blp-watch { flex: 1; }
.blp-info { display: inline-flex; justify-content: center; align-items: center; gap: 7px; color: #d0d2d8; border: 1px solid #ffffff19; border-radius: 6px; background: #ffffff04; min-height: 44px; padding: 10px 12px; font-size: 11px !important; }
.blp-info .bu-ic { width: 16px; height: 16px; }
.blp-info:hover { color: #fff; border-color: #ffffff4d; }
.blp-empty { grid-column: 1/-1; padding: 40px; text-align: center; color: #aaa; border: 1px dashed #ffffff22; border-radius: 10px; }
.blp-films-footer { display: flex; align-items: center; justify-content: space-between; padding: 25px 0 0; margin-top: 30px; border-top: 1px solid #ffffff15; gap: 20px; }
.blp-films-footer h3 { font: 600 20px var(--font-display); margin: 0 0 5px; }
.blp-films-footer p { font-size: 12px; color: #8e919b; margin: 0; }
.blp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.blp-player-open { overflow: hidden; }
.blp-player { position: fixed; inset: 0; z-index: 6000; background: #090a0d; color: #f4f4f7; overflow: auto; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.blp-player-top { display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 12px 23px; border-bottom: 1px solid #ffffff14; flex-shrink: 0; }
.blp-player-back { border: 0; background: transparent; color: #e3e4e8; display: inline-flex; align-items: center; gap: 9px; font-size: 12px !important; min-height: 40px; }
.blp-player-back .bu-ic { width: 17px; height: 17px; }
.blp-player-brand { margin-left: auto; letter-spacing: .15em; font: 600 12px var(--font-display); color: #7f828d; }
.blp-player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; flex: 1; min-height: 0; }
.blp-screen { position: relative; background: radial-gradient(ellipse at center, #22252b, #030405 80%); min-height: 330px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.blp-video { width: 100%; height: 100%; max-height: calc(100dvh - 67px); object-fit: contain; display: block; }
.blp-video-badge { position: absolute; top: 20px; left: 22px; background: #050608b8; padding: 7px 10px; border-radius: 4px; font: 10px var(--font-mono); letter-spacing: .08em; color: #e4bc74; }
.blp-video-status { position: absolute; left: 20px; right: 20px; margin: 0 auto; max-width: 400px; padding: 15px; border-radius: 6px; background: #101116db; color: #c4c5cc; text-align: center; font-size: 13px; line-height: 1.6; }
.blp-video-status[hidden] { display: none; }
.blp-media-controls { position: absolute; bottom: 0; right: 0; left: 0; padding: 35px 16px 16px; display: flex; justify-content: center; gap: 8px; background: linear-gradient(transparent, #000c); }
.blp-player-control { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 10px 13px; border: 1px solid #ffffff29; border-radius: 7px; background: #0e1017c9; color: #e5e5eb; font-size: 11px !important; }
.blp-player-control .bu-ic { width: 16px; height: 16px; }
.blp-player-side { padding: 25px 20px; background: #111217; border-left: 1px solid #ffffff14; overflow-y: auto; }
.blp-cameras { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.blp-camera { display: flex; flex-direction: column; gap: 5px; text-align: left; background: #191b22; color: #b5b8c3; border: 1px solid #ffffff12; border-radius: 7px; padding: 12px; min-height: 65px; font-size: 12px !important; }
.blp-camera:first-child { grid-column: 1/-1; }
.blp-camera small { color: #696e7d; font: 10px var(--font-mono); }
.blp-camera.is-active { background: #361b22; border-color: #ff46505e; color: #fff; }
.blp-camera.is-active small { color: #ff727c; }
.blp-camera-hint { color: #818693; font-size: 10px; line-height: 1.6; margin: 12px 0 0; display: block; }
.blp-player-matchup { margin-top: 28px; border-top: 1px solid #ffffff15; padding-top: 23px; }
.blp-player-fighter { display: flex; flex-direction: column; gap: 4px; margin-bottom: 15px; }
.blp-player-fighter strong { font: 500 20px var(--font-display); }
.blp-player-fighter span { font: 10px var(--font-mono); color: #a2a6b4; }
.blp-player-matchup .blp-info { width: 100%; margin-top: 16px; }
.blp-real-replays { display: block; margin-top: 28px; font-size: 11px; line-height: 1.6; color: #ccc2a7; text-decoration: none; }
@media (min-width: 1900px) { .blp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .blp-card-versus { flex-direction: column; gap: 6px; align-items: flex-start; font-size: 26px; } .blp-card-versus span:last-child { text-align: left; } .blp-card-media { height: 240px; } .blp-card-body { padding: 16px; } .blp-card-actions { flex-wrap: wrap; } .blp-card-actions .blp-info { flex: 1; } .blp-card-caption { flex-direction: column; gap: 5px; } }
@media (max-width: 1000px) { .blp-hero { gap: 25px; } .blp-join { padding: 20px; } .blp-code-form { flex-wrap: wrap; } .blp-code-input { flex: 1; } .blp-code-form .blp-watch { width: 100%; } .blp-toolbar { align-items: stretch; flex-direction: column; } .blp-selects { justify-content: flex-end; } .blp-player-layout { grid-template-columns: minmax(0, 1fr) 250px; } .blp-player-side { padding: 20px 15px; } }
@media (max-width: 700px) { .blp-root { padding: 18px 16px 35px; } .blp-hero { grid-template-columns: 1fr; gap: 22px; padding: 15px 0 22px; } .blp-title { font-size: clamp(38px, 9vw, 54px); margin-bottom: 12px; } .blp-intro { font-size: 13px; max-width: 430px; } .blp-join { padding: 18px; } .blp-join h2 { font-size: 22px; } .blp-code-form { flex-wrap: nowrap; } .blp-code-form .blp-watch { width: auto; padding: 11px; } .blp-paste { padding: 4px; font-size: 10px !important; } .blp-code-input { padding: 13px 9px; } .blp-preview-notice { align-items: flex-start; gap: 9px; font-size: 10px; } .blp-preview-notice .blp-chip { white-space: normal; min-width: 84px; max-width: 84px; } .blp-catalog { margin-top: 24px; } .blp-section-heading { align-items: flex-end; gap: 10px; } .blp-section-heading h2 { font-size: 29px; } .blp-section-heading p { font-size: 11px; max-width: 230px; } .blp-result-count { font-size: 9px; white-space: normal; text-align: right; max-width: 70px; } .blp-modes { gap: 5px; } .blp-modes .blp-filter { flex: 1; padding: 8px; font-size: 11px !important; } .blp-selects { justify-content: space-between; } .blp-select-label { flex: 1; } .blp-select { width: 100%; max-width: none; font-size: 11px !important; } .blp-grid { grid-template-columns: 1fr; gap: 15px; } .blp-card-media { height: 192px; } .blp-card-versus { font-size: 26px; left: 18px; right: 18px; } .blp-card-bottom { left: 18px; right: 18px; } .blp-card-body { padding: 16px 18px; } .blp-card-caption { font-size: 9px; } .blp-card-actions .blp-info { font-size: 10px !important; } .blp-films-footer h3 { font-size: 18px; } .blp-films-footer p { font-size: 11px; } .blp-player-top { gap: 10px; padding: 7px 12px; min-height: 58px; } .blp-player-brand { display: none; } .blp-player-top .blp-chip { margin-left: auto; font-size: 9px; } .blp-player-layout { display: block; } .blp-screen { min-height: 250px; height: 48dvh; max-height: 520px; } .blp-video { max-height: none; } .blp-player-side { border-left: 0; border-top: 1px solid #ffffff18; padding: 20px 16px; overflow: visible; } .blp-cameras { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; } .blp-camera:first-child { grid-column: auto; } .blp-camera { padding: 10px 7px; font-size: 10px !important; min-height: 62px; } .blp-player-matchup { margin-top: 20px; padding-top: 18px; } .blp-player-matchup .blp-kicker { margin-bottom: 15px; } .blp-player-fighter { display: inline-flex; width: 49%; } .blp-player-fighter strong { font-size: 20px; } .blp-player-control { padding: 10px; font-size: 10px !important; } .blp-video-badge { top: 12px; left: 12px; font-size: 9px; } }
@media (max-height: 540px) and (orientation: landscape) { .blp-player-top { min-height: 44px; padding: 3px 12px; } .blp-player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; } .blp-screen { height: calc(100dvh - 44px); min-height: 0; max-height: none; } .blp-video { max-height: calc(100dvh - 44px); } .blp-player-side { padding: 14px 12px; height: calc(100dvh - 44px); overflow-y: auto; } .blp-cameras { grid-template-columns: 1fr 1fr; } .blp-camera:first-child { grid-column: 1/-1; } .blp-camera { min-height: 49px; padding: 7px 10px; } .blp-player-matchup { margin-top: 15px; } .blp-player-fighter { display: flex; width: auto; } .blp-media-controls { padding: 20px 10px 10px; } .blp-player-control span { display: none; } .blp-player-control { min-width: 42px; justify-content: center; } }
@media (max-width: 700px) { .blp-root { padding-top: calc(var(--header-h, 64px) / var(--ui-zoom, 1) + 12px); } }
@media (prefers-reduced-motion: reduce) { .blp-card, .blp-card-img, .blp-watch { transition: none; } }

/* Responsiveness (Tools/RESPONSIVE_TRACKER.md): the live count and an empty ring read as a state of the page, not
   as a footnote; filters wrap instead of being cut on the narrowest phones; readable minimum print. */
.blp-result-count { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid #ffffff1c; border-radius: 999px; background: #111217; color: #c3c5cd; font: 600 11.5px var(--font-mono); letter-spacing: .06em; }
.blp-result-count::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5d606b; }
.blp-empty { display: flex; flex-flow: row wrap; align-items: center; align-content: center; justify-content: center; gap: 6px; min-height: 220px; padding: 40px 24px; background: radial-gradient(ellipse at 50% 0, #ff38420d, transparent 70%), #0d0e12; color: #d4d5db; }
.blp-empty p { flex-basis: 100%; margin: 0; max-width: 56ch; font-size: 15px; line-height: 1.55; text-align: center; }
.blp-empty p + p { color: #9a9ca6; font-size: 13.5px; }
.blp-empty .blp-filter { margin: 14px 4px 0; min-height: 44px; padding: 10px 18px; font-size: 13px !important; }
.blp-code-note, .blp-code-demo { font-size: 12px; }
.blp-card-caption, .blp-fighter-stat span, .blp-viewers { font-size: 11px; }
.blp-modes { flex-wrap: wrap; }
@media (max-width: 700px) {
  .blp-modes .blp-filter { flex: 1 1 auto; font-size: 12px !important; }
  .blp-paste { font-size: 12px !important; padding: 6px; }
  .blp-result-count { max-width: none; white-space: nowrap; font-size: 11px; }
  .blp-preview-notice { font-size: 11px; }
  .blp-card-caption { font-size: 10.5px; }
  .blp-empty { min-height: 0; padding: 30px 18px; }
  .blp-empty .blp-filter { flex: none; }
}
@media (max-width: 400px) {
  .blp-code-form { flex-wrap: wrap; }
  .blp-code-input { flex: 1 1 160px; }
  .blp-code-form .blp-watch { flex: 1 1 100%; width: 100%; }
}
/* A phone on its side: the heading beside the code field - entering a fight is the first thing on the screen */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 480px) {
  .blp-root { padding-top: calc(var(--header-h, 52px) + 10px); }
  .blp-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; padding: 6px 0 16px; }
  .blp-kicker { margin-bottom: 6px; }
  .blp-title { font-size: clamp(26px, 9dvh, 40px); margin-bottom: 0; }
  .blp-intro { display: none; }
  .blp-join { padding: 14px; }
  .blp-join h2 { margin-bottom: 10px; font-size: 18px; }
  .blp-code-form { flex-wrap: nowrap; }
  .blp-code-form .blp-watch { width: auto; }
  .blp-code-note { margin-top: 8px; }
}

/* readability pass (2026-09-29): the empty state reads top to bottom - its two lines centred under each other, the two
   ways on side by side under them; "Moje sesje i zgody" is a section heading like the others on the page */
.blp-empty { padding: 40px max(24px, calc(50% - 32ch)); }
.blp-empty p { max-width: none; }
.blp-mine h2 { margin: 0 0 14px; font: 600 clamp(22px, 2vw, 30px)/1.1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
/* the mode pills like the site's other filters: dark with a hairline, the chosen one red */
.blp-modes .blp-filter { border-radius: 8px; background: #15171c; border-color: #ffffff21; color: #e2e3e8; font-size: 13px !important; font-weight: 600; }
.blp-modes .blp-filter.is-active { background: #ff3838; border-color: #ff3838; color: #fff; }