/* BP board: laid out at 1920×1080 and scaled to the frame by bp-board.mjs (--k). */
.bp-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.bpb {
  --bar-x: 22px; --bar-y: 800px; --bar-w: 1876px; --bar-h: 280px;
  --head-h: 80px; --row-h: 200px; --center-w: 269px;
  --ban: 61px; --ban-top: 9px; --ban-edge: 5px; --ban-gap: 5px; --team-x: 500px;
  --digits: "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift", "DIN Alternate", "Arial Narrow", sans-serif;
  position: absolute; z-index: 1; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; transform: scale(var(--k, 1));
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; color: #fff; visibility: hidden; pointer-events: none;
}
.bpb * { box-sizing: border-box; }
.bpb.is-shown { visibility: visible; }
.bpb img[hidden] { display: none; }
.bpb-bar { position: absolute; left: var(--bar-x); top: var(--bar-y); width: var(--bar-w); height: var(--bar-h); }
.bpb.is-closing .bpb-bar { animation: bpbClose .26s cubic-bezier(.5, 0, .9, .5) forwards; }
@keyframes bpbClose { from { clip-path: inset(-60px 0 -60px 0); } to { clip-path: inset(-60px 50% -60px 50%); } }

/* Head: bans at the edges, teams, series score. */
.bpb-head { position: absolute; left: 0; top: 0; width: 100%; height: var(--head-h); z-index: 4; }
.bpb-head-bg { position: absolute; inset: 0; }
.bpb-bans { position: absolute; top: var(--ban-top); display: flex; gap: var(--ban-gap); }
.bpb-bans.blue { left: var(--ban-edge); }
.bpb-bans.red { right: var(--ban-edge); flex-direction: row-reverse; }
.bpb-ban { position: relative; width: var(--ban); height: var(--ban); overflow: hidden; visibility: hidden; }
.bpb.is-bans .bpb-ban { visibility: visible; animation: bpbBanIn .22s cubic-bezier(.3, 0, .3, 1) both; }
.bpb.is-bans.is-done .bpb-ban { animation: none; }
.bpb.is-intro.is-bans .bpb-ban:nth-child(2) { animation-delay: .1s; }
.bpb.is-intro.is-bans .bpb-ban:nth-child(3) { animation-delay: .2s; }
.bpb.is-intro.is-bans .bpb-ban:nth-child(4) { animation-delay: .3s; }
.bpb.is-intro.is-bans .bpb-ban:nth-child(5) { animation-delay: .4s; }
@keyframes bpbBanIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.bpb-ban img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: bpbFade .3s ease-out both; }
.bpb-ban.locked img { filter: grayscale(.65) brightness(.8) contrast(.92); animation: none; }
.bpb-ban.active::before { content: ""; position: absolute; inset: 0; animation: bpbPulse 1.6s ease-in-out infinite; }
.bpb-ban-slash { position: absolute; left: 50%; top: 50%; width: 112%; height: 3px; margin: -1.5px 0 0 -56%; background: #f4f4f4f2; box-shadow: 0 0 2px #0006; transform: rotate(45deg); visibility: hidden; }
.bpb-ban.locked .bpb-ban-slash { visibility: visible; }
.bpb-ban.is-flashing .bpb-ban-slash { animation: bpbSlash .22s ease-out .25s both; }
.bpb-ban-flash { position: absolute; inset: 0; opacity: 0; }
.bpb-ban.is-flashing .bpb-ban-flash { animation: bpbFlash .42s linear both; }
@keyframes bpbSlash { from { transform: rotate(45deg) scaleX(0); } to { transform: rotate(45deg) scaleX(1); } }
@keyframes bpbFlash { 0% { opacity: 0; } 35%, 48% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bpbPulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes bpbFade { from { opacity: 0; } to { opacity: 1; } }
.bpb-team, .bpb-score { opacity: 0; }
.bpb.is-head .bpb-team { opacity: 1; transition: opacity .12s linear; }
.bpb.is-head .bpb-score { opacity: 1; animation: bpbScoreIn .14s ease-out both; }
@keyframes bpbScoreIn { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.bpb-team { position: absolute; top: 17px; height: 46px; display: flex; align-items: center; gap: 22px; }
.bpb-team.blue { left: var(--team-x); }
.bpb-team.red { right: var(--team-x); flex-direction: row-reverse; }
.bpb-logo { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px #f7f3eaeb; background: #ffffff10; }
.bpb-logo img { width: 100%; height: 100%; object-fit: cover; }
.bpb-logo b { font-size: 15px; font-weight: 800; letter-spacing: 1px; }
.bpb-team-name { font-size: 30px; font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: .5px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.bpb-score { position: absolute; left: 50%; top: 12px; height: 56px; display: flex; align-items: center; transform: translateX(-50%); font: 700 61px/1 var(--digits); color: #fdfbf7; }
.bpb-score span { display: inline-block; min-width: 36px; text-align: center; }
.bpb-colon { position: relative; display: block; width: 6px; height: 26px; margin: 2px 26px 0; }
.bpb-colon::before, .bpb-colon::after { content: ""; position: absolute; left: 0; width: 6px; height: 6px; background: currentColor; }
.bpb-colon::before { top: 3px; } .bpb-colon::after { bottom: 3px; }

/* Row: five slots per side around the centre clock. */
.bpb-row { position: absolute; left: 0; top: var(--head-h); width: 100%; height: var(--row-h); z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr) var(--center-w) repeat(5, 1fr); grid-template-rows: var(--row-h); align-items: start; visibility: hidden; }
.bpb.is-row .bpb-row { visibility: visible; }
.bpb-slot { position: relative; grid-row: 1; height: var(--row-h); overflow: hidden; }
.bpb-slot > i, .bpb-art, .bpb-wipe { position: absolute; left: 0; top: 0; width: 100%; height: var(--row-h); display: block; pointer-events: none; }
.bpb-slot-turn { opacity: 0; }
.bpb-slot.is-up .bpb-slot-turn { opacity: 1; transition: opacity 0s linear .265s; }
.bpb-turn-lane { position: absolute; z-index: 1; left: 50%; top: 96px; width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: 0; transform: scale(.9); }
.bpb-slot.is-up:not(.has-hero) .bpb-turn-lane { opacity: 1; animation: bpbLaneZoom .6s cubic-bezier(.2, .6, .3, 1) .265s both; }
@keyframes bpbLaneZoom { from { transform: scale(.9); } to { transform: scale(1); } }
.bpb-art { overflow: hidden; z-index: 1; }
.bpb-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.bpb-art-prev { visibility: hidden; }
.bpb-slot.is-wiping .bpb-art-prev { visibility: visible; animation: bpbPrevOut .4s linear both; }
.bpb-slot.is-wiping .bpb-art-now { animation: bpbNowIn .4s linear both; }
@keyframes bpbPrevOut { 0%, 44.9% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes bpbNowIn { 0%, 44.9% { opacity: 0; } 45%, 100% { opacity: 1; } }
.bpb-slot.pre .bpb-art img { filter: saturate(.75) brightness(.85); }
.bpb-wipe { z-index: 2; overflow: hidden; visibility: hidden; }
.bpb-slot.is-wiping .bpb-wipe { visibility: visible; }
.bpb-wipe-fill { position: absolute; inset: 0; }
.bpb-wipe-band { position: absolute; left: 0; right: 0; height: 34px; opacity: 0; }
.bpb-slot.is-wiping .bpb-wipe-fill { animation: bpbWipe .4s linear both; }
.bpb-slot.is-wiping .bpb-wipe-band { animation: bpbWipeBand .4s linear both; }
@keyframes bpbWipeBand { 0%, 44% { top: 0; opacity: 0; } 45% { top: 0; opacity: 1; } 62% { top: 45%; opacity: 1; } 80% { top: 84%; opacity: .9; } 100% { top: 100%; opacity: 0; } }
.bpb-swap { z-index: 3; opacity: 0; }
.bpb-slot.is-swapping .bpb-swap { animation: bpbSwap 1s linear both; }
.bpb-band { top: auto !important; bottom: 0; height: 74px !important; z-index: 2; opacity: .85; transition: opacity .1s linear .3s; }
.bpb-slot.has-hero .bpb-band { opacity: 1; }
.bpb-slot.is-up .bpb-band { opacity: 0; transition: opacity .13s linear; }
.bpb-frame { z-index: 4; opacity: 0; }
.bpb-slot.pre .bpb-frame { opacity: 1; }
.bpb-label { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--row-h) - 31px); height: 22px; display: flex; align-items: center; justify-content: center; gap: 6px; transition: opacity .1s linear .3s; }
.bpb-slot.is-up .bpb-label { opacity: 0; transition: opacity .13s linear; }
.bpb-slot.is-swapping .bpb-label { animation: bpbLabelSwap 1s linear both; }
@keyframes bpbLabelSwap { 0%, 15% { opacity: 1; } 25%, 60% { opacity: 0; } 90%, 100% { opacity: 1; } }
.bpb-lane { width: 22px; height: 22px; flex: none; }
.bpb-name { font-size: 21px; font-weight: 700; line-height: 1; white-space: nowrap; max-width: calc(100% - 36px); overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #0009; }

.bpb-center { position: relative; grid-column: 6; grid-row: 1; height: var(--row-h); overflow: hidden; }
.bpb-center-bg { position: absolute; inset: 0; }
.bpb-time { position: absolute; left: 0; right: 0; top: 18px; text-align: center; font: 700 121px/1 var(--digits); font-variant-numeric: tabular-nums; }
.bpb-stage { position: absolute; left: -40px; right: -40px; top: 138px; text-align: center; font: 900 30px/1 var(--digits); letter-spacing: 2px; white-space: nowrap; }
.bpb:not(.has-time) .bpb-stage { top: 72px; font-size: 40px; letter-spacing: 4px; }
.bpb.is-head .bpb-time, .bpb.is-head .bpb-stage { animation: bpbFade .12s linear both; }
.bpb-line { position: absolute; top: calc(var(--head-h) - 1px); height: 3px; z-index: 5; width: 0; transition: width .25s linear; background:linear-gradient(var(--timer-angle,90deg),var(--timer-colors)); }
.bpb-line.blue { left: 0; } .bpb-line.red { right: 0; --timer-angle:270deg; }
.bpb-line[data-timer-origin="center"] {
  background:linear-gradient(270deg,var(--timer-colors)) left center / 50% 100% no-repeat,
    linear-gradient(90deg,var(--timer-colors)) right center / 50% 100% no-repeat;
}

/* Intro banner (used by the summer board). */
.bpb-banner { position: absolute; left: 0; top: 0; width: 100%; height: var(--bar-h); z-index: 6; overflow: hidden; display: none; clip-path: inset(0 50% 0 50%); }
.bpb.is-intro .bpb-banner { display: block; }
.bpb-banner > i { position: absolute; display: block; }
.bpb-banner-dark, .bpb-banner-lit, .bpb-banner-lines, .bpb-banner-plum { inset: 0; }
.bpb-banner-lit, .bpb-banner-plum { opacity: 0; }
.bpb.is-open .bpb-banner { animation: bpbOpen .25s cubic-bezier(.55, 0, .85, .65) both; }
@keyframes bpbOpen { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0); } }
.bpb.is-lit .bpb-banner-lit { opacity: 1; transition: opacity .12s linear; }
.bpb.is-collapse .bpb-banner { height: var(--head-h); transition: height .15s cubic-bezier(.5, 0, .75, .4); }
.bpb.is-head .bpb-banner { opacity: 0; transition: opacity .6s ease-in .1s; }
.bpb-mark { position: absolute; top: 96px; height: 64px; display: flex; align-items: center; gap: 33px; opacity: 0; transition: opacity .05s linear; }
.bpb.is-marks .bpb-mark { opacity: 1; transition: opacity .08s linear; }
.bpb-mark.blue { left: 77px; } .bpb-mark.red { right: 77px; flex-direction: row-reverse; }
.bpb-logo-lg { width: 64px; height: 64px; box-shadow: inset 0 0 0 3px #f7f3eaf2; }
.bpb-mark-name { font-size: 34px; font-weight: 700; white-space: nowrap; }
.bpb-glitch { top: 0; height: var(--head-h); opacity: 0; }
.bpb.is-glitch .bpb-glitch { animation: bpbGlitch .2s steps(1, end) both; }
.bpb-glitch.g1 { left: 46%; width: 5%; } .bpb-glitch.g2 { left: 52%; width: 4%; animation-delay: .03s !important; }
.bpb-glitch.g3 { left: 41%; width: 6%; animation-delay: .06s !important; } .bpb-glitch.g4 { left: 56%; width: 7%; animation-delay: .08s !important; }
.bpb-glitch.g5 { left: 33%; width: 8%; animation-delay: .11s !important; } .bpb-glitch.g6 { left: 63%; width: 9%; animation-delay: .13s !important; }
.bpb-glitch.g7 { left: 24%; width: 10%; animation-delay: .15s !important; }
@keyframes bpbGlitch { 0% { opacity: 0; } 1%, 100% { opacity: 1; } }
.bpb.is-plum .bpb-banner-plum { opacity: 1; transition: opacity .1s linear; }
.bpb-edge { top: 0; bottom: 0; left: 50%; width: 20px; filter: blur(1px); opacity: 0; }
.bpb.is-open .bpb-edge { opacity: 1; }
.bpb.is-open .bpb-edge.l { margin-left: -16px; animation: bpbEdgeL .25s cubic-bezier(.55, 0, .85, .65) both, bpbEdgeOut .06s linear .25s both; }
.bpb.is-open .bpb-edge.r { margin-left: -4px; animation: bpbEdgeR .25s cubic-bezier(.55, 0, .85, .65) both, bpbEdgeOut .06s linear .25s both; }
@keyframes bpbEdgeL { from { transform: translateX(0); } to { transform: translateX(-926px); } }
@keyframes bpbEdgeR { from { transform: translateX(0); } to { transform: translateX(926px); } }
@keyframes bpbEdgeOut { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bpb *, .bpb *::before, .bpb *::after { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
}
.bpb.is-done :is(.bpb-time, .bpb-stage, .bpb-score) { animation: none; }
.bpb.is-done .bpb-team { transition: none; }
.bpb-hotspot { position:absolute; inset:0; z-index:10; display:block; width:100%; height:100%; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; pointer-events:auto; }
.bpb-hotspot:hover,.bpb-hotspot:focus-visible { outline:2px solid #ffffffa0; outline-offset:-3px; background:#ffffff12; }
.bpb-hotspot.swap-selected { outline:3px solid #f4d98a; outline-offset:-4px; background:#f4d98a20; }
.bpb-line { transition:width .1s linear; }
@media(prefers-reduced-motion:reduce) { .bpb-line { transition:none; } }
.bpb-hotspot.is-current { outline:3px solid #f4d98acd; outline-offset:-3px; box-shadow:inset 0 0 16px #f4d98a25; }
/* Active targets breathe at one shared pace, including a populated preselection. */
.bpb .bpb-ban.active { animation: bpbTargetBreath var(--pulse-ms,1800ms) ease-in-out infinite; }
.bpb .bpb-ban.active::before { animation-duration: var(--pulse-ms,1800ms); }
.bpb .bpb-row { transition: grid-template-columns var(--row-ms,420ms) var(--row-ease,cubic-bezier(.16,1,.3,1)); }
.bpb-focus-glow { z-index:4; opacity:0; box-shadow:inset 0 0 0 2px #ffe1a8, inset 0 0 28px #ffe1a844; background:linear-gradient(180deg,#ffffff10,transparent 60%); }
.bpb-slot.is-up .bpb-focus-glow { animation:bpbFocusBreath var(--pulse-ms,1800ms) ease-in-out infinite; }
.bpb-slot.is-confirming.confirm-fade .bpb-art-now { animation:bpbConfirmFade var(--reveal-ms) cubic-bezier(.22,.7,.2,1) var(--reveal-delay,0ms) both; }
.bpb.shows-preselection .bpb-slot.is-confirming.confirm-fade .bpb-art-prev { visibility:visible; animation:bpbPreFade var(--reveal-ms) cubic-bezier(.22,.7,.2,1) var(--reveal-delay,0ms) both; }
.bpb-wide-reveal { position:absolute; z-index:8; top:0; bottom:0; width:calc((100% - var(--center-w)) * .56); overflow:hidden; background:#101728; }
.bpb-wide-reveal.blue { left:0; }.bpb-wide-reveal.red { right:0; }
.bpb-wide-reveal.opening { animation:bpbWideOpen var(--wide-motion) cubic-bezier(.22,.7,.2,1) both; }
.bpb-wide-reveal.closing { animation:bpbWideClose var(--wide-motion) cubic-bezier(.4,0,.2,1) both; }
.bpb-wide-reveal::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 2px #f1d4a88c; }
.bpb-wide-reveal img { position:absolute; }
.bpb-wide-reveal.opening .bpb-wide-character { animation:bpbCameraOpen var(--wide-motion) cubic-bezier(.22,.7,.2,1) both; }
.bpb-wide-reveal.closing .bpb-wide-character { animation:bpbCameraClose var(--wide-motion) cubic-bezier(.4,0,.2,1) both; }
.bpb-wide-reveal strong,.bpb-wide-reveal span { position:absolute; z-index:1; left:30px; color:#fff; text-shadow:0 2px 5px #0009; }
.bpb-wide-reveal strong { bottom:45px; font-size:36px; letter-spacing:4px; }
.bpb-wide-reveal span { bottom:18px; font-size:18px; letter-spacing:6px; }
.bpb-effects-hotspot { position:absolute; z-index:11; top:6px; right:6px; width:32px; height:32px; border:1px solid #ffffff60; border-radius:5px; padding:0; color:#fff; background:#102138bc; font-size:22px; opacity:0; cursor:pointer; pointer-events:auto; }
.bpb-slot:hover .bpb-effects-hotspot,.bpb-ban:hover .bpb-effects-hotspot,.bpb-effects-hotspot:focus-visible { opacity:1; }
.bpb-ban .bpb-effects-hotspot { top:2px; right:2px; width:22px; height:22px; font-size:17px; }
.bpb-ban:has(.bpb-hotspot.is-current) .bpb-effects-hotspot { inset:auto 0 0 auto; width:22px; height:22px; font-size:17px; }
@keyframes bpbTargetBreath { 0%,100%{filter:brightness(.65)} 50%{filter:brightness(1.18)} }
@keyframes bpbFocusBreath { 0%,100%{opacity:.25} 50%{opacity:1} }
@keyframes bpbConfirmFade { from{opacity:0} to{opacity:1} }
@keyframes bpbWideOpen { from{opacity:0;clip-path:inset(0 var(--wide-right) 0 var(--wide-left))} 40%{opacity:1} to{opacity:1;clip-path:inset(0)} }
@keyframes bpbWideClose { from{opacity:1;clip-path:inset(0)} 65%{opacity:1} to{opacity:0;clip-path:inset(var(--wide-close-inset) var(--wide-close-right) var(--wide-close-inset) var(--wide-close-left))} }
.bpb-slot.is-focused .bpb-art img { object-position:50% 0% !important; }
.bpb:not(.shows-preselection) .bpb-slot.is-confirming.confirm-fade .bpb-art-now { animation-name:bpbConfirmReveal; }
@keyframes bpbConfirmReveal { from{opacity:0} to{opacity:1} }
@media(prefers-reduced-motion:reduce){.bpb .bpb-row{transition:none}.bpb .bpb-ban.active,.bpb-slot.is-up .bpb-focus-glow{animation:none;opacity:1}.bpb .bpb-slot.is-confirming .bpb-art-now,.bpb-wide-reveal{animation-duration:1ms;animation-delay:0ms}}

@keyframes bpbPreFade { 0%,62%{opacity:1} 100%{opacity:0} }
@keyframes bpbCameraOpen { from{transform:translateX(var(--camera-shift))} to{transform:translateX(0)} }
@keyframes bpbCameraClose { from{transform:translateX(0)} to{transform:translateX(var(--camera-close-shift))} }
/* Waiting players keep their role at the centre and their name at the foot. */
.bpb .bpb-slot:not(.has-hero) .bpb-turn-lane { top:calc(var(--row-h) * .44); width:42px; height:42px; margin:-21px 0 0 -21px; opacity:.35; animation:none; filter:none; transform:none; }
.bpb .bpb-slot.is-up:not(.has-hero) .bpb-turn-lane { opacity:.85; }
.bpb .bpb-slot .bpb-label { opacity:1; top:auto; bottom:14px; }
.bpb .bpb-slot:not(.has-hero) .bpb-name { max-width:90%; font-weight:500; letter-spacing:1px; opacity:.8; }
.bpb .bpb-hotspot.is-current { outline:2px solid #f4d98a9c; box-shadow:none; }

.bpb-ink-trail { position:absolute; inset:0; z-index:3; pointer-events:none; background-size:100% 100%; background-repeat:no-repeat; }
.bpb-slot.is-confirming.confirm-fade .bpb-art-now { animation:none; opacity:1; }
.bpb.shows-preselection .bpb-slot.is-confirming.confirm-fade .bpb-art-prev { animation:none; opacity:1; }

/* The lower third totals 280 at 1080p: 67.2 information + 212.8 artwork (24:76). */
.bpb .bpb-team { top:19px; }
.bpb .bpb-score { top:14px; }
.bpb[data-style="finals"] .bpb-team { top:22px; }
.bpb[data-style="finals"] .bpb-score { top:18px; }
.bpb[data-style="finals"] .bpb-bans { top:17px; }
.bpb[data-style="finals"] .bpb-head-bg::after { height:84px; }
.bpb[data-style="finals"] .bpb-line { top:83px; }
/* Keep the character continuous while only its background is revealed. */
.bpb-slot.pre .bpb-art img { filter:none; }
.bpb-frame { transition:opacity .5s ease; }
.bpb-band { transition:opacity .6s ease; }

/* The countdown line belongs wholly to the information strip. */
.bpb .bpb-line,.bpb[data-style="finals"] .bpb-line { top:calc(var(--head-h) - 4px); height:3px; }
.bpb .bpb-team { top:10.6px; }
.bpb .bpb-score { top:5.6px; }
.bpb .bpb-bans { top:1px; }
.bpb[data-style="finals"] .bpb-team { top:13.6px; }
.bpb[data-style="finals"] .bpb-score { top:9.6px; }
.bpb[data-style="finals"] .bpb-bans { top:7px; }
.bpb[data-style="finals"] .bpb-head-bg::after { height:var(--head-h); }
.bpb.shows-preselection .bpb-slot.is-confirming.confirm-fade .bpb-art-prev { animation:none; opacity:1; }

/* Focus grows six pixels on both edges; the frame reserves the lower six. */
.bpb .bpb-slot { --view-h:var(--row-h); top:0; height:var(--view-h); transition:top var(--focus-ms,420ms) var(--focus-ease),height var(--focus-ms,420ms) var(--focus-ease); }
.bpb .bpb-slot.is-focused { --view-h:calc(var(--row-h) + 12px); top:-6px; z-index:2; }
.bpb .bpb-slot > i,.bpb .bpb-slot .bpb-art,.bpb .bpb-slot .bpb-wipe { height:100%; }
.bpb .bpb-slot .bpb-art img { transition:width var(--focus-ms,420ms) var(--focus-ease),height var(--focus-ms,420ms) var(--focus-ease),top var(--focus-ms,420ms) var(--focus-ease); }
.bpb .bpb-slot.is-focused .bpb-frame { opacity:1; }
.bpb .bpb-slot.is-focused .bpb-focus-glow { animation:none; opacity:0; }
.bpb .bpb-wide-reveal { top:-6px; bottom:-6px; }
.bpb[data-style="finals"] .bpb-bar { overflow:visible; }

/* Replacing a hero crossfades two independently framed images. */
.bpb .bpb-slot.is-replacing .bpb-art-prev { visibility:visible; animation:bpbArtLeave 360ms ease both; }
.bpb .bpb-slot.is-replacing .bpb-art-now { animation:bpbArtEnter 360ms ease both; }
@keyframes bpbArtLeave { from { opacity:1; } to { opacity:0; } }
@keyframes bpbArtEnter { from { opacity:0; } to { opacity:1; } }
.bpb .bpb-slot.is-art-loading .bpb-art-prev { visibility:visible; animation:none; opacity:1; }
.bpb .bpb-slot.is-art-loading .bpb-art-now { animation:none; opacity:0; }
.bpb .bpb-slot.is-focused.locked:not(.is-confirming) .bpb-focus-glow { animation:none; opacity:0; }
/* Expanded artwork stays clear; labels return after the cards settle. */
.bpb .bpb-row .bpb-slot :is(.bpb-label,.bpb-turn-lane) { transition:opacity 180ms ease var(--focus-ms,420ms); }
.bpb[data-style] .bpb-row .bpb-slot.is-focused :is(.bpb-label,.bpb-turn-lane) { opacity:0; transition-delay:0ms; }
.bpb[data-style] .bpb-row .bpb-slot.is-focused .bpb-turn-lane { animation:none; }
.bpb .bpb-row .bpb-slot.is-focused .bpb-band { opacity:0; }

/* Keep the active border above artwork in every style, with or without preselection. */
.bpb .bpb-active-border { position:absolute; inset:0; width:100%; height:100%; z-index:9; pointer-events:none; box-shadow:inset 0 0 0 4px #ffe0a0,inset 0 0 18px #ffd78065; animation:bpbActiveBorderBreath var(--pulse-ms,1800ms) ease-in-out infinite; }
.bpb[data-style="finals"] .bpb-active-border { box-shadow:inset 0 0 0 4px #b17a20,inset 0 0 18px #b17a2065; }
.bpb .bpb-ban.active { animation:none; }
.bpb .bpb-hotspot.is-current:not(:hover):not(:focus-visible) { outline:none; box-shadow:none; }
@keyframes bpbActiveBorderBreath { 0%,100% { opacity:.32; } 50% { opacity:1; } }
@media(prefers-reduced-motion:reduce) {
  .bpb .bpb-active-border { animation:none; opacity:1; }
  .bpb .bpb-focus-glow,.bpb .bpb-ban.active::before { animation:none; }
}