/*
 * ladyBONK — ladyBONK.com
 *
 * Visual DNA:
 * - Full-page blur retained from the previous rework.
 * - Broad black cinematic vignette retained.
 * - Center composition uses a striped/stenciled 18+ watermark, an 18+ NOTICE tag,
 *   one-line AGE RESTRICTION heading, and one legal notice block.
 * - No SHEMAX-style "Adults only" headline.
 * - No requirements grid, checkpoints, dial, cards, or panels.
 * - Ladyboy69-native red/yellow rounded CTA language.
 */

:root {
  --lbk-black: #000000;
  --lbk-white: #ffffff;
  --lbk-red: #d80000;
  --lbk-yellow: #ffc900;
  --lbk-grey: #bababa;
  --lbk-muted: rgba(255, 255, 255, 0.64);
  --lbk-faint: rgba(255, 255, 255, 0.12);
}

html.lbk-lock,
body.lbk-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.lbk_shell {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  color: var(--lbk-white);
  font-family: "Roboto", Arial, sans-serif;
}

/* Full-screen blur: center stays blurred too. */
.lbk_shell::before {
  content: "";
  position: absolute;
  inset: -32px;
  z-index: -3;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(22px) brightness(0.61) saturate(0.52);
  backdrop-filter: blur(22px) brightness(0.61) saturate(0.52);
}

/* Broad, feathered darkness — no hard oval edge. */
.lbk_shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 94% 83% at 50% 49%,
      rgba(0,0,0,.03) 0%,
      rgba(0,0,0,.08) 25%,
      rgba(0,0,0,.18) 43%,
      rgba(0,0,0,.38) 60%,
      rgba(0,0,0,.70) 78%,
      rgba(0,0,0,.91) 91%,
      rgba(0,0,0,.985) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.44) 0%,
      transparent 25%,
      transparent 73%,
      rgba(0,0,0,.48) 100%
    );
}

.lbk_shell:focus {
  outline: none;
}

/* -------------------------------------------------------------------------
 * NEW ladyBONK notice composition
 * ------------------------------------------------------------------------- */

.lbk_notice {
  position: relative;
  width: min(870px, calc(100vw - 64px));
  max-height: calc(100dvh - 48px);
  padding: 40px 36px 30px;
  text-align: center;
}



/*
 * ladyBONK-specific age watermark.
 * This is intentionally NOT an outline treatment: the glyph is filled with
 * diagonal red/yellow hatch lines and rotated like a large printed stencil.
 */
.lbk_age_backdrop {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -53%) rotate(-7deg) scaleX(1.08);
  color: transparent;
  background:
    repeating-linear-gradient(
      132deg,
      rgba(255, 201, 0, 0.16) 0 4px,
      rgba(216, 0, 0, 0.11) 4px 7px,
      transparent 7px 14px
    );
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(250px, 34vw, 510px);
  font-weight: 900;
  line-height: 0.72;
  letter-spacing: -0.12em;
  white-space: nowrap;
  opacity: 0.72;
  filter: blur(0.25px);
  pointer-events: none;
  user-select: none;
}

.lbk_notice_tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin-bottom: 18px;
  padding: 0 17px;
  border-radius: 999px;
  background: var(--lbk-yellow);
  color: var(--lbk-black);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.26);
}

.lbk_heading {
  margin: 0;
  color: var(--lbk-white);
  font-size: clamp(44px, 5.3vw, 72px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 5px 36px rgba(0, 0, 0, 0.86);
}



.lbk_copy {
  width: min(720px, 100%);
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.58;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.90);
}

.lbk_terms {
  color: var(--lbk-yellow);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 201, 0, 0.55);
}

.lbk_terms:hover,
.lbk_terms:focus-visible {
  color: var(--lbk-white);
  border-bottom-color: rgba(255, 255, 255, 0.72);
}

.lbk_actions {
  margin-top: 28px;
  text-align: center;
}

.lbk_continue,
.lbk_leave {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font-family: "Roboto", Arial, sans-serif;
  cursor: pointer;
}

.lbk_continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: min(100%, 420px);
  min-height: 64px;
  padding: 0 30px;
  border-radius: 22px;
  background: var(--lbk-red);
  color: var(--lbk-white);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.lbk_continue_arrow {
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

.lbk_continue:hover {
  background: var(--lbk-yellow);
  color: var(--lbk-black);
}

.lbk_continue:focus-visible,
.lbk_leave:focus-visible,
.lbk_terms:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.94);
  outline-offset: 4px;
}

.lbk_leave {
  display: block;
  margin: 22px auto 0;
  padding: 8px 13px;
  background: transparent;
  color: rgba(255, 255, 255, 0.53);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition: color 150ms ease;
}

.lbk_leave:hover {
  color: var(--lbk-white);
}

.lbk_shell.is-hidden {
  display: none;
}

/* -------------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .lbk_shell::before {
    inset: -24px;
    background: rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(19px) brightness(0.60) saturate(0.50);
    backdrop-filter: blur(19px) brightness(0.60) saturate(0.50);
  }

  .lbk_shell::after {
    background:
      radial-gradient(
        ellipse 112% 83% at 50% 48%,
        rgba(0,0,0,.04) 0%,
        rgba(0,0,0,.11) 30%,
        rgba(0,0,0,.28) 52%,
        rgba(0,0,0,.69) 79%,
        rgba(0,0,0,.96) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(0,0,0,.42) 0%,
        transparent 20%,
        transparent 76%,
        rgba(0,0,0,.50) 100%
      );
  }

  .lbk_notice {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 14px);
    padding: 20px 12px 14px;
  }

  .lbk_age_backdrop {
    top: 48%;
    transform: translate(-50%, -50%) rotate(-8deg) scaleX(1.10);
    font-size: clamp(185px, 62vw, 285px);
    opacity: 0.66;
  }

  .lbk_notice_tag {
    min-height: 27px;
    margin-bottom: 13px;
    padding: 0 14px;
    font-size: 9px;
  }

  .lbk_heading {
    font-size: clamp(34px, 9.5vw, 48px);
    white-space: nowrap;
  }

  .lbk_copy {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.43;
  }

  .lbk_actions {
    margin-top: 20px;
  }

  .lbk_continue {
    min-width: min(100%, 390px);
    min-height: 58px;
    padding: 0 22px;
    border-radius: 18px;
    font-size: 13.5px;
  }

  .lbk_continue_arrow {
    font-size: 23px;
  }

  .lbk_leave {
    margin-top: 24px;
    padding: 10px 12px;
    font-size: 13.5px;
  }
}

/* Short screens: reduce decoration/spacing, not CTA usability. */
@media screen and (max-width: 767px) and (max-height: 700px) {
  .lbk_age_backdrop {
    font-size: clamp(165px, 55vw, 240px);
    opacity: 0.60;
  }

  .lbk_notice {
    padding-top: 12px;
    padding-bottom: 9px;
  }

  .lbk_notice_tag {
    min-height: 24px;
    margin-bottom: 9px;
  }

  .lbk_heading {
    font-size: 34px;
  }

  .lbk_copy {
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.34;
  }

  .lbk_actions {
    margin-top: 15px;
  }

  .lbk_continue {
    min-height: 54px;
    font-size: 13px;
  }

  .lbk_leave {
    margin-top: 20px;
    font-size: 13px;
  }
}

@media screen and (max-width: 767px) and (max-height: 580px) {
  .lbk_age_backdrop {
    font-size: clamp(145px, 50vw, 205px);
    opacity: 0.54;
  }

  .lbk_notice_tag {
    min-height: 22px;
    margin-bottom: 7px;
    font-size: 8px;
  }

  .lbk_heading {
    font-size: 30px;
  }

  .lbk_copy {
    margin-top: 7px;
    font-size: 10.9px;
    line-height: 1.25;
  }

  .lbk_actions {
    margin-top: 11px;
  }

  .lbk_continue {
    min-height: 50px;
    font-size: 12.5px;
  }

  .lbk_leave {
    margin-top: 16px;
    padding: 7px 10px;
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lbk_continue,
  .lbk_leave {
    transition: none;
  }
}