/* =============================================================================
   BloodBlade Builder — front-end section styles. Loaded on any page that uses
   the section builder (rule 9). Tokens come from style.css :root.
   ============================================================================= */

.bbfcSection { position: relative; }

/* Scroll-reveal state lives globally in style.css (.js [data-reveal] / .is-revealed). */

.width-narrow { max-width: 760px; }
.width-wide { max-width: 1400px; }

/* --------------------------------------------------------------------- Hero */
.bbfcSection--hero { overflow: hidden; isolation: isolate; background: radial-gradient(90% 120% at 50% 0%, var(--colorSurfaceBlood) 0%, #000 65%); }
.bbfcSection--hero .bbfcHeroMedia { width: 100%; }
.bbfcSection--hero .bbfcHeroImg {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
.bbfcSection--hero .bbfcHeroBody {
  position: absolute; inset-inline: 0; bottom: clamp(1rem, 4vw, 3rem);
  display: grid; gap: 1.1rem; justify-items: center; text-align: center; z-index: 2;
  text-shadow: 0 2px 18px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.85);
}
.bbfcSection--hero.align-left .bbfcHeroBody { justify-items: start; text-align: left; }
.bbfcSection--hero .bbfcHeroBody .eyebrow { color: #fff; }
.bbfcSection--hero .bbfcHeroHeading { text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.bbfcSection--hero .bbfcHeroSub { color: var(--colorTextMuted); max-width: 60ch; margin: 0; }
.bbfcSection--hero .bbfcHeroActions { display: flex; flex-wrap: wrap; gap: .75rem; }
.bbfcSection--hero.overlay-scrim::after,
.bbfcSection--hero.overlay-heavy::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 55%; z-index: 1; pointer-events: none; }
.bbfcSection--hero.overlay-scrim::after { background: linear-gradient(180deg, transparent, rgba(0,0,0,.92) 88%); }
.bbfcSection--hero.overlay-heavy::after { height: 100%; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.85)); }

/* Title-band hero (compact page header, no image) */
.bbfcSection--hero.layout-title {
  padding-block: clamp(3rem, 8vw, 6rem);
  border-bottom: 1px solid var(--colorBorder);
  background: radial-gradient(120% 140% at 50% 0%, var(--colorSurfaceBlood), var(--colorBg) 62%);
}
.bbfcSection--hero.layout-title::after { display: none; }
.bbfcSection--hero.layout-title .bbfcHeroBody { position: static; bottom: auto; text-shadow: none; gap: 1rem; }
.bbfcSection--hero.layout-title .bbfcHeroHeading { text-shadow: none; }
.bbfcSection--hero.layout-title .bbfcHeroSub { max-width: 62ch; }

/* Members-only page block */
.bbfcNoAccess { min-height: 46vh; display: grid; align-items: center; }
.bbfcNoAccess .bbfcNoAccessMsg { color: var(--colorTextMuted); max-width: 56ch; margin-inline: auto; }
.bbfcNoAccess .bbfcNoAccessMsg a { color: var(--colorBloodBright); text-decoration: underline; }
@media (max-width: 640px) {
  .bbfcSection--hero .bbfcHeroBody { position: relative; bottom: auto; padding-block: 1.5rem 2.5rem; }
  .bbfcSection--hero .bbfcHeroImg { mask-image: none; -webkit-mask-image: none; }
  .bbfcSection--hero.overlay-scrim::after { display: none; }
}

/* Notice bar lives in style.css — it renders on views that never load this file. */

/* ------------------------------------------------------------------ Pricing */
.tiersSection { background: radial-gradient(60% 60% at 50% 0%, rgba(123,14,0,.20), transparent 70%), var(--colorBg); }
.pricingGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.pricingCard { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--colorSurfaceRaise), var(--colorSurface)); border: 1px solid var(--colorBorder); border-radius: var(--radius); padding: 2rem 1.75rem; transition: transform var(--dur) var(--easeOut), border-color var(--dur) var(--easeOut), box-shadow var(--dur) var(--easeOut); }
.pricingCard:hover { transform: translateY(-6px); border-color: var(--colorBlood); box-shadow: var(--shadowBlood); }
.pricingCard.isFeatured { border-color: var(--colorBloodBright); background: linear-gradient(180deg, #1a0505, var(--colorSurface)); }
.pricingFlag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); margin: 0; padding: .3em 1em; background: var(--colorBloodBright); color: #fff; font-family: var(--fontTechno); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; border-radius: 999px; white-space: nowrap; }
.pricingHead { text-align: center; margin-bottom: 1rem; }
.pricingName { margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.pricingSub { margin: .1rem 0 0; font-family: var(--fontTechno); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; color: var(--colorBloodBright); }
.pricingPrice { text-align: center; margin: 0 0 1.5rem; font-family: var(--fontTechno); line-height: 1; color: #fff; }
.pricingCurrency { font-size: 1.4rem; vertical-align: top; opacity: .8; }
.pricingAmount { font-size: 3.4rem; font-weight: 700; }
.pricingPeriod { font-size: .9rem; color: var(--colorTextMuted); text-transform: uppercase; letter-spacing: .1em; }

/* Video slot — a thumbnail-size promo inside a card (tier promos, etc.). */
.bbfcVideoThumb {
  position: relative; margin: 0 0 1.5rem; aspect-ratio: 16 / 9; overflow: hidden;
  background: #050505; border: 1px solid var(--colorBorder); border-radius: var(--radius);
  /* Every child is absolutely positioned, so the box has no intrinsic width to
     fall back on — and inside a flex column an auto inline-margin (below) turns
     off the default stretch. Both need this to be explicit. */
  width: 100%; box-sizing: border-box;
}
.bbfcVideoThumb video,
.bbfcVideoThumb iframe,
.bbfcVideoThumb img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.bbfcVideoThumb video,
.bbfcVideoThumb img { object-fit: cover; }
/* A poster-less upload otherwise shows the browser's light grey frame. */
.bbfcVideoThumb video { background: #050505; }
.bbfcVideoThumb .bbfcVideoPlay {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; cursor: pointer;
  border: 0; background: #050505; display: block;
}
/* Play badge: the same blood-red diamond language as the feature bullets. */
.bbfcVideoThumb .bbfcVideoPlayIcon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 3.25rem; height: 3.25rem; border-radius: 999px;
  background: rgba(5,5,5,.72); border: 1px solid var(--colorBloodBright);
  transition: background var(--dur) var(--easeOut), transform var(--dur) var(--easeOut);
}
.bbfcVideoThumb .bbfcVideoPlayIcon::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: .55rem 0 .55rem .95rem;
  border-color: transparent transparent transparent #fff;
}
.bbfcVideoThumb .bbfcVideoPlay:hover .bbfcVideoPlayIcon,
.bbfcVideoThumb .bbfcVideoPlay:focus-visible .bbfcVideoPlayIcon {
  background: var(--colorBloodBright); transform: translate(-50%, -50%) scale(1.08);
}
.bbfcVideoThumb.isFacade:hover { border-color: var(--colorBlood); }
@media (prefers-reduced-motion: reduce) {
  .bbfcVideoThumb .bbfcVideoPlayIcon { transition: none; }
}
/* In a tier card the promo sits under the price, capped so it stays a thumbnail
   even when the grid collapses to one wide column on phones. */
.pricingVideo { max-width: 20rem; margin-inline: auto; }

.pricingFeatures { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .65rem; flex: 1 1 auto; }
.pricingFeatures li { position: relative; padding-left: 1.6rem; color: var(--colorTextMuted); font-size: .95rem; }
.pricingFeatures li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--colorBloodBright); transform: rotate(45deg); }
@media (max-width: 900px) { .pricingGrid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ---------------------------------------------------------------- Card grid */
.bbfcCardGrid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.bbfcCardGrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.bbfcCardGrid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.bbfcCardItem { display: flex; }
.bbfcCardItemInner { display: flex; flex-direction: column; width: 100%; background: linear-gradient(180deg, var(--colorSurfaceRaise), var(--colorSurface)); border: 1px solid var(--colorBorder); border-radius: var(--radius); overflow: hidden; color: inherit; transition: transform var(--dur) var(--easeOut), border-color var(--dur) var(--easeOut), box-shadow var(--dur) var(--easeOut); }
a.bbfcCardItemInner:hover { transform: translateY(-6px); border-color: var(--colorBlood); box-shadow: var(--shadowBlood); color: inherit; }
.bbfcCardItemMedia { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #050505; }
.bbfcCardGrid.aspect-square .bbfcCardItemMedia { aspect-ratio: 1 / 1; }
.bbfcCardGrid.aspect-wide .bbfcCardItemMedia { aspect-ratio: 16 / 9; }
/* "Natural" keeps the artwork whole — cover art (the Codex sheets) loses its
   title bar and its candles the moment it is cropped to a fixed box. */
.bbfcCardGrid.aspect-natural .bbfcCardItemMedia { aspect-ratio: auto; }
.bbfcCardGrid.aspect-natural .bbfcCardItemMedia img { height: auto; object-fit: contain; }
.bbfcCardItemMedia img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--easeOut); }
a.bbfcCardItemInner:hover .bbfcCardItemMedia img { transform: scale(1.05); }
.bbfcCardItemBody { padding: 1.1rem 1.25rem 1.4rem; display: grid; gap: .3rem; }
.bbfcCardItemTitle { font-family: var(--fontDisplay); font-size: 1.3rem; color: #fff; line-height: 1.1; }
.bbfcCardItemSub { font-family: var(--fontTechno); text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; color: var(--colorBloodBright); }
.bbfcCardItemText { color: var(--colorTextMuted); font-size: .95rem; margin-top: .3rem; }
/* Members-only cards */
.bbfcCardItem.isLocked .bbfcCardItemInner { position: relative; }
.bbfcCardLock { position: absolute; top: .55rem; right: .55rem; z-index: 2; width: 2rem; height: 2rem; display: grid; place-items: center; font-size: .95rem; background: rgba(0,0,0,.72); border: 1px solid var(--colorBorderSoft); border-radius: 999px; }
.bbfcSection--cardGrid.isLocked .bbfcCardItemInner { border-style: dashed; }
.bbfcSection--cardGrid.isLocked .bbfcCardItemInner:hover { border-color: var(--colorBloodBright); border-style: solid; }
.bbfcCardItem.isLocked .bbfcCardItemTitle { color: var(--colorTextMuted); }
@media (max-width: 900px) { .bbfcCardGrid, .bbfcCardGrid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bbfcCardGrid, .bbfcCardGrid.cols-2, .bbfcCardGrid.cols-4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Gallery */
.bbfcGalleryGrid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.bbfcGalleryGrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.bbfcGalleryGrid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.bbfcGalleryFigure { margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.bbfcGalleryCell { display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--colorBorder); border-radius: var(--radius); background: #050505; }
.bbfcGalleryGrid.aspect-wide .bbfcGalleryCell { aspect-ratio: 2048 / 937; }
.bbfcGalleryGrid.aspect-portrait .bbfcGalleryCell { aspect-ratio: 3 / 4; }
.bbfcGalleryGrid.aspect-natural .bbfcGalleryCell { aspect-ratio: auto; }
.bbfcGalleryCell img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--easeOut); }
.bbfcGalleryGrid.aspect-natural .bbfcGalleryCell img { height: auto; object-fit: contain; }
.bbfcGalleryCell:hover img { transform: scale(1.04); }
.bbfcGalleryCell:hover { border-color: var(--colorBlood); }
.bbfcGalleryCaption { font-family: var(--fontTechno); text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; color: #fff; text-align: center; }
@media (max-width: 640px) { .bbfcGalleryGrid, .bbfcGalleryGrid.cols-4, .bbfcGalleryGrid.cols-2 { grid-template-columns: 1fr 1fr; } .bbfcGalleryGrid.aspect-wide { grid-template-columns: 1fr; } }

/* Lightbox */
.bbfcLightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.92); opacity: 0; visibility: hidden; transition: opacity .3s var(--easeOut), visibility .3s; }
.bbfcLightbox.isOpen { opacity: 1; visibility: visible; }
.bbfcLightbox img { max-width: 92vw; max-height: 88vh; border: 1px solid var(--colorBorderSoft); }
.bbfcLightbox .bbfcLbClose, .bbfcLightbox .bbfcLbNav { position: absolute; background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 2rem; padding: .5rem 1rem; }
.bbfcLightbox .bbfcLbClose { top: 1rem; right: 1rem; }
.bbfcLightbox .bbfcLbPrev { left: .5rem; top: 50%; transform: translateY(-50%); }
.bbfcLightbox .bbfcLbNext { right: .5rem; top: 50%; transform: translateY(-50%); }

/* ---------------------------------------------------------------- Accordion */
.bbfcAccordion { display: grid; gap: .75rem; }
.bbfcAccordionItem { border: 1px solid var(--colorBorder); border-radius: var(--radius); background: var(--colorSurface); overflow: hidden; }
.bbfcAccordionItem[open] { border-color: var(--colorBlood); }
.bbfcAccordionSummary { cursor: pointer; padding: 1rem 1.25rem; font-family: var(--fontDisplay); font-size: 1.15rem; color: #fff; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.bbfcAccordionSummary::-webkit-details-marker { display: none; }
.bbfcAccordionSummary::after { content: "+"; color: var(--colorBloodBright); font-family: var(--fontTechno); font-size: 1.4rem; }
.bbfcAccordionItem[open] .bbfcAccordionSummary::after { content: "–"; }
.bbfcAccordionBody { padding: 0 1.25rem 1.25rem; color: var(--colorTextMuted); }

/* ---------------------------------------------------------- Fighter dossier
   The original artwork, shown flat. Every sheet is one image whose stats and
   bio are painted in, so the only styling it needs is a frame; the transcribed
   text rides along in a visually hidden <figcaption>.
   ------------------------------------------------------------------------- */
.bbfcRoster { display: grid; gap: 2.5rem; }

.bbfcDossier {
  margin: 0; position: relative;
  background: #000; border: 1px solid #241d16; border-radius: 2px; overflow: hidden;
  box-shadow: 0 18px 50px -26px rgba(0,0,0,.95);
}
.bbfcDossier img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------- Media+text */
.bbfcMediaText { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.bbfcSection--mediaText.image-right .bbfcMediaTextFig { order: 2; }
.bbfcMediaTextFig { margin: 0; }
.bbfcMediaTextFig img { width: 100%; border: 1px solid var(--colorBorder); border-radius: var(--radius); }
.bbfcMediaTextBody h2 { text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 780px) { .bbfcMediaText { grid-template-columns: 1fr; } .bbfcSection--mediaText.image-right .bbfcMediaTextFig { order: 0; } }

/* --------------------------------------------------------------------- CTA */
.bbfcSection--cta { background: radial-gradient(70% 120% at 50% 0%, rgba(123,14,0,.25), var(--colorBg) 70%); background-size: cover; background-position: center; }
.bbfcSection--cta.hasImage { border-block: 1px solid var(--colorBloodDark); }
.bbfcCtaInner { text-align: center; display: grid; gap: 1.25rem; justify-items: center; max-width: 720px; }
.bbfcCtaHeading { text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.bbfcCtaText { color: var(--colorTextMuted); margin: 0; }

/* ------------------------------------------------------------- Contact form */
.bbfcSection--contactForm .bbfcFormIntro { color: var(--colorTextMuted); text-align: center; margin-bottom: 1.75rem; }
.bbfcForm .bbfcFormRow { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.bbfcForm label { font-family: var(--fontTechno); text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; color: var(--colorTextMuted); }
.bbfcForm textarea { min-height: 8rem; resize: vertical; }
.bbfcForm .bbfcFormHp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bbfcForm .btn { margin-top: .4rem; }
.bbfcFormNotice { padding: .9rem 1.15rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-family: var(--fontTechno); font-size: .88rem; letter-spacing: .02em; }
.bbfcFormNotice.isSuccess { background: rgba(30,80,30,.28); border: 1px solid #2e7d32; color: #c7f5c7; }
.bbfcFormNotice.isError { background: var(--colorSurfaceBlood); border: 1px solid var(--colorBlood); color: #ffd4d4; }

/* ---------------------------------------------------------------- Rich text */
.bbfcSection--richText.width-narrow .container { max-width: 760px; }
.bbfcSection--richText.width-wide .container { max-width: 1400px; }
.bbfcRichBody { color: var(--colorTextMuted); }
.bbfcRichBody h2, .bbfcRichBody h3 { color: #fff; }

/* ------------------------------------------------------------------ Post feed */
.bbfcSection--postFeed .newsGrid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.bbfcSection--postFeed .newsGrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.bbfcSection--postFeed .newsGrid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.newsCard { display: flex; flex-direction: column; background: var(--colorSurface); border: 1px solid var(--colorBorder); border-radius: var(--radius); overflow: hidden; transition: transform var(--dur) var(--easeOut), border-color var(--dur) var(--easeOut); }
.newsCard:hover { transform: translateY(-4px); border-color: var(--colorBlood); }
.newsCardMedia { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #050505; }
.newsCardMedia img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--easeOut); }
.newsCard:hover .newsCardMedia img { transform: scale(1.06); }
.newsCardPlaceholder { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #0c0d0e, #0c0d0e 12px, #120404 12px, #120404 24px); }
.newsCardBody { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; }
.newsCard .entryMeta { margin: 0; font-family: var(--fontTechno); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--colorTextFaint); }
.newsCardTitle { margin: 0; font-size: 1.25rem; }
.newsCardTitle a { color: #fff; }
.newsCardTitle a:hover { color: var(--colorBloodBright); }
.newsCardExcerpt { margin: 0; color: var(--colorTextMuted); font-size: .95rem; }
.newsMore { text-align: center; margin-top: 2.5rem; }
@media (max-width: 900px) { .bbfcSection--postFeed .newsGrid, .bbfcSection--postFeed .newsGrid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bbfcSection--postFeed .newsGrid { grid-template-columns: 1fr !important; } }

/* ============================================================================
   Sections added to reach parity with the live bloodbladefc.com layouts.
   ========================================================================= */

/* -------------------------------------------------- Item list (books / DAZ) */
.bbfcItemList { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); grid-template-columns: repeat(4, 1fr); }
.bbfcItemList.cols-1 { grid-template-columns: 1fr; }
.bbfcItemList.cols-2 { grid-template-columns: repeat(2, 1fr); }
.bbfcItemList.cols-3 { grid-template-columns: repeat(3, 1fr); }
.bbfcItemListEntry { display: flex; flex-direction: column; gap: .75rem; }
.bbfcItemListMedia { margin: 0; }
.bbfcItemListMedia img { width: 100%; height: auto; border: 1px solid var(--colorBorder); border-radius: var(--radius); }
.bbfcItemListBody { display: flex; flex-direction: column; gap: .75rem; flex: 1 1 auto; align-items: flex-start; }
.bbfcItemListTitle { margin: 0; color: #fff; line-height: 1.12; font-size: clamp(1.25rem, .9rem + 1.35vw, 2.15rem); }
.bbfcItemListText { margin: 0; color: var(--colorTextMuted); font-size: .92rem; }
.bbfcItemListBtn { margin-top: auto; font-size: .68rem; padding: .8em 1.3em; text-align: center; }
.bbfcItemListBtn.isDisabled { opacity: .8; cursor: default; pointer-events: none; }
.bbfcItemListBtn.isLockedBtn { background: transparent; border-color: var(--colorBorderSoft); }

/* Cover variant — the Books grid: each entry is a framed card, cover flush to
   its edges, title and buy button beneath. */
.bbfcSection--itemList.variant-cover .bbfcItemListEntry {
  gap: 0; background: #050505; border: 1px solid var(--colorBorder); border-radius: var(--radius);
  overflow: hidden; transition: border-color var(--dur) var(--easeOut), transform var(--dur) var(--easeOut);
}
.bbfcSection--itemList.variant-cover .bbfcItemListEntry:hover { border-color: var(--colorBlood); transform: translateY(-4px); }
.bbfcSection--itemList.variant-cover .bbfcItemListMedia img { border: 0; border-radius: 0; }
.bbfcSection--itemList.variant-cover .bbfcItemListBody { padding: 1rem 1.15rem 1.35rem; gap: .95rem; }

/* Wide variant — the DAZ page: title first, small landscape thumb, then a
   download bar that fills the column. */
.bbfcSection--itemList.variant-wide .bbfcItemListBtn { width: 100%; }
.bbfcSection--itemList.titleAbove .bbfcItemListTitle { margin-bottom: .35rem; }

@media (max-width: 1000px) {
  .bbfcItemList, .bbfcItemList.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .bbfcItemList, .bbfcItemList.cols-2, .bbfcItemList.cols-3 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- Story row */
.bbfcSection--storyRow { padding-block: clamp(1.25rem, 2.5vw, 2.25rem); }
.bbfcSection--storyRow > .container { max-width: 1400px; }
.bbfcStoryRow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.bbfcStoryMedia { display: grid; gap: 1rem; }
.bbfcStoryFig { margin: 0; }
.bbfcStoryFig img { width: 100%; height: auto; border: 1px solid var(--colorBorder); border-radius: var(--radius); }
.bbfcStoryVideo { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--colorBorder); border-radius: var(--radius); overflow: hidden; background: #050505; }
.bbfcStoryVideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bbfcStoryHeading { margin: 0 0 1rem; color: #fff; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); line-height: 1.12; }
.bbfcStoryProse { color: var(--colorTextMuted); font-size: clamp(.92rem, .88rem + .16vw, 1rem); line-height: 1.75; }
.bbfcStoryProse p { margin: 0 0 1rem; }
.bbfcStoryProse p:last-child { margin-bottom: 0; }
.bbfcStoryProse strong, .bbfcStoryProse b { color: #fff; }
.bbfcStoryProse em, .bbfcStoryProse i { color: #d8d5d5; }
@media (max-width: 860px) { .bbfcStoryRow { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Logo carousel */
.bbfcCarousel { position: relative; display: flex; align-items: center; gap: .5rem; }
.bbfcCarouselTrack {
  list-style: none; margin: 0; padding: .25rem; flex: 1 1 auto;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.bbfcCarouselTrack::-webkit-scrollbar { display: none; }
.bbfcCarouselSlide { scroll-snap-align: center; }
.bbfcCarouselSlide img { width: 100%; height: auto; border: 0; border-radius: var(--radius); transition: border-color var(--dur) var(--easeOut), transform var(--dur) var(--easeOut); }
.bbfcCarouselSlide a:hover img, .bbfcCarouselSlide a:focus-visible img { transform: translateY(-3px); }
.bbfcCarouselNav {
  flex: 0 0 auto; width: 34px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 0; color: var(--colorTextMuted);
  transition: color var(--dur) var(--easeOut), opacity var(--dur) var(--easeOut);
}
.bbfcCarouselNav:hover { color: #fff; }
.bbfcCarouselNav:disabled { opacity: .25; cursor: default; }
.bbfcCarouselNav::before { content: ""; width: .7em; height: .7em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.bbfcCarouselPrev::before { transform: rotate(135deg); margin-left: .2em; }
.bbfcCarouselNext::before { transform: rotate(-45deg); margin-right: .2em; }

/* ---------------------------------------------------------------- Link list */
.bbfcLinkListHeading { margin: 0 0 1.5rem; text-transform: uppercase; letter-spacing: .01em; color: #fff; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); }
.bbfcLinkList { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; justify-items: start; }
.bbfcLinkList a { color: var(--colorTextMuted); font-size: 1.05rem; }
.bbfcLinkList a:hover, .bbfcLinkList a:focus-visible { color: var(--colorBloodBright); text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------ Accordion — left / numbers */
/* The live FAQ is a borderless list: hairline-separated rows, a muted number,
   a capitalised question and a chevron that flips open. */
.bbfcAccordionHeading { margin: 0 0 1.75rem; color: #fff; text-transform: none; font-size: clamp(1.05rem, .95rem + .4vw, 1.35rem); font-weight: 700; }
.bbfcSection--accordion.align-left .bbfcAccordion { gap: 0; }
.bbfcSection--accordion.align-left .bbfcAccordionItem {
  border: 0; border-bottom: 1px solid var(--colorBorder); border-radius: 0; background: none;
}
.bbfcSection--accordion.align-left .bbfcAccordionItem[open] { border-bottom-color: var(--colorBorderSoft); }
.bbfcSection--accordion.align-left .bbfcAccordionSummary {
  gap: .95rem; padding: 1.05rem .25rem; font-size: 1rem; color: #e9e6e6;
  transition: color var(--dur) var(--easeOut);
}
.bbfcSection--accordion.align-left .bbfcAccordionSummary:hover { color: #fff; }
.bbfcAccordionSummary .bbfcAccordionQ { flex: 1 1 auto; }
.bbfcAccordionNum {
  flex: 0 0 auto; font-family: var(--fontDisplay); font-size: 1rem; font-weight: 400;
  color: var(--colorTextFaint); letter-spacing: .04em; min-width: 2.1ch;
}
/* Chevron instead of the +/- used elsewhere. */
.bbfcSection--accordion.align-left .bbfcAccordionSummary::after {
  content: ""; width: .5em; height: .5em; margin-top: -.2em; flex: 0 0 auto;
  border-right: 1.5px solid var(--colorTextFaint); border-bottom: 1.5px solid var(--colorTextFaint);
  transform: rotate(45deg); transition: transform var(--dur) var(--easeOut), border-color var(--dur) var(--easeOut);
}
.bbfcSection--accordion.align-left .bbfcAccordionItem[open] .bbfcAccordionSummary::after {
  transform: rotate(-135deg); margin-top: .18em; border-color: var(--colorBloodBright);
}
.bbfcSection--accordion.align-left .bbfcAccordionBody {
  padding: 0 2.5rem 1.35rem 3.2rem; color: var(--colorTextMuted); font-size: .94rem; line-height: 1.7;
}

/* --------------------------------------------------------- Gallery — mosaic */
.bbfcGalleryGrid.layout-mosaic { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 11rem; gap: 1rem; }
.bbfcGalleryGrid.layout-mosaic .bbfcGalleryFigure { grid-column: span 2; grid-row: span 2; }
.bbfcGalleryGrid.layout-mosaic .bbfcGalleryFigure:nth-child(6n+1) { grid-column: span 2; grid-row: span 3; }
.bbfcGalleryGrid.layout-mosaic .bbfcGalleryFigure:nth-child(6n+4) { grid-column: span 4; grid-row: span 2; }
.bbfcGalleryGrid.layout-mosaic .bbfcGalleryCell { aspect-ratio: auto; height: 100%; }
.bbfcGalleryGrid.layout-mosaic .bbfcGalleryFigure { position: relative; }
.bbfcGalleryGrid.layout-mosaic .bbfcGalleryCaption {
  position: absolute; inset-inline: 0; bottom: 0; margin: 0; padding: .55rem .7rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); font-size: .72rem;
}
@media (max-width: 900px) {
  .bbfcGalleryGrid.layout-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 9rem; }
  .bbfcGalleryGrid.layout-mosaic .bbfcGalleryFigure:nth-child(6n+4) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bbfcGalleryGrid.layout-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 8rem; }
  .bbfcGalleryGrid.layout-mosaic .bbfcGalleryFigure,
  .bbfcGalleryGrid.layout-mosaic .bbfcGalleryFigure:nth-child(6n+1),
  .bbfcGalleryGrid.layout-mosaic .bbfcGalleryFigure:nth-child(6n+4) { grid-column: span 2; grid-row: span 2; }
}

/* -------------------------------------------------- Roster — character wall
   The Bios page is a Mortal-Kombat-style select screen: framed portrait tiles
   packed across three rows on a dark wall. Flex wrap centres the short final
   row on its own, exactly like the reference.

   The geometry is measured off that reference render (mk-overview.png): the
   portraits are 388 x 427 inside a 17px frame — so a 422 x 461 tile — pitched
   453 across and 547 down, ten to a row. That is 7.35% of a tile of wall
   between columns and 20.4% between rows. Everything here is therefore a
   fraction of one tile, so the wall holds those proportions at any width: ten
   tiles plus nine gaps put one tile at 100 / 10.6615 = 9.37cqw, measured
   against the wall rather than the viewport, so the section can be dropped into
   any column and still lay out ten across.
   ------------------------------------------------------------------------- */
.bbfcRosterWall {
  container-type: inline-size;
  padding: clamp(1.25rem, 3vw, 2.75rem) clamp(.5rem, 2vw, 2rem);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.045), transparent 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(123,14,0,.16), transparent 70%),
    linear-gradient(180deg, #17181a, #0b0c0d);
  border: 1px solid var(--colorBorder); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -30px 60px -40px #000;
}
.bbfcRosterTiles {
  --bbfcTile: min(9.37cqw, 164px);
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: calc(var(--bbfcTile) * .204) calc(var(--bbfcTile) * .0735);
}
.bbfcRosterTileItem { flex: 0 0 auto; width: var(--bbfcTile); }

.bbfcRosterTile {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; color: var(--colorTextMuted);
  transition: transform var(--dur) var(--easeOut), color var(--dur) var(--easeOut);
}
/* The frame: a dark bevelled surround with the portrait recessed into it. Its
   border is the 4.03% of tile width the reference frames occupy. */
.bbfcRosterTileFrame {
  display: block; padding: calc(var(--bbfcTile) * .0403 - 1px); /* the 1px border is part of that 4% */
  background: linear-gradient(160deg, #2b2c2f, #121314 60%, #08090a);
  border: 1px solid #000; border-radius: 2px;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07);
  transition: box-shadow var(--dur) var(--easeOut), border-color var(--dur) var(--easeOut);
}
/* The portraits are cut from the reference at its own crop and aspect, so they
   are shown as-is: no grading, and `cover` on a matching ratio never re-crops. */
.bbfcRosterTileFrame img {
  display: block; width: 100%; aspect-ratio: 376 / 414; object-fit: cover;
  background: #000;
}
.bbfcRosterTile { position: relative; }
.bbfcRosterTileName {
  position: absolute; z-index: 2;
  inset-inline: calc(var(--bbfcTile) * .0403); bottom: calc(var(--bbfcTile) * .0403);
  padding: .3em .2em; text-align: center;
  font-family: var(--fontTechno); font-size: .6rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.15; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.9) 45%);
  opacity: 0; transition: opacity var(--dur) var(--easeOut);
}
.bbfcRosterTile:hover .bbfcRosterTileName,
.bbfcRosterTile:focus-visible .bbfcRosterTileName { opacity: 1; }
.bbfcRosterTile:hover, .bbfcRosterTile:focus-visible { transform: translateY(-3px); color: #fff; }
.bbfcRosterTile:hover .bbfcRosterTileFrame,
.bbfcRosterTile:focus-visible .bbfcRosterTileFrame {
  border-color: var(--colorBloodBright);
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.95), 0 0 0 1px rgba(218,10,10,.5), 0 0 22px -4px rgba(218,10,10,.55);
}

/* Ten across stops being legible long before a phone, so the row count drops —
   the same tile-relative proportions, solved for six and then four per row. */
@container (max-width: 820px) { .bbfcRosterTiles { --bbfcTile: 15.68cqw; } }
@container (max-width: 500px) { .bbfcRosterTiles { --bbfcTile: 23.65cqw; } }

/* ------------------------------------------------ Dossier lightbox */
/* With JS the dossiers move into the dialog on demand; without it they stay in
   the flow, so every fighter's text is always reachable. */
.bbfcRosterDossiers { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.js .bbfcRosterDossiers { display: none; }

.bbfcDossierDialog {
  padding: 0; border: 0; background: transparent; max-width: none; max-height: none;
  width: 100%; height: 100%; overflow: visible;
}
.bbfcDossierDialog::backdrop { background: rgba(0,0,0,.95); backdrop-filter: blur(3px); }
.bbfcDialogShell {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; height: 100%; padding: clamp(.5rem, 3vw, 2.5rem);
}
/* The sheet is shown whole: as wide as the dialog allows, then clamped by
   height so a short viewport shrinks it rather than cropping it. 1320px is the
   sheets' own width, so a wide screen draws them pixel for pixel. */
.bbfcDialogSlot { width: min(1320px, 100%); display: flex; justify-content: center; min-height: 0; }
.bbfcDialogSlot .bbfcDossier { box-shadow: 0 30px 80px -30px #000; }
.bbfcDialogSlot .bbfcDossier img { width: auto; max-width: 100%; max-height: 86vh; }
.bbfcDialogNav, .bbfcDialogClose {
  flex: 0 0 auto; display: grid; place-items: center; cursor: pointer;
  background: rgba(0,0,0,.6); border: 1px solid var(--colorBorderSoft); border-radius: var(--radius);
  color: #fff; transition: border-color var(--dur) var(--easeOut), background var(--dur) var(--easeOut);
}
.bbfcDialogNav { width: 44px; height: 64px; }
.bbfcDialogNav:hover, .bbfcDialogClose:hover { border-color: var(--colorBloodBright); background: rgba(123,14,0,.4); }
.bbfcDialogNav::before { content: ""; width: .6em; height: .6em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.bbfcDialogPrev::before { transform: rotate(135deg); margin-left: .25em; }
.bbfcDialogNext::before { transform: rotate(-45deg); margin-right: .25em; }
.bbfcDialogClose {
  position: absolute; top: clamp(.5rem, 2vw, 1.5rem); right: clamp(.5rem, 2vw, 1.5rem);
  width: 44px; height: 44px; font-size: 1.6rem; line-height: 1;
}
@media (max-width: 700px) {
  .bbfcDialogNav { width: 36px; height: 52px; }
  .bbfcDialogSlot { max-height: 82vh; }
}
/* On a phone the sheet is shown whole rather than held at reading size and
   swiped across, so opening a fighter gives you the entire card at once. The
   sheets are roughly 2.2:1, so fitting one to a portrait screen leaves the
   height to spare: the prev/next pair wraps onto its own line underneath, which
   hands the card the full width of the dialog instead of the ~70% it gets when
   the arrows sit beside it. */
@media (max-width: 760px) {
  .bbfcDialogShell { flex-wrap: wrap; align-content: center; row-gap: 1rem; }
  .bbfcDialogSlot { order: -1; flex: 0 0 100%; }
  .bbfcDialogNav { width: 4rem; height: 2.75rem; }
  .bbfcDialogSlot .bbfcDossier img {
    /* 7rem is the shell padding plus the nav line the card now sits above. */
    width: auto; max-width: 100%;
    max-height: calc(100vh - 7rem);
    max-height: calc(100dvh - 7rem);
  }
}

/* ------------------------------------------------- Contact form — left align */
.bbfcSection--contactForm.align-left { padding-block: clamp(2rem, 4vw, 3.25rem); }
.bbfcFormHeading { margin: 0 0 1.5rem; color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); }
.bbfcSection--contactForm.align-left .bbfcFormHeading::before {
  content: ""; display: block; width: 58px; height: 2px; margin-bottom: 1.1rem; background: var(--colorBloodDark);
}
.bbfcSection--contactForm.align-left .bbfcForm label {
  font-family: var(--fontDisplay); text-transform: none; letter-spacing: 0; font-size: .88rem; color: #cfcccc; font-weight: 700;
}
.bbfcSection--contactForm.align-left .bbfcForm .btn { font-size: .74rem; padding: .8em 1.5em; }
.bbfcSection--contactForm.align-left .bbfcFormIntro { text-align: left; }
.bbfcFormGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 640px) { .bbfcFormGrid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- Download grid (fights)
   A bout per card: thumbnail with the date stamped on it, the matchup, and the
   three downloads. Gallery leads full width; HD/SD sit beneath it as a pair, so
   the trio reads as one primary action plus two variants instead of three
   identical bars. */
.bbfcFightGrid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); grid-template-columns: repeat(3, 1fr); }
.bbfcFightGrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.bbfcFightCard { display: flex; }
.bbfcFightCardInner {
  display: flex; flex-direction: column; width: 100%;
  background: linear-gradient(180deg, var(--colorSurfaceRaise), var(--colorSurface));
  border: 1px solid var(--colorBorder); border-radius: var(--radius); overflow: hidden;
  transition: transform var(--dur) var(--easeOut), border-color var(--dur) var(--easeOut), box-shadow var(--dur) var(--easeOut);
}
.bbfcFightCardInner:hover { transform: translateY(-4px); border-color: var(--colorBlood); box-shadow: var(--shadowBlood); }

.bbfcFightMedia { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #050505; }
.bbfcFightMedia img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--easeOut); }
.bbfcFightCardInner:hover .bbfcFightMedia img { transform: scale(1.04); }
.bbfcFightMedia::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
}
/* The "coming soon" card carries the club mark, not a fight still — show it whole. */
.bbfcFightCard.isSoon .bbfcFightMedia img { object-fit: contain; opacity: .55; }
.bbfcFightCard.isSoon .bbfcFightCardInner:hover .bbfcFightMedia img { transform: none; }

.bbfcFightDate, .bbfcFightTag, .bbfcFightSoon {
  position: absolute; margin: 0; z-index: 2;
  font-family: var(--fontTechno); text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; font-weight: 600; line-height: 1;
}
/* The club watermark is burned into the top-left of every fight still, so the
   date sits bottom-left instead, on the scrim. */
.bbfcFightDate { bottom: .65rem; left: .7rem; padding: .45em .7em; color: #fff; background: rgba(0,0,0,.6); border-left: 2px solid var(--colorBloodBright); backdrop-filter: blur(3px); }
.bbfcFightTag  { top: .7rem; right: .7rem; padding: .45em .7em; color: #fff; background: var(--colorBloodDark); border-radius: 999px; }
.bbfcFightSoon { bottom: .8rem; right: .85rem; color: var(--colorTextMuted); letter-spacing: .28em; }
.bbfcFightLock {
  position: absolute; top: .7rem; left: .7rem; margin: 0; z-index: 2;
  width: 2rem; height: 2rem; display: grid; place-items: center; color: #fff;
  background: rgba(0,0,0,.72); border: 1px solid var(--colorBorderSoft); border-radius: 999px;
}
.bbfcFightLock .bbfcFightIcon { width: 15px; height: 15px; }

.bbfcFightBody { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem 1.15rem; flex: 1 1 auto; }
.bbfcFightTitle { margin: 0; color: #fff; line-height: 1.1; font-size: clamp(1.15rem, .95rem + .55vw, 1.5rem); }
.bbfcFightVs { font-family: var(--fontTechno); font-size: .62em; text-transform: uppercase; letter-spacing: .16em; color: var(--colorBloodBright); padding: 0 .18em; vertical-align: .12em; }
.bbfcFightVenue {
  margin: 0; font-family: var(--fontTechno); text-transform: uppercase; letter-spacing: .16em;
  font-size: .66rem; color: var(--colorTextFaint);
}
.bbfcFightVenue::before { content: "◆"; margin-right: .5em; color: var(--colorBloodDark); font-size: .8em; vertical-align: .1em; }
.bbfcFightNote { margin: .2rem 0 0; color: var(--colorTextFaint); font-size: .88rem; font-style: italic; }

.bbfcFightLinks { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .45rem; grid-template-columns: 1fr 1fr; }
.bbfcFightLink.isFull { grid-column: 1 / -1; }
.bbfcFightLinks .btn { width: 100%; gap: .45em; font-size: .64rem; letter-spacing: .1em; padding: .8em .7em; }
.bbfcFightIcon { width: 14px; height: 14px; flex: 0 0 auto; }
.bbfcFightUnlock { margin-top: .55rem; width: 100%; font-size: .66rem; background: transparent; border-color: var(--colorBorderSoft); }
.bbfcFightUnlock:hover { border-color: var(--colorBloodBright); background: rgba(139,0,0,.12); }
.bbfcFightCard.isLocked .bbfcFightMedia img { filter: saturate(.25) brightness(.55); }
.bbfcFightCard.isSoon .bbfcFightCardInner { border-style: dashed; }

@media (max-width: 900px) { .bbfcFightGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bbfcFightGrid, .bbfcFightGrid.cols-2 { grid-template-columns: 1fr; } }

/* --- pollList: the tournament ballot ------------------------------------- */
.bbfcPollIntro { max-width: 62ch; margin: 0 auto 2rem; text-align: center; color: var(--colorTextMuted); }
.bbfcPollList { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.bbfcPollCard {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center; padding: clamp(1.1rem, 2.5vw, 1.8rem);
  background: var(--colorSurface); border: 1px solid var(--colorBorder); border-radius: var(--radius);
}
.bbfcPollMedia img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.bbfcPollBody { min-width: 0; }
.bbfcPollTitle { margin: 0 0 1rem; color: #fff; line-height: 1.1; font-size: clamp(1.3rem, 1rem + .8vw, 1.75rem); }
.bbfcPollLocked { color: var(--colorTextMuted); margin: 0 0 1rem; }

/* --- Forminator polls, dressed to match the rest of the site -------------- */
.bbfcPollForm .forminator-ui { max-width: 100%; }

/* The matchup is already the card's <h3>. Forminator repeats it as the poll
   question, and the radiogroup names itself from that element — so hide it
   from view without removing it from the accessibility tree. */
.bbfcPollForm .forminator-poll--question {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Forminator's base sheet is enqueued after ours and its rules are weighted
   `.forminator-ui.forminator-poll[data-design=…] .x` (0,4,0) — it explicitly
   resets the submit button (border:0, background-image:unset, padding:10px).
   The per-poll colour sheet that would normally repaint it is generated once
   and keyed to the poll id it was first built under, so it cannot be relied on.
   The palette therefore lives here, prefixed to outweigh the base sheet. */
.bbfcPollForm .forminator-ui.forminator-poll[data-design] .forminator-radio-label { color: #fff; line-height: 1.35; }
.bbfcPollForm .forminator-ui.forminator-poll[data-design] .forminator-radio .forminator-radio-bullet {
  border-color: var(--colorBorderSoft); background: transparent;
}
.bbfcPollForm .forminator-ui.forminator-poll[data-design] .forminator-radio .forminator-radio-bullet::before { background: var(--colorBloodBright); }
.bbfcPollForm .forminator-ui.forminator-poll[data-design] .forminator-radio input:checked + .forminator-radio-bullet { border-color: var(--colorBloodBright); }
.bbfcPollForm .forminator-ui.forminator-poll[data-design] .forminator-radio:hover .forminator-radio-bullet { border-color: var(--colorBlood); }
.bbfcPollForm .forminator-ui.forminator-poll[data-design] .forminator-radio input:focus-visible + .forminator-radio-bullet {
  outline: 2px solid var(--colorBloodBright); outline-offset: 2px;
}

/* Forminator spaces the actions with `.forminator-poll-body + .forminator-poll-footer`,
   but it prints a hidden referer input between the two, so the adjacency never
   matches and the button ends up against the last answer. */
.bbfcPollForm .forminator-ui.forminator-poll[data-design] .forminator-poll-footer { margin-top: 1.4rem; }

.bbfcPollForm .forminator-ui.forminator-poll[data-design] .forminator-button-submit {
  width: auto; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--fontTechno); font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  font-size: .78rem; line-height: 1; color: #fff; cursor: pointer;
  padding: 1.05em 2.4em; border: 1px solid var(--colorBlood); border-radius: var(--radius);
  background-color: var(--colorBloodDark);
  background-image: linear-gradient(180deg, var(--colorBlood), var(--colorBloodDark));
  transition: transform var(--dur) var(--easeOut), box-shadow var(--dur) var(--easeOut), background-image var(--dur) var(--easeOut);
}
.bbfcPollForm .forminator-ui.forminator-poll[data-design] .forminator-button-submit:hover,
.bbfcPollForm .forminator-ui.forminator-poll[data-design] .forminator-button-submit:focus-visible {
  transform: translateY(-2px); box-shadow: var(--shadowBlood);
  background-image: linear-gradient(180deg, var(--colorBloodBright), var(--colorBlood));
}

/* Post-vote states: the confirmation message and the results chart. */
.bbfcPollForm .forminator-response-message { color: #fff; margin-bottom: .8rem; }
.bbfcPollForm .forminator-response-message:empty { display: none; }
.bbfcPollForm canvas { max-width: 100%; }

@media (max-width: 780px) { .bbfcPollCard { grid-template-columns: 1fr; } }