/* -----------------------------------------------------------------------------
   BBFC Age Gate.

   Hidden by default and shown only once the snippet in <head> has put
   data-bbfcAgeGate="on" on <html> — so the overlay is in the markup for every
   visitor (the page cache serves one copy of the HTML to all of them) while the
   decision stays per-browser. Attribute NAMES match case-insensitively in HTML,
   so the camelCase spelling here is the same attribute the script writes.

   Every colour and face falls back to a literal, because this file loads on its
   own and must still look right if the theme's tokens ever move.
   -------------------------------------------------------------------------- */

.bbfcAgeGate { display: none; }

html[data-bbfcAgeGate="on"] { overflow: hidden; }
html[data-bbfcAgeGate="on"] body { overflow: hidden; }

html[data-bbfcAgeGate="on"] .bbfcAgeGate {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* over the sticky header, the back-to-top button and any notice bar */
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3rem);
  background:
    radial-gradient(90rem 50rem at 50% -10%, rgba(123, 14, 0, .45), transparent 60%),
    var(--colorBg, #000);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bbfcAgeGateInner {
  width: min(44rem, 100%);
  margin: auto;
  text-align: center;
  color: var(--colorText, #fff);
  border: 1px solid var(--colorBorderSoft, #2a2626);
  border-radius: var(--radius, 4px);
  background: rgba(12, 13, 14, .92);
  padding: clamp(1.75rem, 5vw, 3.25rem) clamp(1.25rem, 5vw, 3rem);
  box-shadow: var(--shadowBlood, 0 10px 40px -12px rgba(139, 0, 0, .55));
}

.bbfcAgeGateMark {
  width: 150px; height: auto;
  margin: 0 auto clamp(1rem, 3vw, 1.75rem);
  opacity: .92;
}

.bbfcAgeGateEyebrow {
  margin: 0 0 .75rem;
  font-family: var(--fontTechno, "Chakra Petch", system-ui, sans-serif);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--colorBloodBright, #da0a0a);
}

.bbfcAgeGateTitle {
  margin: 0 0 .75rem;
  font-family: var(--fontDisplay, "IM Fell English", Georgia, serif);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.08;
  font-weight: 700;
}

.bbfcAgeGateBody {
  margin: 0 auto clamp(1.5rem, 4vw, 2.25rem);
  max-width: 34rem;
  font-family: var(--fontBody, "IM Fell English", Georgia, serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--colorTextMuted, #ababab);
}

.bbfcAgeGateActions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}
/* The theme's .btn is the house style; these rules only restate enough of it to
   survive on a view whose stylesheet has not loaded (or a future theme). */
.bbfcAgeGate .btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fontTechno, "Chakra Petch", system-ui, sans-serif);
  font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  font-size: .85rem; line-height: 1; color: #fff; cursor: pointer;
  padding: .95em 1.9em;
  border: 1px solid var(--colorBlood, #8f0000);
  border-radius: var(--radius, 4px);
  background: linear-gradient(180deg, var(--colorBlood, #8f0000), var(--colorBloodDark, #7b0e00));
}
.bbfcAgeGate .btn--ghost {
  background: transparent;
  border-color: var(--colorBorderSoft, #2a2626);
  color: var(--colorTextMuted, #ababab);
}
.bbfcAgeGate .btn:focus-visible { outline: 2px solid var(--colorBloodBright, #da0a0a); outline-offset: 3px; }

.bbfcAgeGateFine {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  font-family: var(--fontTechno, "Chakra Petch", system-ui, sans-serif);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--colorTextFaint, #706f6f);
}
.bbfcAgeGateFine a { color: var(--colorTextMuted, #ababab); text-decoration: underline; }

@media (max-width: 30rem) {
  .bbfcAgeGateActions { flex-direction: column; }
  .bbfcAgeGate .btn { width: 100%; }
}