/* BACKFIRE coming-soon page (2026-11-05), and its band on /party-games/. Loaded on those two pages only (site/backfire_soon.py).
   The game's own skin: deep navy-black, fire orange to hot yellow, smoke, the four suit colours; Keyhole only as the gold pin endorsement.
   All motion is CSS on painted parts; Calm mode (html.calm) and prefers-reduced-motion show one still frame. */
.bfs { --bf-bg: #0b0a14; --bf-bg2: #15101f; --bf-ink: #fff3dc; --bf-mute: #e6d6bd; --bf-or: #ff7a1f; --bf-hot: #ffc23d; --bf-red: #ff4a2b; --bf-line: #3a2a3c;
  --bf-F: #ff7a1f; --bf-B: #18c8bd; --bf-C: #ec3d93; --bf-S: #9a63f0;
  color: var(--bf-ink); background: radial-gradient(70% 40% at 80% 0%, rgba(255, 110, 30, 0.16), transparent 70%), radial-gradient(60% 30% at 0% 45%, rgba(236, 61, 147, 0.08), transparent 70%), var(--bf-bg);
  overflow-x: clip; }
.bfs h1, .bfs h2, .bfs h3 { overflow-wrap: break-word; color: var(--bf-ink); }
.bfs h2 { font-family: var(--display-plain); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; font-size: clamp(1.7rem, 6.4vw, 2.6rem); margin: 0; }
.bfs h3 { font-family: var(--display-plain); font-weight: 800; font-size: 1.25rem; line-height: 1.1; margin: 0; letter-spacing: 0.01em; }
.bfs .eyebrow { color: var(--bf-hot); margin: 0; }
.bfs p { color: var(--bf-mute); }
.bfs a:not(.btn) { color: var(--bf-hot); }
.bfs a:not(.btn):hover { color: #ffe08a; }
.bfs :focus-visible { outline: 3px solid var(--bf-hot); outline-offset: 3px; }
.bfs-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- hero ---------- */
.bfs-hero { position: relative; isolation: isolate; border-bottom: 1px solid var(--bf-line);
  background: radial-gradient(55% 60% at 75% 45%, rgba(255, 90, 20, 0.28), transparent 70%), radial-gradient(40% 50% at 10% 0%, rgba(24, 200, 189, 0.10), transparent 70%), linear-gradient(180deg, #120c1c, var(--bf-bg)); }
.bfs-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 5px; z-index: -1; background: linear-gradient(90deg, var(--bf-F), var(--bf-hot), var(--bf-C), var(--bf-S), var(--bf-B)); opacity: 0.9; }
.bfs-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding-block: 0.9rem 1.6rem; align-items: start; }
.bfs-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0; }
.bfs-soon, .bfs-age { font-family: var(--display-plain); font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.92rem; line-height: 1; padding: 0.38rem 0.6rem; border-radius: 0.3rem; }
.bfs-soon { color: #2a1204; background: linear-gradient(180deg, var(--bf-hot), var(--bf-or)); }
.bfs-age { color: var(--bf-ink); border: 1px solid #6a4a3a; }
.bfs-badges .tag-aud { position: static; margin: 0; }
.bfs-hero h1 { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.bfs-logo { display: block; width: min(100%, 470px); height: auto; aspect-ratio: 900 / 464; margin: -0.4rem 0 -0.6rem -0.5rem; filter: drop-shadow(0 6px 18px rgba(255, 90, 20, 0.35)); }
.bfs-h-sub { font-family: var(--body); font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--bf-mute); text-transform: none; letter-spacing: 0; }
.bfs-tag { margin: 0; font-family: var(--display-plain); font-weight: 900; text-transform: uppercase; line-height: 0.98; font-size: clamp(1.9rem, 8.6vw, 3.3rem); color: var(--bf-ink);
  text-shadow: 0 0 24px rgba(255, 110, 30, 0.45); max-width: 15ch; }
.bfs-sub { margin: 0; font-size: 1.05rem; line-height: 1.5; max-width: 36rem; color: var(--bf-mute); }
.bfs-hero-art { min-width: 0; }
.bfs-hero-art { display: flex; flex-direction: column; gap: 0.8rem; }
.bfs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.bfs-facts li { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.7rem; border-radius: 0.6rem; border: 1px solid var(--bf-line); background: rgba(16, 11, 22, 0.75); font-size: 0.9rem; color: var(--bf-mute); line-height: 1.25; }
.bfs-facts b { font-family: var(--display-plain); font-weight: 900; text-transform: uppercase; font-size: 1.35rem; line-height: 1; color: var(--bf-hot); }
@media (min-width: 560px) { .bfs-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bfs-endorse { display: flex; align-items: center; gap: 0.45rem; margin: 0.1rem 0 0; font-size: 0.9rem; color: #cdbfa8; }
.bfs-endorse svg { width: 1.05rem; height: 1.3rem; color: var(--gold, #e3a72f); fill: currentColor; flex: none; }
@media (min-width: 900px) {
  .bfs-hero-in { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: 2.2rem; padding-block: 1.6rem 2.4rem; }
  .bfs-hero-in > * { grid-column: 1; }
  .bfs-hero-in > .bfs-hero-art { grid-column: 2; grid-row: 1 / span 7; align-self: start; margin-top: 3.2rem; }
}

/* ---------- the form ---------- */
.bfs-form { border: 1px solid #5a3b2a !important; border-radius: 0.7rem; padding: 0.95rem !important; margin: 0.2rem 0 0 !important; gap: 0.5rem; max-width: 31rem;
  background: linear-gradient(180deg, rgba(40, 18, 14, 0.85), rgba(16, 10, 20, 0.9)) !important; box-shadow: 0 0 0 1px rgba(255, 122, 31, 0.15), 0 10px 30px rgba(0, 0, 0, 0.45); }
.bfs-form h2 { font-size: 1.35rem; color: var(--bf-ink); }
.bfs-form .lbl, .bfs-form label { color: var(--bf-ink); }
.bfs-form .fine, .bfs-form .fine span { color: #d7c8b0; font-size: 0.85rem; }
.bfs-form input[type=email] { min-height: 46px; }
.bfs-form .btn { min-height: 46px; }

/* ---------- the stage: the looping card moment ---------- */
.bfs-stage { position: relative; margin: 0; aspect-ratio: 16 / 10.5; border-radius: 0.9rem; overflow: hidden; container-type: inline-size; background: #0a0810;
  box-shadow: 0 0 0 1px #4a2a22, 0 0 40px rgba(255, 90, 20, 0.25), 0 16px 40px rgba(0, 0, 0, 0.55); }
.bfs-table { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bfs-anim { position: absolute; inset: 0; }
.bfs-anim > * { position: absolute; }
.bfs-bomb { width: 21cqw; height: auto; left: 39.5%; top: 4%; filter: drop-shadow(0 0 2cqw rgba(255, 110, 30, 0.55)); }
.bfs-spark { width: 5cqw; height: auto; left: 55.5%; top: 1.5%; }
.bfs-count { left: 63%; top: 9%; width: 20cqw; height: 13cqw; }
.bfs-n { position: absolute; inset: 0; opacity: 0; font-family: var(--display-plain); font-weight: 900; font-size: 13cqw; line-height: 1; color: #fff;
  text-shadow: 0 0 0.12em var(--bf-or), 0 0.04em 0 #3a1404, 0 0 0.4em rgba(255, 60, 20, 0.6); -webkit-text-stroke: 0.025em #2a0d04; }
.bfs-pile { left: 42%; top: 38%; width: 16cqw; aspect-ratio: 240 / 358; }
.bfs-pile .bfs-card { position: absolute; inset: 0; }
.bfs-base { transform: rotate(-5deg); }
.bfs-seat { display: flex; flex-direction: column; align-items: center; gap: 0.1em; padding: 0.5cqw 1.6cqw; border-radius: 1cqw; background: rgba(10, 8, 16, 0.82);
  border: 0.3cqw solid #5b4a6a; font-family: var(--display-plain); line-height: 1; }
.bfs-seat b { font-size: max(0.8rem, 3.4cqw); font-weight: 900; text-transform: uppercase; color: var(--bf-ink); }
.bfs-seat small { font-family: var(--body); font-size: max(0.62rem, 1.7cqw); color: #d7c8b0; }
.bfs-you { left: 4%; bottom: 17%; border-color: var(--bf-F); z-index: 3; }
.bfs-them { right: 4%; top: 46%; border-color: var(--bf-B); }
.bfs-meter { left: 26%; right: 26%; bottom: 5%; height: 3.4cqw; border-radius: 2cqw; background: rgba(8, 6, 14, 0.85); border: 0.3cqw solid #6a4a3a; overflow: hidden; }
.bfs-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #ffd34a, var(--bf-or) 55%, var(--bf-red)); box-shadow: 0 0 2cqw rgba(255, 90, 20, 0.8); }
.bfs-ticks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); }
.bfs-ticks i { border-right: 0.25cqw solid rgba(10, 8, 16, 0.75); }
.bfs-ticks i:last-child { border-right: 0; }
.bfs-ten { left: 75.5%; bottom: 4.4%; font-family: var(--display-plain); font-weight: 900; font-size: max(0.75rem, 3cqw); color: var(--bf-hot); }
.bfs-anim .bfs-ten { position: absolute; }
.bfs-blast { z-index: 2; width: 34cqw; height: auto; left: -3%; bottom: -2%; opacity: 0; transform-origin: 40% 60%; }
.bfs-caps { left: 3%; top: 5%; width: 34%; }
.bfs-cap { position: absolute; left: 0; top: 0; opacity: 0; padding: 0.55em 0.7em; border-radius: 0.5em; background: rgba(8, 6, 14, 0.86); border-left: 0.35em solid var(--bf-or);
  font-family: var(--body); font-weight: 700; font-size: clamp(0.72rem, 2.5cqw, 1.05rem); line-height: 1.25; color: var(--bf-ink); }
.bfs-pause { position: absolute; right: 0.5rem; bottom: 0.5rem; min-height: 28px; min-width: 0; padding: 0.2rem 0.55rem; border-radius: 0.4rem; border: 1px solid #6a4a3a;
  background: rgba(8, 6, 14, 0.85); color: var(--bf-ink); font: 700 0.78rem var(--body); cursor: pointer; }
.bfs-pause:hover { border-color: var(--bf-hot); }

/* the cards: a painted face, a painted emblem or special, numerals set in code (as the game does) */
.bfs-card { display: block; position: relative; aspect-ratio: 240 / 358; container-type: inline-size; border-radius: 7%; filter: drop-shadow(0 0.6cqw 1cqw rgba(0, 0, 0, 0.5)); }
.bfs-card img { position: absolute; display: block; }
.bfs-face { inset: 0; width: 100%; height: 100%; }
.bfs-art { width: 82%; height: auto; left: 9%; top: 50%; transform: translateY(-50%); }
.bfs-num .bfs-art { width: 56%; left: 22%; opacity: 0.9; }
.bfs-big { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display-plain); font-weight: 900; font-size: 58cqw; line-height: 1; color: #fff;
  -webkit-text-stroke: 2.4cqw #1a0b10; paint-order: stroke fill; text-shadow: 0 2cqw 0 rgba(0, 0, 0, 0.35); }
.bfs-k { position: absolute; font-family: var(--display-plain); font-weight: 900; font-size: 19cqw; line-height: 1; color: #fff; -webkit-text-stroke: 1.4cqw #1a0b10; paint-order: stroke fill; }
.bfs-tl { left: 9%; top: 6%; }
.bfs-br { right: 9%; bottom: 6%; transform: rotate(180deg); }

/* the loop: 10 s. You pump (2), they bounce (4), you Turbo (7), they Turbo (10), it blows on you */
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .bfs-f1 { animation: bfs-f1 10s infinite both cubic-bezier(.2, .8, .3, 1); }
  html:not(.calm) .bfs-f2 { animation: bfs-f2 10s infinite both cubic-bezier(.2, .8, .3, 1); }
  html:not(.calm) .bfs-f3 { animation: bfs-f3 10s infinite both cubic-bezier(.2, .8, .3, 1); }
  html:not(.calm) .bfs-f4 { animation: bfs-f4 10s infinite both cubic-bezier(.2, .8, .3, 1); }
  html:not(.calm) .bfs-n0 { animation: bfs-n0 10s infinite both; }
  html:not(.calm) .bfs-n1 { animation: bfs-n1 10s infinite both; }
  html:not(.calm) .bfs-n2 { animation: bfs-n2 10s infinite both; }
  html:not(.calm) .bfs-n3 { animation: bfs-n3 10s infinite both; }
  html:not(.calm) .bfs-n4 { animation: bfs-n4 10s infinite both; }
  html:not(.calm) .bfs-fill { animation: bfs-fill 10s infinite both; }
  html:not(.calm) .bfs-c1 { animation: bfs-c1 10s infinite both; }
  html:not(.calm) .bfs-c2 { animation: bfs-c2 10s infinite both; }
  html:not(.calm) .bfs-c3 { animation: bfs-c3 10s infinite both; }
  html:not(.calm) .bfs-c4 { animation: bfs-c4 10s infinite both; }
  html:not(.calm) .bfs-c5 { animation: bfs-c5 10s infinite both; }
  html:not(.calm) .bfs-bomb { animation: bfs-bomb 10s infinite both; }
  html:not(.calm) .bfs-spark { animation: bfs-spark 10s infinite both; }
  html:not(.calm) .bfs-blast { animation: bfs-blast 10s infinite both; }
  html:not(.calm) .bfs-you { animation: bfs-you 10s infinite both; }
  html:not(.calm) .bfs-them { animation: bfs-them 10s infinite both; }
  .bfs-stage.is-paused * { animation-play-state: paused !important; }
}
@keyframes bfs-f1 { 0% { opacity: 0; transform: translate(-330%, 95%) rotate(-55deg) scale(1.15); } 1% { opacity: 1; } 7% { transform: translate(-34%, 8%) rotate(-18deg) scale(1.12); }
  9%, 90% { opacity: 1; transform: translate(-34%, 8%) rotate(-18deg) scale(1); } 95%, 100% { opacity: 0; transform: translate(-34%, 8%) rotate(-18deg) scale(1); } }
@keyframes bfs-f2 { 0%, 17% { opacity: 0; transform: translate(330%, 10%) rotate(60deg) scale(1.15); } 18% { opacity: 1; } 24% { transform: translate(22%, -9%) rotate(13deg) scale(1.12); }
  26%, 90% { opacity: 1; transform: translate(22%, -9%) rotate(13deg) scale(1); } 95%, 100% { opacity: 0; transform: translate(22%, -9%) rotate(13deg) scale(1); } }
@keyframes bfs-f3 { 0%, 35% { opacity: 0; transform: translate(-330%, 95%) rotate(-60deg) scale(1.15); } 36% { opacity: 1; } 42% { transform: translate(-20%, 6%) rotate(-6deg) scale(1.14); }
  44%, 90% { opacity: 1; transform: translate(-20%, 6%) rotate(-6deg) scale(1); } 95%, 100% { opacity: 0; transform: translate(-20%, 6%) rotate(-6deg) scale(1); } }
@keyframes bfs-f4 { 0%, 53% { opacity: 0; transform: translate(330%, 10%) rotate(65deg) scale(1.15); } 54% { opacity: 1; } 60% { transform: translate(30%, -4%) rotate(21deg) scale(1.16); }
  62%, 90% { opacity: 1; transform: translate(30%, -4%) rotate(21deg) scale(1); } 95%, 100% { opacity: 0; transform: translate(30%, -4%) rotate(21deg) scale(1); } }
@keyframes bfs-n0 { 0%, 6% { opacity: 1; transform: scale(1); } 8%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes bfs-n1 { 0%, 7% { opacity: 0; transform: scale(1.6); } 9% { opacity: 1; transform: scale(1); } 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes bfs-n2 { 0%, 24% { opacity: 0; transform: scale(1.6); } 26% { opacity: 1; transform: scale(1); } 42% { opacity: 1; } 43%, 100% { opacity: 0; } }
@keyframes bfs-n3 { 0%, 42% { opacity: 0; transform: scale(1.6); } 44% { opacity: 1; transform: scale(1); } 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes bfs-n4 { 0%, 60% { opacity: 0; transform: scale(1.8); } 62% { opacity: 1; transform: scale(1); color: #fff; } 66%, 90% { opacity: 1; color: #ffd9a0; } 94%, 100% { opacity: 0; } }
@keyframes bfs-fill { 0%, 7% { width: 0; } 9%, 24% { width: 20%; } 26%, 42% { width: 40%; } 44%, 60% { width: 70%; } 62%, 88% { width: 100%; } 95%, 100% { width: 0; } }
@keyframes bfs-c1 { 0%, 8% { opacity: 0; transform: translateY(0.4em); } 10%, 23% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }
@keyframes bfs-c2 { 0%, 25% { opacity: 0; transform: translateY(0.4em); } 27%, 41% { opacity: 1; transform: none; } 43%, 100% { opacity: 0; } }
@keyframes bfs-c3 { 0%, 43% { opacity: 0; transform: translateY(0.4em); } 45%, 59% { opacity: 1; transform: none; } 61%, 100% { opacity: 0; } }
@keyframes bfs-c4 { 0%, 61% { opacity: 0; transform: translateY(0.4em); } 63%, 69% { opacity: 1; transform: none; } 71%, 100% { opacity: 0; } }
@keyframes bfs-c5 { 0%, 70% { opacity: 0; transform: translateY(0.4em); } 72%, 90% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; } }
@keyframes bfs-bomb { 0%, 56% { opacity: 1; transform: none; } 58% { transform: rotate(-4deg) scale(1.03); } 60% { transform: rotate(4deg) scale(1.06); } 62% { transform: rotate(-5deg) scale(1.1); }
  64% { opacity: 1; transform: scale(1.22); filter: brightness(1.6) drop-shadow(0 0 3cqw #ff6a1f); } 66%, 92% { opacity: 0; transform: scale(0.6); } 97%, 100% { opacity: 1; transform: none; } }
@keyframes bfs-spark { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 10%, 30%, 50% { transform: scale(1.2) rotate(12deg); } 20%, 40% { transform: scale(0.9) rotate(-8deg); } 64%, 94% { opacity: 0; } }
@keyframes bfs-blast { 0%, 64% { opacity: 0; transform: scale(0.2); } 67% { opacity: 1; transform: scale(1.12); } 70% { transform: scale(0.96); } 74%, 86% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1.05); } }
@keyframes bfs-you { 0%, 64% { box-shadow: none; } 67%, 88% { box-shadow: 0 0 0 0.5cqw var(--bf-or), 0 0 4cqw var(--bf-red); background: rgba(80, 20, 6, 0.9); } 94%, 100% { box-shadow: none; } }
@keyframes bfs-them { 0%, 17%, 26%, 53%, 62%, 100% { transform: none; } 20%, 56% { transform: scale(1.08); } }

/* still frame: Calm mode, reduced motion, or no CSS animation: three cards down, the count at 7, the rule as the caption */
.bfs-f1 { opacity: 1; transform: translate(-34%, 8%) rotate(-18deg); }
.bfs-f2 { opacity: 1; transform: translate(22%, -9%) rotate(13deg); }
.bfs-f3 { opacity: 1; transform: translate(-20%, 6%) rotate(-6deg); }
.bfs-f4 { opacity: 0; }
.bfs-n3 { opacity: 1; }
.bfs-fill { width: 70%; }
.bfs-c0 { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .bfs-c0 { opacity: 0; }
  html:not(.calm) .bfs-n3 { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .bfs-pause { display: none; } }
html.calm .bfs-pause { display: none; }

/* ---------- body sections ---------- */
.bfs-body { display: flex; flex-direction: column; gap: 2.4rem; padding-block: 0.6rem 3rem; }
.bfs-body .crumbs, .bfs-body .crumbs a { color: #d7c8b0; }
.bfs-sec { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.bfs-lede { margin: 0; max-width: 44rem; }
.bfs ul, .bfs ol { padding: 0; margin: 0; list-style: none; }
.bfs-hooks { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
.bfs-hooks li { display: grid; grid-template-columns: 4.5rem 1fr; grid-template-rows: auto 1fr; column-gap: 0.9rem; row-gap: 0.25rem; align-items: start; padding: 1rem; border-radius: 0.8rem;
  background: linear-gradient(180deg, rgba(44, 22, 30, 0.75), rgba(16, 11, 22, 0.85)); border: 1px solid var(--bf-line); }
.bfs-hooks img { grid-row: 1 / span 2; width: 4.5rem; height: 4.5rem; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(255, 90, 20, 0.35)); }
.bfs-hooks h3 { color: var(--bf-hot); }
.bfs-hooks p { margin: 0; }
@media (min-width: 720px) { .bfs-hooks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .bfs-hooks { grid-template-columns: repeat(4, 1fr); } .bfs-hooks li { display: flex; flex-direction: column; gap: 0.45rem; } .bfs-hooks img { width: 5.5rem; height: 5.5rem; } }
.bfs-steps { display: grid; gap: 0.9rem; grid-template-columns: 1fr; counter-reset: s; }
.bfs-steps li { position: relative; padding: 1rem 1rem 1rem 3.6rem; border-radius: 0.8rem; border: 1px solid var(--bf-line); background: rgba(16, 11, 22, 0.8); }
.bfs-steps p { margin: 0.3rem 0 0; }
.bfs-step-n { position: absolute; left: 0.9rem; top: 0.9rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; font-family: var(--display-plain); font-weight: 900; font-size: 1.2rem;
  color: #2a1204; background: linear-gradient(180deg, var(--bf-hot), var(--bf-or)); }
@media (min-width: 820px) { .bfs-steps { grid-template-columns: repeat(3, 1fr); } }
.bfs-suits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; max-width: 40rem; }
.bfs-suits li { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; font-size: 0.95rem; color: var(--bf-mute); }
.bfs-sn b { display: block; font-family: var(--display-plain); font-weight: 900; text-transform: uppercase; font-size: 1.15rem; color: var(--bf-ink); }
.bfs-suits .bfs-card { width: 100%; max-width: 7.5rem; }
.bfs-specials { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.6rem; }
.bfs-specials li { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
.bfs-specials .bfs-card { width: 100%; max-width: 8.5rem; }
.bfs-specials p { margin: 0; font-size: 0.95rem; }
@media (min-width: 720px) { .bfs-specials { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.bfs-for { display: grid; gap: 1.2rem; grid-template-columns: 1fr; align-items: center; }
.bfs-for-copy { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.bfs-who { display: flex; flex-direction: column; gap: 0.7rem; }
.bfs-who li { position: relative; padding-left: 1.6rem; color: var(--bf-mute); }
.bfs-who li::before { content: ""; position: absolute; left: 0.1rem; top: 0.42rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--bf-hot), var(--bf-or)); box-shadow: 0 0 8px var(--bf-or); }
.bfs-who b { color: var(--bf-ink); }
.bfs-poster { display: block; width: min(100%, 380px); height: auto; justify-self: center; border-radius: 1rem; box-shadow: 0 0 0 1px #4a2a22, 0 0 36px rgba(255, 90, 20, 0.3); }
@media (min-width: 820px) { .bfs-for { grid-template-columns: 1fr 380px; } }
.bfs-why { display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
.bfs-why li { padding: 0.95rem 1rem; border-radius: 0.7rem; border: 1px solid var(--bf-line); border-top: 3px solid var(--bf-or); background: rgba(16, 11, 22, 0.8); }
.bfs-why li:nth-child(4n+2) { border-top-color: var(--bf-B); }
.bfs-why li:nth-child(4n+3) { border-top-color: var(--bf-C); }
.bfs-why li:nth-child(4n+4) { border-top-color: var(--bf-S); }
.bfs-why p { margin: 0.3rem 0 0; }
@media (min-width: 720px) { .bfs-why { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .bfs-why { grid-template-columns: repeat(3, 1fr); } }
.bfs-packlist { display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
.bfs-packlist li { padding: 1rem; border-radius: 0.7rem; border: 1px dashed #6a4a3a; background: rgba(30, 16, 24, 0.6); }
.bfs-packlist h3 { color: var(--bf-hot); }
.bfs-packlist p { margin: 0.3rem 0 0; }
@media (min-width: 720px) { .bfs-packlist { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .bfs-packlist { grid-template-columns: repeat(4, 1fr); } }
.bfs-end { position: relative; display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: center; justify-items: center; padding: 1.2rem 1rem; border-radius: 1rem;
  background: radial-gradient(60% 80% at 50% 0%, rgba(255, 90, 20, 0.22), transparent 70%), #120c1c; border: 1px solid #4a2a22; }
.bfs-end-art { width: min(60%, 240px); height: auto; }
.bfs-end .bfs-form { width: 100%; }
@media (min-width: 820px) { .bfs-end { grid-template-columns: 260px 1fr; justify-items: start; padding: 1.6rem; } .bfs-end-art { width: 100%; } }
.bfs .game-faq h2 { margin-bottom: 0.3rem; }
.bfs .faq details { border-color: var(--bf-line); }
.bfs .faq summary { color: var(--bf-ink); }
.bfs .faq p { color: var(--bf-mute); }

/* ---------- the BACKFIRE band on /party-games/ ---------- */
.bfs-band { display: grid !important; grid-template-columns: 1fr; gap: 1rem; align-items: center;
  background: radial-gradient(60% 90% at 15% 50%, rgba(255, 110, 30, 0.22), transparent 70%), linear-gradient(180deg, #160f1e, #0b0a14) !important; border-color: #5a3b2a !important; color: #fff3dc; }
.bfs-band .bfs-band-tile { width: min(62%, 230px); justify-self: center; pointer-events: auto; }
.bfs-band-copy { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.bfs-band-copy h2 { margin: 0; font-family: var(--display-plain); font-weight: 900; font-size: clamp(2rem, 8vw, 3rem); line-height: 1; color: #fff3dc; letter-spacing: 0.02em; }
.bfs-band-copy .eyebrow { margin: 0; color: #ffc23d; }
.bfs-band-tag { margin: 0; font-weight: 700; font-size: 1.1rem; color: #fff3dc; }
.bfs-band-copy .muted { color: #e6d6bd !important; margin: 0; }
.bfs-band-copy p:last-child { margin: 0.2rem 0 0; }
@media (min-width: 760px) { .bfs-band { grid-template-columns: 230px 1fr; } .bfs-band .bfs-band-tile { width: 100%; } }

/* The box set (2026-11-05): the group shot above the pack list and a box picture on each pack */
.bfs-group { display: block; width: 100%; max-width: 1000px; height: auto; margin: 1rem auto 1.4rem; border-radius: 0.7rem; }
.bfs-box { display: block; width: min(100%, 260px); height: auto; margin: 0 auto 0.6rem; border-radius: 0.5rem; }

/* ---------- the sale states (2026-11-05, briefs/backfire-sale-page-2026-11-05.md) ----------
   .bfs[data-bfs-state] is soon, sale or lp (set by the build, then by the page script from GET /prices). [data-bfs-only] lists the
   states a block shows in. shop.js still owns each buy box's [hidden]; these rules only take blocks away, never show one. */
.bfs[data-bfs-state="soon"] [data-bfs-only]:not([data-bfs-only~="soon"]),
.bfs[data-bfs-state="sale"] [data-bfs-only]:not([data-bfs-only~="sale"]),
.bfs[data-bfs-state="lp"] [data-bfs-only]:not([data-bfs-only~="lp"]) { display: none !important; }
.bfs-buy { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 0.9rem; align-items: center; max-width: 34rem; padding: 0.95rem; border-radius: 0.8rem;
  border: 1px solid #6a4128; background: linear-gradient(180deg, rgba(48, 20, 12, 0.92), rgba(16, 10, 20, 0.94));
  box-shadow: 0 0 0 1px rgba(255, 122, 31, 0.22), 0 0 36px rgba(255, 90, 20, 0.22), 0 12px 32px rgba(0, 0, 0, 0.5); }
.bfs-buy-box { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55)); }
.bfs-buy-in { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.bfs-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.4rem; color: var(--bf-ink); }
.bfs-price b { font-family: var(--display-plain); font-weight: 900; font-size: clamp(2.2rem, 9vw, 3rem); line-height: 0.9; color: var(--bf-hot); text-shadow: 0 0 18px rgba(255, 110, 30, 0.45); }
.bfs-price-for { font-weight: 700; font-size: 1rem; color: var(--bf-ink); }
.bfs .bfs-buy .buy-box { margin: 0; gap: 0.45rem; }
.bfs-buy-go { min-height: 52px !important; font-size: 1.1rem; padding-inline: 1.2rem; }
.bfs .buy-note { margin: 0; font-size: 0.92rem; line-height: 1.4; color: var(--bf-mute); }
.bfs .buy-owned { color: var(--bf-ink); background: rgba(24, 200, 189, 0.12); border-color: rgba(24, 200, 189, 0.6); }
.bfs .buy-owned p { margin: 0; color: var(--bf-ink); }
.bfs .buy-test { color: #ffb3aa; }
.bfs-owned { display: grid; gap: 0.5rem; }
.bfs-owned-go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.bfs-lpfree { display: grid; gap: 0.45rem; }
.bfs-lpfree .btn { justify-self: start; }
.bfs[data-bfs-own="yes"] .bfs-lpfree, .bfs[data-bfs-own="yes"] .bfs-signin { display: none; }
.bfs-perks { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.1rem 0 0 !important; }
.bfs-perks li { font-size: 0.82rem; font-weight: 700; line-height: 1.2; padding: 0.3rem 0.55rem; border-radius: 999px; border: 1px solid #6a4a3a; color: var(--bf-ink); }
.bfs-pricefail { display: none; margin: 0; font-size: 0.92rem; color: var(--bf-ink); }
.bfs.bfs-noprice .bfs-pricefail { display: block; }
@media (max-width: 420px) { .bfs-buy { grid-template-columns: minmax(0, 5.6rem) minmax(0, 1fr); padding: 0.8rem; gap: 0.7rem; } .bfs-buy-go { font-size: 1rem; padding-inline: 0.9rem; } }
/* the packs: Coming soon until a pack's own record is on sale; a pack needs the base game */
.bfs-pk-soon { display: inline-block; margin: 0.55rem 0 0 !important; font-family: var(--display-plain); font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 0.85rem; padding: 0.3rem 0.55rem; border-radius: 0.3rem; color: var(--bf-ink); border: 1px solid #6a4a3a; }
.bfs-pk .buy-box { margin-top: 0.6rem; }
.bfs-needs { display: none; margin: 0 !important; font-size: 0.9rem; color: var(--bf-ink); }
.bfs[data-bfs-own="no"] .bfs-pk-buy:not([hidden]) .bfs-needs { display: block; }
.bfs[data-bfs-own="no"] .bfs-pk-buy [data-buy-go] { display: none; }   /* no pack button until the host owns BACKFIRE */
.bfs.bfs-allpacks .bfs-bundle [data-buy-go], .bfs.bfs-allpacks .bfs-bundle .buy-note { display: none; }
.bfs-bundle { max-width: 40rem; margin: 0 auto 0.6rem !important; padding: 0.9rem 1rem; border-radius: 0.7rem; border: 1px solid #6a4128; background: rgba(40, 18, 14, 0.7); }
@media (min-width: 900px) { .bfs:not([data-bfs-state="soon"]) .bfs-logo { width: min(100%, 400px); } }
.bfs[data-bfs-own="yes"] .bfs-price, .bfs[data-bfs-own="yes"] .bfs-perks { display: none; }   /* an owner sees the Host button, not the price */
.bfs-pk-soon[hidden] { display: none; }
.bfs [hidden] { display: none !important; }   /* shop.js hides with [hidden]; no block display rule above may bring one back */
.bfs-bundle h3 { color: var(--bf-hot); }
/* phones: the box sits beside the price only; the button and notes take the full width so the button never wraps */
@media (max-width: 520px) {
  .bfs-buy { grid-template-columns: 4.8rem minmax(0, 1fr); row-gap: 0.55rem; }
  .bfs-buy-in { display: contents; }
  .bfs-buy-box { grid-column: 1; grid-row: 1; }
  .bfs-buy-in > * { grid-column: 1 / -1; }
  .bfs-buy-in > .bfs-price { grid-column: 2; grid-row: 1; align-self: center; }
  .bfs-buy .buy-box .btn, .bfs-lpfree .btn { width: 100%; justify-content: center; justify-self: stretch; }
}
.bfs[data-bfs-own="yes"] .bfs-shop > .buy-note { display: none; }
.bfs-pk .buy-box .btn { width: 100%; justify-content: center; justify-self: stretch; white-space: nowrap; }