/* ===========================================================
   Bigg Boss 2026 — visual layer
   -----------------------------------------------------------
   Direction: broadcast control room after dark. The show's own
   world is a lit house watched at night, so the surface is a
   deep aubergine-night rather than flat black, warmed by a
   trophy gold. Signal red is rationed — it appears ONLY for
   live and eviction states, so when the band turns red it
   actually means something.

   Everything scoped under #bb. Colours are set explicitly on
   headings, never inherited (inheritance carries no
   specificity and loses to theme h1/h2 rules).
   =========================================================== */

#bb {
	/* — palette — */
	/* Light theme. The page itself is bright and airy; the player and
	   promo frames stay deliberately dark so video content reads as
	   "framed" against the page rather than washing out on a white bg. */
	--bb-ink:      #FAF8F3;  /* page background */
	--bb-surface:  #FFFFFF;  /* cards */
	--bb-raise:    #F2EFE6;  /* hovered / raised */
	--bb-line:     #E7E2D3;  /* hairlines */
	--bb-gold:     #C3821E;  /* trophy warmth — accents, week numbers (darker than the dark-theme gold, for contrast on white) */
	--bb-signal:   #D6284A;  /* LIVE + eviction ONLY. Do not reuse. */
	--bb-mint:     #1E9A6C;  /* in-house / safe */
	--bb-paper:    #1C1730;  /* primary text */
	--bb-mute:     #6D6780;  /* secondary text */

	/* Dedicated dark frame for the player and promo grid — independent of
	   the page palette above, on purpose. Video should never sit directly
	   on a white background. */
	--bb-frame:      #120E20;
	--bb-frame-line: #322A4E;

	/* — hero band —
	   The strip behind the countdown and the player. Separate from
	   --bb-frame on purpose: the BAND is light here, while the player
	   card sitting on it stays dark (below), so video is still framed
	   rather than washing out against the page. Every text colour in
	   this band reads from the theme tokens rather than a hardcoded
	   near-white, so the same rules stay legible when the dark-theme
	   values below take over. */
	--bb-band:           #F3EFE4;
	--bb-band-line:      #E3DDCC;
	--bb-band-tile:      rgba(28,23,48,.05);
	--bb-band-tile-line: rgba(28,23,48,.13);
	--bb-band-tile-gold: rgba(195,130,30,.38);
	--bb-band-num:       #1C1730;
	--bb-band-btn:       rgba(28,23,48,.05);
	--bb-band-btn-line:  rgba(28,23,48,.18);
	--bb-band-btn-hover: rgba(28,23,48,.10);
	--bb-band-premiere:  linear-gradient(155deg, #FFF3DE 0%, var(--bb-band) 72%);

	/* — type scale — */
	--bb-display: 'Catamaran', 'Noto Sans Tamil', system-ui, sans-serif;
	--bb-body:    'Catamaran', 'Noto Sans Tamil', system-ui, sans-serif;
	--bb-step--1: clamp(12px, 0.72rem + 0.1vw, 13px);
	--bb-step-0:  clamp(15px, 0.9rem + 0.15vw, 16px);
	--bb-step-1:  clamp(18px, 1rem + 0.5vw, 22px);
	--bb-step-2:  clamp(24px, 1.2rem + 1.6vw, 40px);
	--bb-step-3:  clamp(32px, 1.4rem + 3.4vw, 64px);

	--bb-radius: 14px;
	--bb-gap: 14px;

	font-family: var(--bb-body);
	font-size: var(--bb-step-0);
	line-height: 1.55;
	color: var(--bb-paper);
	background: var(--bb-ink);
	padding-bottom: 48px;
	-webkit-font-smoothing: antialiased;
}

/* -----------------------------------------------------------
   Dark theme
   Only the page-surface tokens flip. The player/promo frame stays
   dark in both themes (it always was), and the signal/mint/gold
   accents are re-tuned for contrast on a dark background rather
   than reused, since the light-theme gold is too dim on dark.
   ----------------------------------------------------------- */
#bb[data-theme="dark"] {
	--bb-ink:      #100C1E;
	--bb-surface:  #191331;
	--bb-raise:    #241C42;
	--bb-line:     #322A52;
	--bb-gold:     #F0B950;
	--bb-signal:   #FF4664;
	--bb-mint:     #4FD9A8;
	--bb-paper:    #F4F1FF;
	--bb-mute:     #A29BC4;
	--bb-frame:      #0B0816;
	--bb-frame-line: #2E2650;

	/* Band stays dark here — it is the light theme that changed, not the
	   band's role. Same token names, so no band rule needs a theme-specific
	   duplicate. */
	--bb-band:           #0B0816;
	--bb-band-line:      #2E2650;
	--bb-band-tile:      rgba(255,255,255,.07);
	--bb-band-tile-line: rgba(255,255,255,.13);
	--bb-band-tile-gold: rgba(240,185,80,.35);
	--bb-band-num:       #FFF6E4;
	--bb-band-btn:       rgba(255,255,255,.10);
	--bb-band-btn-line:  rgba(255,255,255,.28);
	--bb-band-btn-hover: rgba(255,255,255,.20);
	--bb-band-premiere:  linear-gradient(155deg, #241C42 0%, var(--bb-frame) 70%);
}
#bb[data-theme="dark"]::before {
	background: radial-gradient(120% 100% at 50% 0%, rgba(240,185,80,.12) 0%, rgba(16,12,30,0) 62%);
}
#bb[data-theme="dark"] .bb-status-badge { background: rgba(0,0,0,.65); }

/* -----------------------------------------------------------
   Theme toggle
   ----------------------------------------------------------- */
.bb-masthead-controls { display: flex; align-items: center; gap: 8px; flex: none; }

.bb-theme-toggle {
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--bb-line);
	border-radius: 999px;
	background: var(--bb-surface);
	cursor: pointer;
	transition: border-color .15s ease;
}
.bb-theme-toggle:hover { border-color: var(--bb-gold); }
.bb-theme-icon {
	width: 16px; height: 16px; border-radius: 999px;
	background: var(--bb-gold);
	box-shadow: inset -5px -3px 0 0 var(--bb-surface);
	transition: box-shadow .2s ease, background .2s ease;
}
/* Filled circle = sun (light active); crescent = moon (dark active). */
#bb[data-theme="dark"] .bb-theme-icon {
	box-shadow: none;
	background: var(--bb-gold);
}

/* -----------------------------------------------------------
   Data saver toggle
   Same circular-button shape as the theme toggle, so the two read as a
   pair rather than one looking like an afterthought bolted beside it.
   ----------------------------------------------------------- */
.bb-datasaver-toggle {
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--bb-line);
	border-radius: 999px;
	background: var(--bb-surface);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.bb-datasaver-toggle:hover { border-color: var(--bb-gold); }
.bb-datasaver-icon {
	width: 16px; height: 16px;
	border-radius: 4px;
	border: 2px solid var(--bb-mute);
	position: relative;
}
/* A small filled droplet inside the outline when OFF; the outline alone,
   emptied out, reads as "saving" once ON — same idea as the theme
   toggle's filled-vs-crescent distinction. */
.bb-datasaver-icon::after {
	content: "";
	position: absolute; inset: 3px;
	border-radius: 2px;
	background: var(--bb-mute);
	transition: opacity .15s ease;
}
#bb-datasaver-toggle[aria-pressed="true"] .bb-datasaver-icon {
	border-color: var(--bb-gold);
}
#bb-datasaver-toggle[aria-pressed="true"] .bb-datasaver-icon::after {
	opacity: 0;
}

/* -----------------------------------------------------------
   Season stats strip

   Flex row, not individually positioned cards — a class written for
   exactly one element breaks the moment a second gets it (lesson 23).
   Colours AND font-family set explicitly on every text node: inheritance
   carries no specificity and loses to theme h2/p/a rules.
   ----------------------------------------------------------- */
#bb .bb-season-stats-wrap { margin-top: 4px; margin-bottom: 18px; }
/* An empty wrapper (before the first eviction, when render_season_stats()
   returns '') must not leave a visible gap between What's New and the
   day rail. :empty is safe here — the PHP emits either the full strip or
   literally nothing, never whitespace-only content. */
#bb .bb-season-stats-wrap:empty { display: none; margin: 0; }

#bb .bb-season-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#bb .bb-stat {
	flex: 1 1 auto;
	min-width: 130px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	background: var(--bb-surface);
	text-decoration: none;
}
#bb a.bb-stat:hover { border-color: var(--bb-gold); }
#bb .bb-stat-num {
	font-family: var(--bb-display);
	font-size: var(--bb-step-1);
	font-weight: 800;
	line-height: 1.1;
	color: var(--bb-paper);
	font-variant-numeric: tabular-nums;
}
#bb .bb-stat-lab {
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	font-weight: 700;
	color: var(--bb-mute);
}
/* Winner is the one state worth spending gold on — it only ever appears
   once, at the very end of a season. */
#bb .bb-stat-winner {
	border-color: var(--bb-gold);
	background: linear-gradient(135deg, rgba(195,130,30,.10), transparent 70%);
}
#bb .bb-stat-winner .bb-stat-lab { color: var(--bb-paper); }

@media (max-width: 560px) {
	/* Two per row rather than four squeezed columns. */
	#bb .bb-stat { min-width: calc(50% - 5px); padding: 10px 12px; }
}

/* -----------------------------------------------------------
   Data saver: pending thumbnails + the "Load N images" button
   Scoped to the promo grid and gallery grid only — these are the grids
   that actually accumulate across a 100-day season. Roster and cast
   teaser photos are a fixed, small set (one per contestant) regardless
   of how many days have aired, so they are left alone.
   ----------------------------------------------------------- */
img.bb-ds-pending {
	background: var(--bb-raise);
	border: 1px dashed var(--bb-line);
}
.bb-ds-load {
	grid-column: 1 / -1;
	display: block;
	width: 100%;
	padding: 14px;
	margin-bottom: 4px;
	border: 1px dashed var(--bb-line);
	border-radius: 10px;
	background: var(--bb-raise);
	color: var(--bb-paper);
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	font-weight: 700;
	cursor: pointer;
	min-height: 44px; /* tap target, mobile-first audience */
}
.bb-ds-load:hover { border-color: var(--bb-gold); }

/* -----------------------------------------------------------
   Countdown row + reminder buttons

   Two buttons share .bb-remind-btn (calendar + WhatsApp, added in 1.8.0).
   The original rule was written for exactly one button and absolutely
   positioned it at a fixed right offset — fine for one, but a second
   button with the same class landed in the same spot and overlapped it
   instead of sitting beside it. Group them in a flex row instead of
   positioning each individually.
   ----------------------------------------------------------- */
.bb-remind-btn {
	flex: 0 0 auto;
	padding: 7px 14px;
	min-height: 36px;
	border: 1px solid var(--bb-band-btn-line);
	border-radius: 999px;
	background: var(--bb-band-btn);
	color: var(--bb-paper);
	font-family: var(--bb-body); font-size: var(--bb-step--1); font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, border-color .15s ease;
}
.bb-remind-btn:hover { background: var(--bb-band-btn-hover); border-color: var(--bb-gold); }
/* WhatsApp keeps its own green identity in both themes; the text colour
   still comes from the theme so it doesn't go white-on-pale-green. */
.bb-remind-wa { background: rgba(37,211,102,.16); border-color: rgba(37,211,102,.45); color: var(--bb-paper); }
.bb-remind-wa:hover { background: rgba(37,211,102,.28); border-color: #25D366; }
@media (max-width: 560px) {
	.bb-remind-btn { flex: 1 1 auto; text-align: center; margin: 0; }
}

/* -----------------------------------------------------------
   New since last visit
   ----------------------------------------------------------- */
.bb-newsince {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	max-width: 1140px; margin: 12px auto 0; padding: 10px 18px;
	background: var(--bb-raise);
	border: 1px solid var(--bb-line);
	border-radius: 10px;
	font-size: var(--bb-step--1);
	color: var(--bb-paper);
}
.bb-newsince[hidden] { display: none; }
.bb-newsince-count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 24px; height: 24px; padding: 0 7px;
	border-radius: 999px;
	background: var(--bb-signal); color: #fff;
	font-weight: 800;
}
.bb-newsince-go {
	margin-left: auto;
	padding: 6px 14px; border-radius: 999px;
	border: 1px solid var(--bb-line); background: var(--bb-surface);
	color: var(--bb-paper);
	font-family: var(--bb-body); font-size: var(--bb-step--1); font-weight: 700;
	cursor: pointer;
}
.bb-newsince-go:hover { border-color: var(--bb-gold); }

/* Watched days get a quiet dot — visible enough to scan, not so loud
   it competes with the active-day highlight. */
.bb-day-chip.is-watched::after {
	content: '';
	position: absolute; top: 6px; right: 6px;
	width: 5px; height: 5px; border-radius: 999px;
	background: var(--bb-mint);
}
.bb-day-chip { position: relative; }
.bb-day-chip.is-active.is-watched::after { background: rgba(36,23,0,.45); }

/* -----------------------------------------------------------
   Emoji reactions
   ----------------------------------------------------------- */
.bb-reactions {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin-top: 18px; padding: 14px 16px;
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
}
.bb-reactions[hidden] { display: none; }
.bb-reactions-label { font-weight: 700; color: var(--bb-paper); font-size: var(--bb-step-0); }
.bb-reactions-row { display: flex; gap: 8px; flex-wrap: wrap; }

.bb-reaction {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 13px;
	border: 1px solid var(--bb-line);
	border-radius: 999px;
	background: var(--bb-raise);
	cursor: pointer;
	font-family: var(--bb-body); font-size: var(--bb-step--1); font-weight: 700;
	color: var(--bb-paper);
	transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.bb-reaction:hover { transform: translateY(-2px); border-color: var(--bb-gold); }
.bb-reaction.is-mine { background: var(--bb-gold); border-color: var(--bb-gold); color: #241700; }
.bb-reaction-emoji { font-size: 17px; line-height: 1; }
.bb-reaction-count { font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------
   Install (add to home screen) prompt
   ----------------------------------------------------------- */
.bb-install {
	position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9997;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 12px 16px;
	background: var(--bb-frame);
	color: #F4F1FF;
	border: 1px solid var(--bb-frame-line);
	border-radius: 12px;
	box-shadow: 0 14px 34px rgba(0,0,0,.32);
	font-size: var(--bb-step--1);
}
.bb-install span { flex: 1 1 auto; font-weight: 600; }
.bb-install button {
	padding: 8px 14px; border-radius: 999px; border: 0;
	font-family: var(--bb-body); font-size: var(--bb-step--1); font-weight: 800;
	cursor: pointer;
}
.bb-install-yes { background: var(--bb-gold); color: #241700; }
.bb-install-no { background: transparent; color: #A79FC9; border: 1px solid var(--bb-frame-line) !important; }
@media (min-width: 700px) {
	.bb-install { left: auto; right: 20px; bottom: 20px; max-width: 420px; }
}

#bb *, #bb *::before, #bb *::after { box-sizing: border-box; }

/* -----------------------------------------------------------
   The [hidden] attribute must actually hide things.

   `hidden` only works via a UA rule of `display: none`, which ANY
   author `display` declaration overrides. This stylesheet sets
   display on a lot of elements that are also toggled with the
   hidden attribute from JS — .bb-cdhero-live (flex),
   .bb-cdhero-tiles (grid) and .bb-fav-nudge (flex) among them —
   so `el.hidden = true` silently did nothing for those and the
   countdown band rendered its tiles AND its "ON AIR NOW" badge at
   the same time.

   There were already ten per-element `.x[hidden] { display: none }`
   rules dotted through this file, which is the same fix applied
   one element at a time and forgotten for every element added
   since. One scoped rule covers everything, including anything
   added later. !important is needed because `#bb [hidden]` and
   `#bb .some-class` have identical specificity, so source order
   would otherwise decide it.
   ----------------------------------------------------------- */
#bb [hidden] { display: none !important; }

/* Ambient light from the top — the house is lit from above.
   Single gradient, cheap, no images.
   isolation:isolate keeps the -1 layer inside #bb's own stacking context,
   so it sits behind the content but above the page background. Do NOT do
   this by giving `#bb > *` a position — that ID-specificity rule beats
   position:sticky on the day rail and silently unsticks it. */
#bb { isolation: isolate; }
#bb::before {
	content: '';
	position: absolute; inset: 0 0 auto 0; height: 360px;
	background: radial-gradient(120% 100% at 50% 0%, rgba(195,130,30,.09) 0%, rgba(250,248,243,0) 62%);
	pointer-events: none;
	z-index: -1;
}

#bb .bb-inner { max-width: 1140px; margin: 0 auto; padding: 0 18px; }

/* -----------------------------------------------------------
   Full-bleed band
   calc(50% - 50vw) only lands right when the theme container is
   centred. Blocksy sidebar pages are not, so bb.js measures the
   real offset and corrects on top of this. clientWidth, never
   100vw — 100vw includes the scrollbar.
   ----------------------------------------------------------- */
.bb-full-bleed {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* -----------------------------------------------------------
   Hero banner — optional key-art image above the masthead.
   Full-bleed, height-capped so a wide poster can't swallow the fold the
   way the uncapped player did before. Uses the .bb-full-bleed technique
   (see fixFullBleed in bb.js) exactly like the player band.
   ----------------------------------------------------------- */
.bb-hero {
	position: relative;
	overflow: hidden;
	max-height: 46vh;
	background: var(--bb-raise);
}
.bb-hero-link { display: block; }
.bb-hero-img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 46vh;
	object-fit: cover;
	object-position: center 28%; /* key art usually has faces near the top third */
}

/* -----------------------------------------------------------
   Masthead
   ----------------------------------------------------------- */
.bb-masthead { padding: 26px 0 16px; }
@media (min-width: 900px) { .bb-masthead { padding: 22px 0 14px; } }

.bb-masthead-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.bb-lang-toggle {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	margin-top: 2px;
	border: 1px solid var(--bb-line);
	border-radius: 999px;
	background: var(--bb-surface);
	color: var(--bb-mute);
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	font-weight: 700;
	cursor: pointer;
	transition: border-color .15s ease;
}
.bb-lang-toggle:hover { border-color: var(--bb-gold); }
.bb-lang-toggle [data-lang-opt] { padding: 2px 4px; border-radius: 4px; color: var(--bb-mute); }
.bb-lang-toggle [data-lang-opt].is-active { color: var(--bb-paper); background: var(--bb-raise); }
.bb-lang-sep { color: var(--bb-line); }
.bb-eyebrow {
	font-size: var(--bb-step--1);
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--bb-gold);
	margin: 0 0 6px;
}
#bb .bb-masthead-title {
	font-family: var(--bb-display);
	font-size: var(--bb-step-3);
	font-weight: 800;
	line-height: .95;
	letter-spacing: -.02em;
	color: var(--bb-paper);
	margin: 0;
}
.bb-masthead-sub {
	color: var(--bb-mute);
	font-size: var(--bb-step-0);
	margin: 8px 0 0;
	max-width: 46ch;
}

/* -----------------------------------------------------------
   SIGNATURE: the countdown hero (1.9.0)

   Replaces the old thin on-air text row. Same job, more of it: a
   returning viewer who arrives before the show should be able to
   read "when do I come back" from across the room.

   Quiet deep-slate when counting; the whole band goes signal-red
   with a breathing dot when live. This is the one loud element on
   the page — everything else stays disciplined.

   NOT full-bleed by CSS: this block sits outside .bb-inner and so
   already spans the wrap's width. Lesson 1 — margin-left: calc(50% -
   50vw) only lands when the theme container is centred, and this
   plugin's own JS correction is the only safe way to widen. Nothing
   here tries to escape its container.
   ----------------------------------------------------------- */
@keyframes bb-breathe {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: .35; transform: scale(.8); }
}

.bb-cdhero {
	background: var(--bb-band);
	border-bottom: 1px solid var(--bb-band-line);
	padding: 26px 18px 24px;
	text-align: center;
}
.bb-cdhero.is-live {
	background: var(--bb-signal);
	border-bottom-color: var(--bb-signal);
}
.bb-cdhero-inner {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.bb-cdhero-label {
	margin: 0;
	font-family: var(--bb-display);
	font-size: var(--bb-step--1);
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bb-gold);
}
#bb .bb-cdhero.is-live .bb-cdhero-label { color: rgba(255,255,255,.9); }

/* Tiles. Grid rather than flex so all four columns are exactly equal —
   a flex row lets "00" and "08" end up different widths once the digits
   change, and the whole block visibly jitters once a second. */
.bb-cdhero-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	max-width: 420px;
}
.bb-cdtile {
	background: var(--bb-band-tile);
	border: 1px solid var(--bb-band-tile-line);
	border-radius: 12px;
	padding: 12px 4px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
#bb .bb-cdhero.is-live .bb-cdtile {
	background: rgba(0,0,0,.16);
	border-color: rgba(255,255,255,.28);
}
.bb-cdtile-num {
	font-family: var(--bb-display);
	font-size: clamp(26px, 6vw, 40px);
	font-weight: 800;
	line-height: 1.05;
	color: var(--bb-paper);
	/* Tabular figures stop the number jumping horizontally as digits
	   change — without this a ticking seconds column wobbles. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.bb-cdtile-lab {
	font-family: var(--bb-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bb-mute);
}
#bb .bb-cdhero.is-live .bb-cdtile-lab { color: rgba(255,255,255,.8); }
/* The LIVE band is signal-red in BOTH themes, so everything on it must be
   explicitly white — it cannot use the theme text tokens the rest of this
   band now uses, which resolve to near-black in the light theme. The
   label / lab / when rules above already did this; the digits and the
   reminder buttons only got away without it while they were hardcoded
   white, so they need it now. */
#bb .bb-cdhero.is-live .bb-cdtile-num { color: #FFFFFF; }
#bb .bb-cdhero.is-live .bb-remind-btn {
	background: rgba(255,255,255,.14);
	border-color: rgba(255,255,255,.42);
	color: #FFFFFF;
}
#bb .bb-cdhero.is-live .bb-remind-btn:hover { background: rgba(255,255,255,.26); }
#bb .bb-cdhero.is-live .bb-remind-wa {
	background: rgba(0,0,0,.22);
	border-color: rgba(255,255,255,.5);
	color: #FFFFFF;
}

.bb-cdhero-live {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--bb-display);
	font-size: var(--bb-step-2);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
}
.bb-cdhero-dot {
	width: 13px; height: 13px; border-radius: 999px; flex: none;
	background: #fff;
	animation: bb-breathe 1.6s ease-in-out infinite;
}
.bb-cdhero-when {
	margin: 0;
	font-family: var(--bb-body);
	font-size: var(--bb-step-0);
	color: var(--bb-mute);
}
#bb .bb-cdhero.is-live .bb-cdhero-when { color: rgba(255,255,255,.88); }

.bb-cdhero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
/* Both reminder buttons hidden = an empty flex row still eating 10px of
   gap below the date line. Collapse it instead. */
.bb-cdhero-actions:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
	.bb-cdhero-dot { animation: none; }
}

@media (max-width: 560px) {
	.bb-cdhero { padding: 20px 14px 18px; }
	.bb-cdhero-tiles { gap: 7px; }
	.bb-cdtile { padding: 10px 2px 8px; border-radius: 10px; }
	.bb-cdhero-actions { width: 100%; }
	/* 44px minimum tap target under 500px — the harness asserts this. */
	.bb-cdhero-actions .bb-remind-btn { min-height: 44px; }
}

/* -----------------------------------------------------------
   Sticky live player
   ----------------------------------------------------------- */
/* The band is edge-to-edge at every size. The video inside it is capped by
   viewport HEIGHT, not width — a 16:9 box at 1920 wide is 1080px tall and
   swallows the entire fold, burying the day rail and promos. Capping by vh
   keeps the immersive full-bleed look while leaving the rail peeking.
   Tune the 64vh to taste: higher = more cinematic, less visible below. */
.bb-player-slot {
	position: relative;
	background: var(--bb-band);
	border-bottom: 1px solid var(--bb-band-line);
	/* Breathing room so the player's own frame (below) actually reads as
	   a floating card rather than being flush with the band edges. */
	padding: 22px 16px 18px;
}
.bb-player {
	position: relative; /* .bb-player-close anchors here, not the padded
	                        slot, so it stays pinned to the video's own
	                        corner regardless of slot padding. */
	background: var(--bb-frame);
	overflow: hidden;
	width: min(100%, calc(64vh * 16 / 9));
	margin-left: auto;
	margin-right: auto;
	border-radius: 18px;
	border: 1px solid rgba(28, 23, 48, .10);
	box-shadow:
		0 18px 40px -18px rgba(28, 23, 48, .30), /* ambient depth, softened for a light band */
		0 2px 6px rgba(28, 23, 48, .08);         /* close contact shadow so the card still lifts off the band */
}
/* Thin gold broadcast-accent line along the top, inside the radius —
   matches the "control room" direction at the top of this file without
   adding another border that would fight the rounded corners. */
.bb-player::before {
	content: "";
	position: absolute;
	top: 0; left: 14px; right: 14px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--bb-gold), transparent);
	opacity: .55;
	z-index: 1;
	pointer-events: none;
}
.bb-player-frame { position: relative; width: 100%; aspect-ratio: 16/9; }
.bb-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 560px) {
	/* Same idea, tighter — a full 22px band on a 360px phone eats too
	   much of the fold. */
	.bb-player-slot { padding: 14px 10px 12px; }
	.bb-player { border-radius: 14px; }
}

/* Never put transform: translateX(-50%) on an ancestor of this —
   it becomes the containing block and the fixed player breaks.
   Margin/inset technique only.
   width:auto resets the vh-derived cap above, or the detached player
   keeps that width and blows out of its corner. */
.bb-player.is-floating {
	position: fixed; z-index: 9999;
	top: 0; left: 0; right: 0;
	width: auto;
	box-shadow: 0 10px 34px rgba(28,23,48,.28);
	border: 1px solid var(--bb-frame-line);
}
@media (min-width: 900px) {
	.bb-player.is-floating {
		left: auto; right: 22px; top: 22px;
		width: 372px;
		border-radius: var(--bb-radius);
		border: 1px solid var(--bb-frame-line);
	}
}

/* Native <video> for the R2 HLS stream */
.bb-video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	background: #000;
	display: block;
}

/* Source switcher — only rendered when a day has BOTH our stream and the
   official embed. Sits on the band under the player. */
.bb-source-tabs {
	display: flex;
	gap: 6px;
	justify-content: center;
	padding: 10px 12px;
	background: var(--bb-frame);
}
.bb-source-tabs[hidden] { display: none; }
.bb-source-tab {
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--bb-frame-line);
	background: transparent;
	color: #C7C1E0;
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	font-weight: 700;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.bb-source-tab:hover { color: #fff; border-color: var(--bb-gold); }
.bb-source-tab.is-active {
	background: var(--bb-gold);
	border-color: var(--bb-gold);
	color: #2A1E00;
}

.bb-player-close {
	display: none;
	position: absolute; top: 8px; right: 8px; z-index: 2;
	width: 34px; height: 34px; border-radius: 999px; border: 0;
	background: rgba(0,0,0,.6); color: #fff; font-size: 19px; cursor: pointer;
	backdrop-filter: blur(6px);
}
.bb-player.is-floating .bb-player-close { display: block; }

.bb-watch-live-pill {
	display: none;
	position: fixed; z-index: 9998; right: 16px; bottom: 16px;
	align-items: center; gap: 8px;
	padding: 12px 20px; border-radius: 999px; border: 0;
	background: var(--bb-signal); color: #fff;
	font-family: var(--bb-body); font-weight: 800; font-size: var(--bb-step-0);
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(214,40,74,.35);
}
.bb-watch-live-pill.is-visible { display: inline-flex; }
.bb-watch-live-pill::before {
	content: ''; width: 8px; height: 8px; border-radius: 999px; background: #fff;
	animation: bb-breathe 1.6s ease-in-out infinite;
}

/* -----------------------------------------------------------
   Section headings
   ----------------------------------------------------------- */
.bb-section { padding-top: 36px; }
#bb .bb-section-title {
	font-family: var(--bb-display);
	font-size: var(--bb-step-2);
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--bb-paper);
	margin: 0 0 4px;
}
.bb-section-note { color: var(--bb-mute); font-size: var(--bb-step--1); margin: 0 0 18px; }

/* -----------------------------------------------------------
   Contestant roster — the house wall
   Status is carried by a coloured rail down the left edge, not
   by a floating pill, so it reads at a glance in a dense grid.
   ----------------------------------------------------------- */
.bb-roster-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bb-gap);
}
@media (min-width: 620px)  { .bb-roster-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px)  { .bb-roster-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1200px) { .bb-roster-grid { grid-template-columns: repeat(7, 1fr); } }

.bb-roster-card {
	position: relative; /* anchors the star button */
	display: block;
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	overflow: hidden;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* Roster cards became links (each contestant has a profile page now) —
   kill the theme's underline/colour so they still read as cards. */
#bb a.bb-roster-card,
#bb a.bb-roster-card:hover,
#bb a.bb-roster-card:focus { text-decoration: none; color: inherit; }
.bb-roster-card:hover { transform: translateY(-3px); border-color: var(--bb-gold); box-shadow: 0 10px 22px rgba(28,23,48,.10); }

/* The card is now a DIV (1.11.0) so the star button can sit beside the
   link rather than nested inside an <a>, which is invalid HTML and makes
   a nested interactive element's click target unreliable across
   browsers. .bb-roster-link fills the card exactly as the old <a> did. */
.bb-roster-link { display: block; text-decoration: none; color: inherit; }
#bb .bb-roster-link,
#bb .bb-roster-link:hover,
#bb .bb-roster-link:focus { text-decoration: none; color: inherit; }

.bb-fav-star {
	position: absolute;
	top: 6px; right: 6px;
	z-index: 2;
	width: 30px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(28,23,48,.55);
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: transform .12s ease, background .15s ease;
}
.bb-fav-star:hover { transform: scale(1.08); }
.bb-fav-star.is-fav { background: var(--bb-gold); color: #1C1730; }
/* 44px minimum tap target under 500px — matches the harness assertion
   used everywhere else in this plugin. The visual circle stays 30px;
   the hit area grows via a transparent border rather than the button
   itself ballooning and covering the photo. */
@media (max-width: 560px) {
	/* 44px minimum tap target. box-sizing is border-box across this
	   stylesheet, so a transparent border does NOT grow the hit area —
	   it eats into the 30px instead, which is how this shipped at 30px
	   and failed the tap-target assertion. content-box makes the border
	   add to the size, keeping the visible circle at 30px while the
	   touchable area is 44px. */
	/* `#bb *` (line 237) sets border-box for everything inside the hub,
	   and an ID beats a single class — so a bare `.bb-fav-star` rule
	   loses and the star stayed 30px. Both selectors are listed: the
	   #bb one for the hub roster, the plain one for the contestant
	   profile page, which renders outside #bb entirely. */
	#bb .bb-fav-star,
	.bb-fav-star {
		box-sizing: content-box;
		width: 30px; height: 30px;
		border: 7px solid transparent;
		background-clip: padding-box;
		margin: -7px;
	}
}

.bb-roster-photo { position: relative; aspect-ratio: 3/4; background: var(--bb-raise); }
.bb-roster-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* status rail */
.bb-roster-photo::after {
	content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: var(--bb-mute);
}
.bb-status-badge {
	position: absolute; left: 10px; bottom: 8px;
	font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	padding: 3px 7px; border-radius: 5px;
	background: rgba(18,14,35,.78); color: #F4F1FF;
	backdrop-filter: blur(4px);
}
.bb-roster-name {
	padding: 9px 10px 11px;
	font-size: var(--bb-step--1);
	font-weight: 700;
	line-height: 1.25;
	color: var(--bb-paper);
}

.bb-status-in_house .bb-roster-photo::after { background: var(--bb-mint); }
.bb-status-in_house .bb-status-badge { color: var(--bb-mint); }
.bb-status-wildcard .bb-roster-photo::after { background: var(--bb-gold); }
.bb-status-wildcard .bb-status-badge { color: var(--bb-gold); }
.bb-status-winner  .bb-roster-photo::after { background: var(--bb-gold); }
.bb-status-winner  .bb-status-badge { background: var(--bb-gold); color: #2A1E00; }
.bb-status-evicted .bb-roster-photo::after { background: var(--bb-signal); }
.bb-status-evicted .bb-status-badge { color: var(--bb-signal); }
.bb-status-evicted .bb-roster-photo img { filter: grayscale(1); opacity: .5; }
.bb-status-evicted .bb-roster-name { color: var(--bb-mute); }

/* -----------------------------------------------------------
   Weekly poll — vote-only, no live counts shown to the public
   (counts are stripped server-side, see class-bb2026-rest.php).
   Cards instead of bars, since there's no tally to fill a bar with.
   ----------------------------------------------------------- */
.bb-poll {
	position: relative;
	background: linear-gradient(150deg, #2A1B5C 0%, #6A2C8F 55%, #C23E7A 100%);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: var(--bb-radius);
	padding: 22px;
	box-shadow: 0 10px 30px rgba(90,30,120,.28);
	overflow: hidden;
}
.bb-poll::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 88% -10%, rgba(255,214,102,.35), transparent 45%),
		radial-gradient(circle at -10% 110%, rgba(79,217,168,.25), transparent 45%);
	pointer-events: none;
}
#bb .bb-poll-question {
	position: relative;
	font-family: var(--bb-display);
	font-size: var(--bb-step-1);
	font-weight: 800;
	color: #fff;
	margin: 0 0 16px;
	text-shadow: 0 1px 3px rgba(20,10,40,.3);
}
.bb-poll-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
}
.bb-poll-card {
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 12px;
	padding: 10px;
	text-align: center;
	backdrop-filter: blur(6px);
	transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.bb-poll-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.16); }
.bb-poll-card.is-picked {
	border-color: var(--bb-gold);
	background: rgba(255,214,102,.16);
	box-shadow: 0 0 0 2px rgba(255,214,102,.4);
}
.bb-poll-card-photo {
	width: 100%; aspect-ratio: 1 / 1;
	border-radius: 10px;
	background-size: cover; background-position: top center;
	background-color: rgba(255,255,255,.12);
	margin-bottom: 8px;
}
.bb-poll-card-photo--empty { background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); }
.bb-poll-card-name {
	font-size: var(--bb-step--1); font-weight: 800; color: #fff;
	margin-bottom: 8px;
	text-shadow: 0 1px 2px rgba(20,10,40,.3);
}
.bb-poll-card-pct-track {
	height: 6px; border-radius: 999px;
	background: rgba(255,255,255,.18);
	overflow: hidden;
	margin-bottom: 4px;
}
.bb-poll-card-pct-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--bb-gold), #FF8A5B);
	transition: width .55s cubic-bezier(.2,.7,.2,1);
}
.bb-poll-card-pct-label {
	font-size: var(--bb-step--1); font-weight: 800; color: #FFE7B0;
	margin-bottom: 8px;
	font-variant-numeric: tabular-nums;
}
.bb-poll-vote-btn {
	border: 0; border-radius: 999px;
	width: 100%;
	/* min-height, not just padding: the harness measured 30px on a 360px
	   viewport, under the ~44px tap-target guidance. This audience is
	   overwhelmingly on phones, so the button gets a floor. */
	min-height: 44px;
	padding: 10px 12px;
	background: linear-gradient(90deg, var(--bb-gold), #FF8A5B);
	color: #241700;
	font-family: var(--bb-body); font-weight: 800; font-size: var(--bb-step--1);
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease;
}
.bb-poll-vote-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bb-poll-card-badge {
	display: inline-block;
	font-size: var(--bb-step--1); font-weight: 800;
	color: #1C1730; background: var(--bb-mint);
	border-radius: 999px; padding: 5px 10px;
}
.bb-poll-card-badge--winner { background: var(--bb-gold); }
.bb-poll-card-admin-count {
	font-size: 10px; font-weight: 700; color: rgba(255,255,255,.65);
	margin-bottom: 6px;
}
.bb-poll-voted-note {
	position: relative;
	margin-top: 14px; font-size: var(--bb-step--1); font-weight: 700;
	color: #fff; opacity: .9;
}

/* -----------------------------------------------------------
   Poll history — collapsed by default, sits under the live poll.
   Shows who won, never the margin.
   ----------------------------------------------------------- */
.bb-poll-history { margin-top: 14px; }
.bb-poll-history-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 44px;  /* tap-target floor, same reasoning as the vote button */
	padding: 10px 16px; border-radius: 999px;
	border: 0; background: linear-gradient(90deg, #6A2C8F, #C23E7A);
	color: #fff; font-family: var(--bb-body);
	font-size: var(--bb-step--1); font-weight: 700;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}
.bb-poll-history-toggle:hover { filter: brightness(1.1); transform: translateY(-1px); }

.bb-poll-history-list { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.bb-poll-history-list[hidden] { display: none; }

.bb-poll-history-item {
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	padding: 16px 18px;
	box-shadow: 0 2px 10px rgba(28,23,48,.05);
}
.bb-poll-history-head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 6px;
}
.bb-poll-history-week {
	font-size: var(--bb-step--1); font-weight: 800; letter-spacing: .06em;
	text-transform: uppercase;
	background: linear-gradient(90deg, #6A2C8F, #C23E7A);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.bb-poll-history-final {
	font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	color: var(--bb-mute); background: var(--bb-raise);
	padding: 3px 8px; border-radius: 5px;
}
.bb-poll-history-question { font-weight: 700; margin-bottom: 12px; color: var(--bb-paper); }
.bb-poll-history-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 10px;
}
.bb-poll-history-card {
	text-align: center;
	padding: 8px;
	border-radius: 10px;
	border: 1px solid var(--bb-line);
	background: var(--bb-raise);
	opacity: .75;
}
.bb-poll-history-card.is-winner {
	opacity: 1;
	border-color: var(--bb-gold);
	background: linear-gradient(160deg, rgba(240,185,80,.18), rgba(240,185,80,.04));
}
.bb-poll-history-card .bb-poll-card-photo { margin-bottom: 6px; }
.bb-poll-history-card .bb-poll-card-name { color: var(--bb-paper); font-size: var(--bb-step--1); margin-bottom: 4px; text-shadow: none; }
.bb-poll-history-card .bb-poll-card-pct-label { color: var(--bb-gold); }
.bb-poll-history-card .bb-poll-card-badge--winner { font-size: 10px; padding: 3px 7px; }
#bb[data-theme="light"] .bb-poll-history-card .bb-poll-card-photo--empty { background: linear-gradient(135deg, rgba(28,23,48,.08), rgba(28,23,48,.02)); }

/* -----------------------------------------------------------
   Day rail
   Horizontal strip of every aired day, grouped by week. Chips are
   sized for thumbs first — 52px tall, generous hit area, because
   this is the primary navigation on a phone.
   ----------------------------------------------------------- */
.bb-dayrail-wrap {
	background: var(--bb-surface);
	border-bottom: 1px solid var(--bb-line);
	box-shadow: 0 1px 0 rgba(28,23,48,.02);
	position: sticky;
	/* Set by bb.js: on phones the floating player pins across the top, so
	   the rail has to drop below it instead of hiding underneath. */
	top: var(--bb-stick-offset, 0px);
	z-index: 40;
	transition: top .18s ease;
}
.bb-dayrail {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	padding: 12px 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}
.bb-dayrail::-webkit-scrollbar { display: none; }

.bb-rail-week {
	flex: none;
	padding: 0 10px 0 4px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bb-mute);
	white-space: nowrap;
	border-left: 1px solid var(--bb-line);
	margin-left: 4px;
}
.bb-rail-week:first-child { border-left: 0; margin-left: 0; }

.bb-day-chip {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-width: 54px;
	height: 54px;
	padding: 0 10px;
	border: 1px solid var(--bb-line);
	border-radius: 11px;
	background: var(--bb-raise);
	color: var(--bb-paper);
	font-family: var(--bb-body);
	text-decoration: none;   /* now an <a>, for real crawlable/shareable links */
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.bb-day-chip:hover { border-color: var(--bb-gold); background: var(--bb-surface); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(28,23,48,.08); }
.bb-day-chip-num { font-size: 17px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.bb-day-chip-label {
	font-size: 9px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--bb-mute);
}
.bb-day-chip.is-active {
	background: var(--bb-gold);
	border-color: var(--bb-gold);
	color: #241700;
	box-shadow: 0 4px 12px rgba(195,130,30,.35);
}
.bb-day-chip.is-active .bb-day-chip-label { color: rgba(36,23,0,.68); }

/* -----------------------------------------------------------
   Day search / jump
   ----------------------------------------------------------- */
.bb-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.bb-dayrail-bar { display: flex; align-items: center; gap: 12px; }

.bb-dayjump { position: relative; flex: none; }
.bb-dayjump-input {
	width: 132px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--bb-line);
	border-radius: 10px;
	background: var(--bb-raise);
	color: var(--bb-paper);
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	transition: border-color .15s ease, width .18s ease, background .15s ease;
}
.bb-dayjump-input::placeholder { color: var(--bb-mute); }
.bb-dayjump-input:focus {
	outline: none;
	width: 190px;
	background: var(--bb-surface);
	border-color: var(--bb-gold);
}
@media (max-width: 520px) {
	.bb-dayjump-input { width: 92px; }
	.bb-dayjump-input:focus { width: 140px; }
}

.bb-dayjump-results {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
	min-width: 260px; max-height: 320px; overflow-y: auto;
	margin: 0; padding: 6px;
	list-style: none;
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: 12px;
	box-shadow: 0 16px 34px rgba(28,23,48,.16);
}
.bb-dayjump-results[hidden] { display: none; }
.bb-dayjump-item {
	display: flex; flex-direction: column; gap: 1px;
	padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.bb-dayjump-item.is-highlighted { background: var(--bb-raise); }
.bb-dayjump-day {
	font-size: 10px; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: var(--bb-gold);
}
.bb-dayjump-title { font-size: var(--bb-step--1); font-weight: 600; color: var(--bb-paper); }
.bb-dayjump-empty { padding: 10px; font-size: var(--bb-step--1); color: var(--bb-mute); }

/* -----------------------------------------------------------
   Now playing
   ----------------------------------------------------------- */
.bb-nowplaying { padding: 26px 0 4px; }
.bb-nowplaying.is-loading { opacity: .45; }
.bb-nowplaying-eyebrow {
	font-size: var(--bb-step--1);
	font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--bb-gold);
	margin: 0 0 6px;
}
#bb .bb-nowplaying-title {
	font-family: var(--bb-display);
	font-size: var(--bb-step-2);
	font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
	color: var(--bb-paper);
	margin: 0;
}
.bb-nowplaying-date {
	font-size: var(--bb-step--1);
	color: var(--bb-mute);
	margin: 8px 0 0;
}
.bb-nowplaying-summary { color: var(--bb-mute); margin-top: 14px; max-width: 68ch; }
.bb-nowplaying-summary p { margin: 0 0 10px; }
.bb-nowplaying-empty { color: var(--bb-mute); padding: 20px 0; }

.bb-player-empty {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; gap: 10px;
	align-items: center; justify-content: center;
	background: var(--bb-frame);
	color: #A79FC9;
	font-size: var(--bb-step-0);
	text-align: center; padding: 20px;
}
/* Editor-only diagnostic, never shown to visitors */
.bb-player-diag {
	max-width: 46ch;
	font-size: var(--bb-step--1);
	color: var(--bb-gold);
	line-height: 1.5;
}
.bb-player-diag a { color: var(--bb-paper); text-decoration: underline; }

/* Editor-only stream failure banner */
.bb-stream-diag {
	max-width: 1140px;
	margin: 10px auto 0;
	padding: 12px 16px;
	border: 1px solid var(--bb-gold);
	border-radius: 10px;
	background: rgba(242,179,61,.08);
	color: var(--bb-paper);
	font-size: var(--bb-step--1);
	line-height: 1.5;
}
.bb-stream-diag strong { color: var(--bb-gold); display: block; margin-bottom: 4px; }
.bb-stream-diag em { display: block; margin-top: 6px; color: var(--bb-mute); font-style: normal; font-size: 11px; }

.bb-episode-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.bb-episode-actions a, .bb-episode-actions button {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 20px; border-radius: 9px;
	border: 0; background: var(--bb-gold);
	color: #2A1E00; text-decoration: none;
	font-family: var(--bb-body); font-size: var(--bb-step-0); font-weight: 800;
	cursor: pointer;
	transition: filter .15s ease;
}
.bb-episode-actions a:hover, .bb-episode-actions button:hover { filter: brightness(1.08); }

/* -----------------------------------------------------------
   Promo grid
   Facade cards: a thumbnail until tapped, then the real iframe.
   Six autoloading embeds would be a heavy hit on mobile data,
   which is most of this audience.
   ----------------------------------------------------------- */
.bb-promo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--bb-gap);
}
@media (min-width: 700px)  { .bb-promo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .bb-promo-grid { grid-template-columns: repeat(3, 1fr); } }

.bb-promo {
	display: block; width: 100%; padding: 0; text-align: left;
	background: transparent; border: 0; cursor: pointer;
	font-family: var(--bb-body);
}

/* The frame: a thin gold hairline that lifts on hover, so the
   promos read as a shelf of tapes rather than flat thumbnails. */
.bb-promo-frame {
	position: relative;
	display: block;
	aspect-ratio: 16/9;
	border-radius: 12px;
	overflow: hidden;
	background: var(--bb-frame);
	border: 2px solid var(--bb-frame-line);
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bb-promo:hover .bb-promo-frame {
	border-color: var(--bb-gold);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(28,23,48,.22);
}
.bb-promo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.bb-promo-thumb {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .3s ease, opacity .18s ease;
}
.bb-promo:hover .bb-promo-thumb { transform: scale(1.04); opacity: .88; }

.bb-promo-play {
	position: absolute; left: 50%; top: 50%;
	width: 54px; height: 54px; margin: -27px 0 0 -27px;
	border-radius: 999px;
	background: rgba(18,14,35,.62);
	border: 1.5px solid rgba(255,255,255,.85);
	backdrop-filter: blur(4px);
	transition: background .18s ease, transform .18s ease;
}
.bb-promo-play::after {
	content: '';
	position: absolute; left: 50%; top: 50%;
	margin: -8px 0 0 -5px;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
}
.bb-promo:hover .bb-promo-play { background: var(--bb-signal); border-color: var(--bb-signal); transform: scale(1.06); }

.bb-promo-meta { display: flex; align-items: center; gap: 8px; padding: 9px 2px 0; }
.bb-promo-num {
	font-size: 11px; font-weight: 800; letter-spacing: .12em;
	color: var(--bb-gold); font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------
   Photo gallery
   Uniform 4:3 tiles regardless of what shape the uploaded image is —
   press stills, vertical phone shots and wide banners all get cropped
   to the same footprint so the grid reads as a set rather than a pile.
   Framed to match the promo cards above it.
   ----------------------------------------------------------- */
.bb-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--bb-gap);
}
@media (min-width: 620px)  { .bb-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .bb-gallery-grid { grid-template-columns: repeat(4, 1fr); } }

.bb-gallery-item {
	display: block;
	width: 100%;
	padding: 0;
	border: 2px solid var(--bb-frame-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--bb-frame);
	cursor: zoom-in;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.bb-gallery-item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .3s ease;
}
.bb-gallery-item:hover {
	transform: translateY(-3px);
	border-color: var(--bb-gold);
	box-shadow: 0 14px 30px rgba(28,23,48,.22);
}
.bb-gallery-item:hover img { transform: scale(1.04); }

/* -----------------------------------------------------------
   Share row
   ----------------------------------------------------------- */
.bb-share {
	display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
	margin-top: 40px; padding-top: 24px;
	border-top: 1px solid var(--bb-line);
}
.bb-share-label {
	font-size: var(--bb-step--1); font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--bb-gold);
	margin-right: 4px;
}
.bb-share-btn {
	padding: 9px 16px; border-radius: 999px;
	border: 1px solid var(--bb-line); background: var(--bb-surface);
	color: var(--bb-paper);
	font-family: var(--bb-body); font-size: var(--bb-step--1); font-weight: 700;
	cursor: pointer;
	transition: border-color .15s ease;
}
.bb-share-btn:hover { border-color: var(--bb-gold); }

/* -----------------------------------------------------------
   Lightbox
   ----------------------------------------------------------- */
.bb-lightbox {
	position: fixed; inset: 0; z-index: 10000;
	background: rgba(10,7,20,.94);
	display: flex; align-items: center; justify-content: center;
	backdrop-filter: blur(3px);
}
.bb-lightbox[hidden] { display: none; }
.bb-lightbox-img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 6px; touch-action: pan-y; }
.bb-lightbox-close, .bb-lightbox-prev, .bb-lightbox-next {
	position: absolute;
	width: 46px; height: 46px; border-radius: 999px; border: 0;
	background: rgba(255,255,255,.12); color: #fff; font-size: 20px; cursor: pointer;
}
.bb-lightbox-close:hover, .bb-lightbox-prev:hover, .bb-lightbox-next:hover { background: rgba(255,255,255,.22); }
.bb-lightbox-close { top: 18px; right: 18px; }
.bb-lightbox-prev { left: 14px; top: 50%; margin-top: -23px; }
.bb-lightbox-next { right: 14px; top: 50%; margin-top: -23px; }

/* -----------------------------------------------------------
   Focus + motion floor
   These are separate rules on purpose. An unsupported selector
   inside a comma list kills the ENTIRE rule on older browsers,
   so the :has() variant never shares a block with the plain one.
   ----------------------------------------------------------- */
#bb :focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 3px; border-radius: 4px; }
.bb-week:has(.bb-week-toggle:focus-visible) { border-color: var(--bb-gold); }

@media (prefers-reduced-motion: reduce) {
	#bb *, #bb *::before, #bb *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* -----------------------------------------------------------
   Weekly recap + buzz meter
   Sits above the day rail: someone who missed three days needs
   the summary before they need the 100-day archive.
   ----------------------------------------------------------- */
.bb-recap {
	margin: 16px 0 4px;
	padding: 16px 18px;
	border-radius: var(--bb-radius);
	border: 1px solid var(--bb-line);
	background: linear-gradient(135deg, rgba(106,44,143,.10), rgba(194,62,122,.08));
}
.bb-recap[hidden] { display: none; }
.bb-recap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#bb .bb-recap-title {
	font-family: var(--bb-display);
	font-size: var(--bb-step-1);
	font-weight: 800;
	color: var(--bb-paper);
	margin: 0;
}

.bb-recap-strip {
	display: flex; gap: 8px; flex-wrap: wrap;
}
#bb a.bb-recap-tile, #bb a.bb-recap-tile:hover { text-decoration: none; }
.bb-recap-tile {
	flex: 0 0 auto;
	min-width: 58px;
	display: flex; flex-direction: column; align-items: center; gap: 1px;
	padding: 8px 6px;
	border-radius: 10px;
	border: 1px solid var(--bb-line);
	background: var(--bb-surface);
	color: var(--bb-paper);
	transition: transform .15s ease, border-color .15s ease;
}
.bb-recap-tile:hover { transform: translateY(-2px); border-color: var(--bb-gold); }
.bb-recap-tile-day {
	font-size: 10px; font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase; color: var(--bb-mute);
}
.bb-recap-tile-num { font-size: var(--bb-step-1); font-weight: 800; line-height: 1.1; }
.bb-recap-tile-emoji { font-size: 13px; line-height: 1; }

.bb-buzz { margin-top: 14px; }
.bb-buzz-label {
	font-size: var(--bb-step--1); font-weight: 800;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--bb-mute);
	margin-bottom: 6px;
}
#bb a.bb-buzz-row, #bb a.bb-buzz-row:hover { text-decoration: none; color: inherit; }
.bb-buzz-row {
	display: flex; align-items: center; gap: 10px;
	padding: 7px 10px;
	border-radius: 9px;
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	margin-bottom: 6px;
	transition: border-color .15s ease;
}
.bb-buzz-row:hover { border-color: var(--bb-gold); }
.bb-buzz-rank {
	flex: 0 0 auto;
	width: 22px; height: 22px; border-radius: 50%;
	display: grid; place-items: center;
	background: linear-gradient(135deg, #6A2C8F, #C23E7A);
	color: #fff; font-size: 11px; font-weight: 800;
}
.bb-buzz-title {
	flex: 1 1 auto; min-width: 0;
	font-size: var(--bb-step--1); font-weight: 700;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bb-buzz-count {
	flex: 0 0 auto;
	font-size: var(--bb-step--1); font-weight: 800;
	color: var(--bb-gold);
	font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------
   Related content rail ("More on ThisaiTV")
   ----------------------------------------------------------- */
.bb-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--bb-gap);
}
#bb a.bb-related-card, #bb a.bb-related-card:hover { text-decoration: none; color: inherit; }
.bb-related-card {
	display: block;
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	overflow: hidden;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.bb-related-card:hover { transform: translateY(-3px); border-color: var(--bb-gold); box-shadow: 0 10px 22px rgba(28,23,48,.10); }
.bb-related-thumb { display: block; aspect-ratio: 16/9; background: var(--bb-raise); }
.bb-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-related-thumb--empty { display: block; width: 100%; height: 100%; }
.bb-related-title {
	display: block;
	padding: 10px 12px;
	font-size: var(--bb-step--1); font-weight: 700;
	color: var(--bb-paper);
	line-height: 1.35;
}

/* -----------------------------------------------------------
   Contestant profile page (bb2026-single-contestant.php)
   Not inside #bb — this is its own template, so these rules are
   scoped to .bb-cont-page and set colours explicitly rather than
   relying on inheritance (lesson: inheritance loses to theme h1/h2).
   ----------------------------------------------------------- */
.bb-cont-page {
	--bbc-ink: #FAF8F3;
	--bbc-surface: #FFFFFF;
	--bbc-line: #E7E2D3;
	--bbc-gold: #C3821E;
	--bbc-paper: #1C1730;
	--bbc-mute: #6D6780;
	font-family: 'Catamaran', 'Noto Sans Tamil', system-ui, sans-serif;
	background: var(--bbc-ink);
	padding: 28px 0 40px;
}
.bb-cont-inner { max-width: 900px; margin: 0 auto; padding: 0 18px; }

.bb-cont-eyebrow { font-size: 13px; color: var(--bbc-mute); margin: 0 0 14px; }
.bb-cont-page .bb-cont-eyebrow a { color: var(--bbc-gold); }

.bb-cont-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	background: var(--bbc-surface);
	border: 1px solid var(--bbc-line);
	border-radius: 14px;
	padding: 18px;
	margin-bottom: 22px;
}
@media (min-width: 620px) { .bb-cont-hero { grid-template-columns: 280px 1fr; } }
.bb-cont-photo img { width: 100%; height: auto; display: block; border-radius: 10px; }

.bb-cont-page .bb-cont-title {
	font-size: clamp(28px, 1.4rem + 2.4vw, 46px);
	font-weight: 800;
	color: var(--bbc-paper);
	margin: 8px 0 4px;
	line-height: 1.1;
}
.bb-status-evicted .bb-cont-status { background: #6D6780; }
.bb-status-wildcard .bb-cont-status { background: #C3821E; }
.bb-status-winner   .bb-cont-status { background: linear-gradient(90deg, #C3821E, #E0A73C); }
.bb-cont-knownfor { color: var(--bbc-mute); font-size: 16px; margin: 0 0 14px; }

.bb-cont-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 0 0 12px; }
.bb-cont-facts dt { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bbc-mute); margin: 0 0 2px; }
.bb-cont-facts dd { margin: 0; font-weight: 700; color: var(--bbc-paper); }
.bb-cont-page .bb-cont-social a { color: var(--bbc-gold); font-weight: 700; }

.bb-cont-bio { color: var(--bbc-paper); line-height: 1.7; margin-bottom: 26px; }
.bb-cont-page .bb-cont-h2 {
	font-size: 22px; font-weight: 800; color: var(--bbc-paper);
	margin: 26px 0 12px;
}

.bb-cont-eps { list-style: none; margin: 0 0 20px; padding: 0; }
.bb-cont-eps li { margin-bottom: 7px; }
.bb-cont-page .bb-cont-eps a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding: 11px 14px;
	background: var(--bbc-surface);
	border: 1px solid var(--bbc-line);
	border-radius: 10px;
	text-decoration: none;
	color: var(--bbc-paper);
	transition: border-color .15s ease;
}
.bb-cont-page .bb-cont-eps a:hover { border-color: var(--bbc-gold); }
.bb-cont-ep-title { font-weight: 700; }
.bb-cont-ep-meta { font-size: 12px; color: var(--bbc-mute); white-space: nowrap; }

.bb-cont-page .bb-cont-cta a {
	display: inline-block;
	padding: 11px 18px; border-radius: 999px;
	background: linear-gradient(90deg, #6A2C8F, #C23E7A);
	color: #fff; font-weight: 800; text-decoration: none;
}

.bb-cont-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.bb-cont-page .bb-cont-other { text-decoration: none; color: var(--bbc-paper); text-align: center; display: block; }
.bb-cont-other-photo { display: block; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; background: #F2EFE6; border: 1px solid var(--bbc-line); }
.bb-cont-other-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-cont-other-name { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; }
.bb-cont-other.bb-status-evicted { opacity: .6; }

/* -----------------------------------------------------------
   Single episode page (bb2026-single-episode.php)
   These were missing entirely — the template shipped with markup
   and no rules, because enqueue() only ran on the shortcode page.
   Same scoping approach as the contestant page: own vars, explicit
   colours on headings.
   ----------------------------------------------------------- */
.bb-ep-page {
	--bbc-ink: #FAF8F3;
	--bbc-surface: #FFFFFF;
	--bbc-line: #E7E2D3;
	--bbc-gold: #C3821E;
	--bbc-paper: #1C1730;
	--bbc-mute: #6D6780;
	font-family: 'Catamaran', 'Noto Sans Tamil', system-ui, sans-serif;
	background: var(--bbc-ink);
	padding: 28px 0 40px;
}
.bb-ep-inner { max-width: 900px; margin: 0 auto; padding: 0 18px; }

.bb-ep-eyebrow { font-size: 13px; color: var(--bbc-mute); margin: 0 0 10px; }
.bb-ep-page .bb-ep-eyebrow a { color: var(--bbc-gold); }
.bb-ep-page .bb-ep-title {
	font-size: clamp(26px, 1.4rem + 2.2vw, 42px);
	font-weight: 800; color: var(--bbc-paper);
	margin: 0 0 4px; line-height: 1.15;
}
.bb-ep-date { color: var(--bbc-mute); margin: 0 0 18px; }
.bb-ep-header-img { width: 100%; height: auto; border-radius: 12px; display: block; margin-bottom: 18px; }

.bb-ep-player { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #120E20; margin-bottom: 20px; }
.bb-ep-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.bb-ep-summary { color: var(--bbc-paper); line-height: 1.7; margin-bottom: 24px; }
.bb-ep-page h2 { font-size: 22px; font-weight: 800; color: var(--bbc-paper); margin: 24px 0 12px; }

/* Promos on the episode page: inline click-to-load, not links to YouTube. */
.bb-sp-promos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
	margin: 0 0 22px;
}
.bb-sp-promo {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}
.bb-sp-promo-frame {
	position: relative;
	display: block;
	aspect-ratio: 16/9;
	border-radius: 14px;
	overflow: hidden;
	background: #120E20;
	box-shadow: 0 6px 18px rgba(28,23,48,.16);
	/* Gradient hairline instead of a flat border. */
	border: 1px solid rgba(255,255,255,.10);
	transition: transform .18s ease, box-shadow .18s ease;
}
.bb-sp-promo:hover .bb-sp-promo-frame,
.bb-sp-promo:focus-visible .bb-sp-promo-frame {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(90,30,120,.30);
}
/* YouTube's hqdefault is 4:3 with letterbox bars baked in; cover-crop to
   16:9 so the tiles line up instead of showing black edges. */
.bb-sp-promo-frame img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.bb-sp-promo-frame::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(18,14,35,0) 45%, rgba(18,14,35,.55) 100%);
	pointer-events: none;
}
.bb-sp-promo-play {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 54px; height: 54px;
	border-radius: 50%;
	background: linear-gradient(135deg, #6A2C8F, #C23E7A);
	box-shadow: 0 4px 14px rgba(0,0,0,.35);
	z-index: 1;
	transition: transform .18s ease, filter .18s ease;
}
.bb-sp-promo-play::before {
	content: '';
	position: absolute; left: 52%; top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #fff;
}
.bb-sp-promo:hover .bb-sp-promo-play { transform: translate(-50%, -50%) scale(1.08); filter: brightness(1.1); }
.bb-sp-promo-num {
	position: absolute; left: 10px; bottom: 8px;
	z-index: 1;
	font-size: 11px; font-weight: 800; letter-spacing: .08em;
	color: #fff;
	background: rgba(18,14,35,.6);
	padding: 3px 8px; border-radius: 999px;
	backdrop-filter: blur(4px);
}
/* Once tapped the facade is replaced by a real iframe. */
.bb-sp-promo--playing .bb-sp-promo-frame { transform: none; }
.bb-sp-promo--playing iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
}

/* Top player on the episode page (ThisaiTV HLS + official embed). */
.bb-sp-player { margin: 0 0 22px; }
.bb-sp-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.bb-sp-tab {
	border: 1px solid var(--bbc-line);
	background: var(--bbc-surface);
	color: var(--bbc-mute);
	font-family: inherit; font-size: 13px; font-weight: 800;
	padding: 8px 14px;
	min-height: 40px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bb-sp-tab.is-active {
	background: linear-gradient(90deg, #6A2C8F, #C23E7A);
	border-color: transparent;
	color: #fff;
}
.bb-sp-frame {
	position: relative;
	aspect-ratio: 16/9;
	border-radius: 14px;
	overflow: hidden;
	background: #120E20;
	box-shadow: 0 10px 28px rgba(28,23,48,.20);
}
.bb-sp-frame iframe,
.bb-sp-frame .bb-sp-video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
	display: block;
	background: #120E20;
}
.bb-sp-empty {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	color: #A79FC9; font-size: 14px; text-align: center; padding: 20px;
}
/* Editor-only stream diagnostic. */
.bb-sp-note {
	margin: 8px 0 0;
	font-size: 12px;
	color: #b3541e;
	background: #fdf3e7;
	border: 1px solid #f0d9bd;
	border-radius: 8px;
	padding: 8px 10px;
}
.bb-sp-note[hidden] { display: none; }

.bb-ep-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.bb-ep-gallery a { display: block; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: #F2EFE6; }
.bb-ep-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bb-ep-page .bb-ep-cta a {
	display: inline-block; padding: 11px 18px; border-radius: 999px;
	background: linear-gradient(90deg, #6A2C8F, #C23E7A);
	color: #fff; font-weight: 800; text-decoration: none;
}
.bb-ep-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.bb-ep-page .bb-ep-nav a { color: var(--bbc-gold); font-weight: 700; text-decoration: none; }
.bb-ep-page .bb-ep-nav a:hover { text-decoration: underline; }

/* -----------------------------------------------------------
   Full-bleed is NOT used on the standalone templates.

   They previously carried .bb-full-bleed-container, which applied
   margin-left: calc(50% - 50vw). Lesson 1 says that only lands when the
   theme's content container is CENTRED — and on a Blocksy sidebar layout
   it isn't. Measured in the harness at 1440px: the main column starts at
   120px, the calc subtracts 285px, and the whole article ended up at
   left: -165px — pushed off the left edge of the screen, unreachable.

   The hub page survives this because bb.js measures and corrects. bb.js
   deliberately doesn't load on these templates (it needs the hub's
   markup), so there's no correction available and no safe way to detect
   centring in CSS alone. These pages are single-column article layouts;
   sitting inside the theme's normal container looks intentional, whereas
   being dragged off-screen does not.

   If full-bleed is ever wanted here, it needs the JS measurement — not
   a bare calc().
   ----------------------------------------------------------- */
/* Headings must set font-family explicitly, not just colour.
   The theme's `h1, h2 { font-family: Georgia, serif }` beats the container's
   inherited family (inheritance carries no specificity — lesson 10, which
   applies to font just as much as colour). Left alone, every heading on
   these pages renders serif — and worse, Catamaran is what covers TAMIL
   here, so Tamil headings fall back to whatever the system offers. */
.bb-cont-page h1, .bb-cont-page h2, .bb-cont-page h3,
.bb-ep-page h1, .bb-ep-page h2, .bb-ep-page h3,
#bb h1, #bb h2, #bb h3 {
	font-family: 'Catamaran', 'Noto Sans Tamil', system-ui, sans-serif;
}

.bb-cont-headline { min-width: 0; }

/* Contestant-page status pill. Deliberately NOT reusing .bb-status-badge:
   that rule is position:absolute for the roster photo's relative parent, and
   with no positioned ancestor here it escaped to the corner of the page. */
.bb-cont-status {
	display: inline-block;
	position: static;
	font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	padding: 4px 9px; border-radius: 999px;
	background: #1E9A6C; color: #fff;
}

/* -----------------------------------------------------------
   What's New hero — first block on the hub.

   Answers "is it on?" and "what did I miss?" before any browsing
   UI. Deliberately the loudest thing on the page; everything below
   it is quieter by comparison so this reads as the entry point.
   ----------------------------------------------------------- */
/* Full-bleed wrapper: overrides .bb-inner's 1140px cap so the hero spans
   the same width as the player band above it, and adds the vertical
   breathing room the band edges don't provide. Padding matches
   .bb-player-slot's 16px so the two cards' edges line up. Written as its
   own class rather than `.bb-inner:has(> .bb-whatsnew)` — :has() support
   is not safe to assume on this audience's phones (lesson 11). */
#bb .bb-whatsnew-wrap {
	max-width: none;
	padding-left: 16px;
	padding-right: 16px;
	margin-top: 22px;
	margin-bottom: 22px;
}
@media (max-width: 560px) {
	#bb .bb-whatsnew-wrap {
		padding-left: 10px;
		padding-right: 10px;
		margin-top: 14px;
		margin-bottom: 14px;
	}
}

.bb-whatsnew {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 18px 20px 20px;
	border-radius: 18px;
	background: linear-gradient(135deg, #1B1240 0%, #4A1E6B 45%, #A62E6B 100%);
	box-shadow: 0 14px 36px rgba(60,20,90,.30);
	color: #fff;
}
.bb-whatsnew[hidden] { display: none; }
.bb-whatsnew::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 92% -20%, rgba(255,214,102,.32), transparent 48%),
		radial-gradient(circle at -8% 120%, rgba(79,217,168,.20), transparent 46%);
	pointer-events: none;
}
.bb-wn-head {
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	margin-bottom: 14px;
}
#bb .bb-wn-heading {
	margin: 0;
	font-family: var(--bb-display);
	font-size: var(--bb-step-1);
	font-weight: 800;
	color: #fff;
	letter-spacing: -.01em;
}

/* ---- status pill (LIVE / countdown) ---- */
.bb-wn-status {
	display: inline-flex; align-items: baseline; gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.20);
	backdrop-filter: blur(6px);
	font-size: var(--bb-step--1);
	white-space: nowrap;
}
.bb-wn-status-text { font-weight: 700; color: #fff; }
.bb-wn-status-text strong { font-weight: 800; color: var(--bb-gold); font-variant-numeric: tabular-nums; }
.bb-wn-status-sub { font-size: 11px; color: rgba(255,255,255,.72); }

.bb-wn-status.is-live {
	background: rgba(214,40,74,.30);
	border-color: rgba(255,140,160,.55);
}
.bb-wn-status.is-live .bb-wn-status-text { color: #FFD9E0; letter-spacing: .06em; text-transform: uppercase; }
.bb-wn-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #FF4D6D;
	box-shadow: 0 0 0 0 rgba(255,77,109,.7);
	animation: bb-wn-pulse 1.8s infinite;
	align-self: center;
}
@keyframes bb-wn-pulse {
	70%  { box-shadow: 0 0 0 9px rgba(255,77,109,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,77,109,0); }
}

/* ---- headline row ---- */
.bb-wn-main {
	position: relative;
	display: grid;
	grid-template-columns: 128px 1fr;
	gap: 14px;
	align-items: center;
}
@media (max-width: 480px) { .bb-wn-main { grid-template-columns: 96px 1fr; gap: 12px; } }

.bb-wn-thumb {
	display: block;
	aspect-ratio: 16/9;
	border-radius: 12px;
	background-color: rgba(255,255,255,.12);
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(255,255,255,.18);
}
.bb-wn-thumb--empty {
	background-image: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
}
.bb-wn-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.bb-wn-kicker {
	font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--bb-gold);
}
.bb-wn-title {
	font-weight: 800;
	font-size: var(--bb-step-0);
	color: #fff;
	line-height: 1.25;
	/* Two lines then ellipsis — episode titles vary wildly in length and
	   an unbounded one pushes the CTA out of the card on a phone. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bb-wn-cta {
	margin-top: 4px;
	border: 0; border-radius: 999px;
	min-height: 40px;
	padding: 9px 18px;
	background: linear-gradient(90deg, var(--bb-gold), #FF8A5B);
	color: #241700;
	font-family: var(--bb-body); font-weight: 800; font-size: var(--bb-step--1);
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease;
}
.bb-wn-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ---- quick jumps to other unseen days ---- */
.bb-wn-chips {
	position: relative;
	display: flex; flex-wrap: wrap; gap: 7px;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid rgba(255,255,255,.16);
}
.bb-wn-chip {
	border: 1px solid rgba(255,255,255,.22);
	background: rgba(255,255,255,.10);
	color: #fff;
	font-family: var(--bb-body); font-size: var(--bb-step--1); font-weight: 700;
	min-height: 34px;
	padding: 6px 13px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.bb-wn-chip:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.45); }
.bb-wn-more { align-self: center; font-size: var(--bb-step--1); color: rgba(255,255,255,.65); font-weight: 700; }

/* Stream time on the single-episode page. */
.bb-sp-when {
	display: inline-flex; align-items: baseline; gap: 8px;
	margin: 0 0 14px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--bbc-surface);
	border: 1px solid var(--bbc-line);
	font-size: 13px;
}
.bb-sp-when-label { font-weight: 800; color: var(--bbc-paper); }
.bb-sp-when-sub { color: var(--bbc-mute); font-size: 12px; }
.bb-sp-when.is-live { background: #fdeef0; border-color: #f3c2cb; }
.bb-sp-when.is-live .bb-sp-when-label { color: #C2185B; text-transform: uppercase; letter-spacing: .06em; }

/* -----------------------------------------------------------
   Prediction game — private guess, scored against the real eviction.
   Visually distinct from the poll (which is purple/pink) so the two
   don't read as the same control: this one is cooler and calmer.
   ----------------------------------------------------------- */
.bb-predict {
	position: relative;
	overflow: hidden;
	margin-top: 14px;
	padding: 18px 20px;
	border-radius: 16px;
	background: linear-gradient(140deg, #10233F 0%, #1B4A6B 55%, #1E7A6B 100%);
	box-shadow: 0 10px 28px rgba(16,35,63,.26);
	color: #fff;
}
.bb-predict[hidden] { display: none; }
.bb-predict::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(circle at 90% -15%, rgba(120,240,200,.22), transparent 46%);
	pointer-events: none;
}
.bb-pd-head {
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; flex-wrap: wrap;
	margin-bottom: 4px;
}
#bb .bb-pd-title {
	margin: 0;
	font-family: var(--bb-display);
	font-size: var(--bb-step-1);
	font-weight: 800;
	color: #fff;
}
.bb-pd-sub {
	position: relative;
	margin: 0 0 14px;
	font-size: var(--bb-step--1);
	color: rgba(255,255,255,.75);
}
.bb-pd-streak, .bb-pd-record {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: var(--bb-step--1); font-weight: 800;
	background: rgba(255,214,102,.20);
	border: 1px solid rgba(255,214,102,.45);
	color: #FFE7B0;
	white-space: nowrap;
}
.bb-pd-record { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; }

.bb-pd-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
}
.bb-pd-card {
	border: 1px solid rgba(255,255,255,.16);
	background: rgba(255,255,255,.09);
	border-radius: 12px;
	padding: 8px;
	cursor: pointer;
	font-family: var(--bb-body);
	text-align: center;
	transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.bb-pd-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
.bb-pd-photo {
	display: block;
	width: 100%; aspect-ratio: 1/1;
	border-radius: 10px;
	background-size: cover; background-position: top center;
	background-color: rgba(255,255,255,.12);
	margin-bottom: 7px;
}
.bb-pd-photo--empty { background-image: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); }
.bb-pd-name { display: block; font-size: var(--bb-step--1); font-weight: 800; color: #fff; }

.bb-pd-locked {
	position: relative;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.20);
}
.bb-pd-locked-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.bb-pd-locked-name { font-size: var(--bb-step-0); font-weight: 800; color: #fff; flex: 1 1 auto; }
.bb-pd-change {
	border: 1px solid rgba(255,255,255,.30);
	background: transparent; color: #fff;
	font-family: var(--bb-body); font-size: var(--bb-step--1); font-weight: 700;
	min-height: 36px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.bb-pd-change:hover { background: rgba(255,255,255,.16); }

.bb-pd-result {
	position: relative;
	padding: 12px 14px;
	border-radius: 12px;
	font-weight: 700;
	font-size: var(--bb-step--1);
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.20);
	color: #fff;
}
.bb-pd-result.is-right { background: rgba(79,217,168,.22); border-color: rgba(79,217,168,.55); }
.bb-pd-result.is-wrong { background: rgba(255,255,255,.08); }


/* -----------------------------------------------------------
   Bigg Boss Talk — public discussion wall (1.9.0)

   Colours and font-family are set EXPLICITLY on every text element
   here rather than inherited. Lesson 10: inheritance carries no
   specificity, so a theme's `h2 { color: … }` or `input { font-family:
   … }` beats an inherited value and the block renders in the theme's
   font on a live site while looking correct in isolation.

   The message list scrolls internally rather than growing the page
   forever, so a hundred-day season does not leave the footer a
   thousand messages down.
   ----------------------------------------------------------- */
#bb .bb-talk { margin-top: 34px; }

#bb .bb-talk-form {
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#bb .bb-talk-row { position: relative; display: flex; flex-direction: column; }

#bb .bb-talk-name,
#bb .bb-talk-message {
	width: 100%;
	box-sizing: border-box;
	background: var(--bb-ink);
	border: 1px solid var(--bb-line);
	border-radius: 10px;
	padding: 11px 13px;
	color: var(--bb-paper);
	font-family: var(--bb-body);
	font-size: var(--bb-step-0);
	line-height: 1.5;
	/* 16px minimum on mobile or iOS Safari zooms the whole page in on
	   focus and the reader loses their place on the page. */
	min-height: 44px;
}
#bb .bb-talk-message { resize: vertical; min-height: 86px; }
#bb .bb-talk-name::placeholder,
#bb .bb-talk-message::placeholder { color: var(--bb-mute); opacity: 1; }
#bb .bb-talk-name:focus-visible,
#bb .bb-talk-message:focus-visible {
	outline: 2px solid var(--bb-gold);
	outline-offset: 1px;
	border-color: var(--bb-gold);
}

#bb .bb-talk-count {
	align-self: flex-end;
	margin-top: 4px;
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	color: var(--bb-mute);
	min-height: 1em;
}
#bb .bb-talk-count.is-low { color: var(--bb-signal); font-weight: 700; }

/* Honeypot. Off-screen rather than display:none — some bots skip
   display:none inputs specifically because they know the trick. */
#bb .bb-talk-hp {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

#bb .bb-talk-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
#bb .bb-talk-send {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 11px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--bb-gold);
	color: #1C1730;
	font-family: var(--bb-body);
	font-size: var(--bb-step-0);
	font-weight: 800;
	cursor: pointer;
	transition: filter .15s ease;
}
#bb .bb-talk-send:hover { filter: brightness(1.07); }
#bb .bb-talk-send[disabled] { opacity: .6; cursor: default; }
#bb .bb-talk-status {
	flex: 1 1 180px;
	min-width: 0;
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	color: var(--bb-mint);
	font-weight: 600;
}
#bb .bb-talk-kind {
	margin: 0;
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	color: var(--bb-mute);
}

#bb .bb-talk-list {
	margin-top: 16px;
	max-height: 460px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Room for the scrollbar so the last message is not tight against it */
	padding-right: 4px;
}

#bb .bb-talk-msg {
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-left: 3px solid var(--bb-gold);
	border-radius: 10px;
	padding: 11px 13px;
}
#bb .bb-talk-msg.is-reported { display: none; }

#bb .bb-talk-msg-head {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin-bottom: 3px;
}
#bb .bb-talk-msg-name {
	font-family: var(--bb-display);
	font-size: var(--bb-step-0);
	font-weight: 800;
	color: var(--bb-paper);
	/* A long pasted "name" must not push the timestamp and report button
	   off the row — this is arbitrary public input. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#bb .bb-talk-msg-time {
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	color: var(--bb-mute);
	flex: 0 0 auto;
}
#bb .bb-talk-report {
	margin-left: auto;
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 4px 2px;
	color: var(--bb-mute);
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	cursor: pointer;
	text-decoration: underline;
}
#bb .bb-talk-report:hover { color: var(--bb-signal); }
#bb .bb-talk-report[disabled] { text-decoration: none; cursor: default; opacity: .7; }

#bb .bb-talk-msg-body {
	margin: 0;
	font-family: var(--bb-body);
	font-size: var(--bb-step-0);
	line-height: 1.55;
	color: var(--bb-paper);
	/* A single 300-character word (or a URL) would otherwise widen the
	   card and give the whole page a horizontal scrollbar. */
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: pre-wrap;
}

#bb .bb-talk-empty {
	margin: 0;
	padding: 18px 0;
	text-align: center;
	font-family: var(--bb-body);
	font-size: var(--bb-step-0);
	color: var(--bb-mute);
}

@media (max-width: 560px) {
	#bb .bb-talk-form { padding: 13px; }
	#bb .bb-talk-list { max-height: 380px; }
	#bb .bb-talk-send { width: 100%; }
	#bb .bb-talk-status { flex-basis: 100%; }
}

/* -----------------------------------------------------------
   Season premiere state of the countdown hero (1.9.1)

   Louder than the nightly countdown because it is a one-off event
   people are actively waiting for, but NOT signal-red — red is
   reserved for live and eviction states, and a red band sitting on
   the page for three weeks before launch would spend that meaning
   entirely. Gold instead.
   ----------------------------------------------------------- */
#bb .bb-cdhero.is-premiere {
	background: var(--bb-band-premiere);
	border-bottom-color: var(--bb-gold);
	padding-top: 32px;
	padding-bottom: 30px;
}
#bb .bb-cdhero.is-premiere .bb-cdhero-label {
	color: var(--bb-gold);
	font-size: var(--bb-step-0);
	letter-spacing: .18em;
}
#bb .bb-cdhero.is-premiere .bb-cdtile {
	background: var(--bb-band-tile);
	border-color: var(--bb-band-tile-gold);
}
#bb .bb-cdhero.is-premiere .bb-cdtile-num {
	/* One step larger than the nightly countdown — this is the thing
	   the page is about until launch night. */
	font-size: clamp(30px, 7vw, 52px);
	color: var(--bb-band-num);
}
#bb .bb-cdhero.is-premiere .bb-cdhero-tiles { max-width: 480px; }
#bb .bb-cdhero.is-premiere .bb-cdhero-when { color: var(--bb-mute); }

@media (max-width: 560px) {
	#bb .bb-cdhero.is-premiere { padding-top: 24px; padding-bottom: 22px; }
	#bb .bb-cdhero.is-premiere .bb-cdhero-label { font-size: var(--bb-step--1); letter-spacing: .12em; }
}

/* -----------------------------------------------------------
   LIVE TICKER (1.11.0)

   For viewers on data too patchy to stream. Reads as an
   information strip, not a headline — it sits above the What's
   New hero and must not out-shout it.
   ----------------------------------------------------------- */
#bb .bb-ticker {
	background: var(--bb-frame);
	border-bottom: 1px solid var(--bb-frame-line);
	padding: 12px 18px 14px;
}
#bb .bb-ticker-label {
	display: inline-block;
	margin-bottom: 8px;
	font-family: var(--bb-display);
	font-size: var(--bb-step--1);
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bb-signal);
}
#bb .bb-ticker-feed {
	/* Caps the strip so a busy night cannot push the player off
	   the screen; older lines stay reachable by scrolling here
	   rather than growing the page indefinitely. */
	max-height: 168px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#bb .bb-ticker-line {
	margin: 0;
	display: flex;
	gap: 10px;
	align-items: baseline;
	font-family: var(--bb-body);
	font-size: var(--bb-step-0);
	line-height: 1.45;
	color: #F4F1FF;
}
#bb .bb-ticker-time {
	flex: 0 0 auto;
	font-size: var(--bb-step--1);
	font-weight: 700;
	color: rgba(244,241,255,.55);
	font-variant-numeric: tabular-nums;
}
#bb .bb-ticker-text {
	min-width: 0;
	/* Explicit colour/font rather than inheriting from .bb-ticker-line:
	   a theme rule that directly targets THIS element (e.g. a catch-all
	   like `.content-area *`) overrides an inherited value regardless
	   of how specific the ancestor's own rule was — inheritance has no
	   specificity to defend itself with (lesson 10). Found by the
	   layout harness checking this span on its own rather than only
	   the parent line, which already had its own rule and passed. */
	color: #F4F1FF;
	font-family: var(--bb-body);
	/* Admin text, but still arbitrary: a pasted URL must not widen
	   the strip and give the page a horizontal scrollbar. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

@media (max-width: 560px) {
	#bb .bb-ticker { padding: 10px 14px 12px; }
	#bb .bb-ticker-feed { max-height: 132px; }
}

/* -----------------------------------------------------------
   FAVOURITE NUDGE BANNER (1.11.0)

   Client-only content — nothing here ever came from the server.
   Quiet gold band, deliberately lower-contrast than the live
   ticker: it is a personal aside, not breaking news.
   ----------------------------------------------------------- */
#bb .bb-fav-nudge {
	background: rgba(240,185,80,.12);
	border-bottom: 1px solid rgba(240,185,80,.32);
	padding: 11px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
#bb .bb-fav-nudge-line {
	margin: 0;
	font-family: var(--bb-body);
	font-size: var(--bb-step-0);
	line-height: 1.45;
	color: var(--bb-paper);
}
@media (max-width: 560px) {
	#bb .bb-fav-nudge { padding: 9px 14px; }
}

/* -----------------------------------------------------------
   WEEKLY MVP POLL (1.11.0)

   Mirrors the eviction poll's card grid but in gold rather than
   signal-red — this is the positive poll, and colour is how the
   two are told apart at a glance.
   ----------------------------------------------------------- */
#bb .bb-mvp-poll {
	margin-top: 30px;
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	padding: 18px;
}
#bb .bb-mvp-title {
	margin: 0 0 4px;
	font-family: var(--bb-display);
	font-size: var(--bb-step-2);
	font-weight: 800;
	color: var(--bb-paper);
}
#bb .bb-mvp-sub {
	margin: 0 0 14px;
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	color: var(--bb-mute);
}
#bb .bb-mvp-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
@media (min-width: 620px)  { #bb .bb-mvp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { #bb .bb-mvp-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { #bb .bb-mvp-grid { grid-template-columns: repeat(5, 1fr); } }

#bb .bb-mvp-card {
	background: var(--bb-raise);
	border: 1px solid var(--bb-line);
	border-radius: 12px;
	overflow: hidden;
	padding-bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#bb .bb-mvp-card.is-picked { border-color: var(--bb-gold); box-shadow: 0 0 0 1px var(--bb-gold) inset; }
#bb .bb-mvp-card-photo {
	aspect-ratio: 3/4;
	background-size: cover;
	background-position: center;
	background-color: var(--bb-frame);
}
#bb .bb-mvp-card-photo--empty { background: var(--bb-frame); }
#bb .bb-mvp-card-name {
	padding: 0 10px;
	font-family: var(--bb-display);
	font-size: var(--bb-step-0);
	font-weight: 700;
	color: var(--bb-paper);
	overflow-wrap: anywhere;
}
#bb .bb-mvp-card-pct-track {
	margin: 0 10px;
	height: 6px;
	border-radius: 999px;
	background: rgba(120,110,160,.28);
	overflow: hidden;
}
#bb .bb-mvp-card-pct-fill { height: 100%; background: var(--bb-gold); }
#bb .bb-mvp-card-pct-label {
	padding: 0 10px;
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	font-weight: 700;
	color: var(--bb-gold);
}
#bb .bb-mvp-card-admin-count {
	padding: 0 10px;
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	color: var(--bb-mute);
}
#bb .bb-mvp-card-badge {
	padding: 0 10px;
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	font-weight: 700;
	color: var(--bb-mint);
}
#bb .bb-mvp-vote-btn {
	margin: 0 10px;
	min-height: 44px;
	border: 0;
	border-radius: 999px;
	background: var(--bb-gold);
	color: #1C1730;
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	font-weight: 800;
	cursor: pointer;
}
#bb .bb-mvp-vote-btn:hover { filter: brightness(1.07); }
#bb .bb-mvp-voted-note {
	margin-top: 12px;
	font-family: var(--bb-body);
	font-size: var(--bb-step-0);
	font-weight: 600;
	color: var(--bb-mint);
}

/* -----------------------------------------------------------
   SHARE RESULT CARD (1.11.0)
   ----------------------------------------------------------- */
#bb .bb-share-card-btn {
	margin-top: 12px;
	min-height: 44px;
	padding: 11px 22px;
	border: 1px solid var(--bb-gold);
	border-radius: 999px;
	background: transparent;
	color: var(--bb-gold);
	font-family: var(--bb-body);
	font-size: var(--bb-step-0);
	font-weight: 700;
	cursor: pointer;
}
#bb .bb-share-card-btn:hover { background: rgba(240,185,80,.14); }

/* The modal is appended to <body>, NOT inside #bb — a fixed-position
   element inside a transformed ancestor is positioned against that
   ancestor instead of the viewport (lesson 8), and #bb's descendants
   animate. Rules are therefore unscoped and set every property
   explicitly rather than inheriting anything from the plugin's root. */
.bb-share-card-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(16,12,30,.82);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.bb-share-card-box {
	position: relative;
	max-width: min(420px, 92vw);
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bb-share-card-canvas {
	width: 100%;
	height: auto;
	border-radius: 14px;
	display: block;
	box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.bb-share-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.bb-share-card-dl,
.bb-share-card-native {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	border: 0;
	border-radius: 999px;
	background: #F0B950;
	color: #1C1730;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.bb-share-card-dl:hover,
.bb-share-card-native:hover { filter: brightness(1.07); }
.bb-share-card-close {
	position: absolute;
	top: -14px; right: -6px;
	width: 40px; height: 40px;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,.16);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

/* -----------------------------------------------------------
   CAST TEASER (1.14.0)

   Deliberately lighter than the full roster grid further down the
   page: no status badge, no favourite star, no bio link-through
   styling — just name and photo, meant to be glanced at while the
   premiere countdown is still running. Horizontal scroll rather
   than a grid so it stays a single compact row regardless of cast
   size, instead of pushing the countdown and player further down
   the page on a long roster.
   ----------------------------------------------------------- */
#bb .bb-cast-teaser {
	padding: 18px 18px 4px;
}
#bb .bb-cast-teaser-title {
	margin: 0 0 12px;
	font-family: var(--bb-display);
	font-size: var(--bb-step-1);
	font-weight: 800;
	color: var(--bb-paper);
}
#bb .bb-cast-teaser-row {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 14px;
	/* Room for a focus ring on the last card without it being clipped
	   by the scroll container's edge. */
	margin-right: -4px;
	padding-right: 4px;
}
#bb .bb-cast-teaser-card {
	flex: 0 0 auto;
	width: 92px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	text-decoration: none;
}
#bb .bb-cast-teaser-card,
#bb .bb-cast-teaser-card:hover,
#bb .bb-cast-teaser-card:focus { text-decoration: none; color: inherit; }
#bb .bb-cast-teaser-photo {
	width: 92px;
	height: 92px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--bb-raise);
	border: 2px solid var(--bb-line);
	transition: border-color .15s ease, transform .15s ease;
}
#bb .bb-cast-teaser-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
#bb .bb-cast-teaser-card:hover .bb-cast-teaser-photo {
	border-color: var(--bb-gold);
	transform: translateY(-2px);
}
#bb .bb-cast-teaser-name {
	font-family: var(--bb-body);
	font-size: var(--bb-step--1);
	font-weight: 700;
	color: var(--bb-paper);
	text-align: center;
	/* A long name wraps to two lines rather than widening the fixed
	   92px card and breaking the row's alignment. */
	overflow-wrap: anywhere;
	line-height: 1.25;
}

@media (max-width: 560px) {
	#bb .bb-cast-teaser { padding: 14px 14px 2px; }
	#bb .bb-cast-teaser-card { width: 78px; }
	#bb .bb-cast-teaser-photo { width: 78px; height: 78px; }
}