:root {
      --popup-z: 9999;
      --backdrop-alpha: 0.28; /* change if you want darker/lighter dim */
      --blur-amount: 6px;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: #fff;
    }

    /* SITE CONTENT */
    .site-content {
      min-height: 100vh;
      padding: 40px;
      transition: filter 220ms ease;
    }

    /* when active, only the site-content is blurred and not clickable */
    .site-content.blur {
      filter: blur(var(--blur-amount));
      pointer-events: none;
      user-select: none;
    }

    /* POPUP WRAPPER (covers whole screen) */
    .popup {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: var(--popup-z);
      /* transparent so blurred background remains visible */
      background: transparent;
    }

    /* a subtle backdrop (semi-transparent) between site and popup to dim, but not hide blur */
    .popup .backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,var(--backdrop-alpha));
      z-index: calc(var(--popup-z) - 1);
      /* keep backdrop clickable so background clicks are blocked */
    }

    /* POPUP CONTENT (kept above everything) */
    .popup-content {
      position: relative;
      z-index: var(--popup-z);
      width: 92%;
      max-width: 460px;
      border-radius: 14px;
      overflow: hidden;
      color: #fff;
      text-align: center;
      padding: 36px 26px;
      /* background image + dark inner overlay for nice look */
      background: url("https://i.ibb.co/8sh5Y6D/18plus-warning.jpg") center/cover no-repeat;
      box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.25);
    }

    .popup-content::before{
      /* inner dark tint so text remains readable */
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 0;
    }
    .popup-content * { position: relative; z-index: 1; }

    .popup-content h2 {
      margin: 0 0 12px;
      font-size: 28px;
      text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    }
    .popup-content p {
      margin: 0 0 20px;
      font-size: 15px;
      line-height: 1.4;
      text-shadow: 0 1px 6px rgba(0,0,0,0.45);
    }

    .popup-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

    .popup-actions button {
      padding: 12px 22px;
      font-size: 15px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      min-width: 110px;
      transition: transform .14s ease, box-shadow .14s ease;
    }
    .popup-actions button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.25); }

    .enter-btn { background:#2a9d8f; color:#fff; }
    .leave-btn { background:#e63946; color:#fff; }

    /* small responsive */
    @media (max-width:420px){
      .popup-content { padding: 26px 16px; }
      .popup-content h2 { font-size: 22px; }
    }