/* =========================================================
   GLOBAL SITE ENTRY NOTICE
   ========================================================= */

.site-entry-overlay {
  position: fixed;
  inset: 0;

  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background:
    rgba(18, 8, 28, 0.88);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


.site-entry-modal {
  position: relative;

  width:
    min(94vw, 760px);

  max-height:
    92vh;

  overflow-y:
    auto;

  background:
    linear-gradient(
      145deg,
      #fff9d9 0%,
      #ffffff 38%,
      #fff0fa 72%,
      #eafaff 100%
    );

  border:
    5px solid #111111;

  border-radius:
    24px;

  box-shadow:
    0 0 0 8px #ff48b6,
    0 0 0 14px #57dcff,
    0 20px 70px rgba(0, 0, 0, 0.65);

  color:
    #171717;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


.site-entry-header {
  padding:
    24px 26px 20px;

  text-align:
    center;

  background:
    linear-gradient(
      90deg,
      #ffe139,
      #ff78c8,
      #67e3ff
    );

  border-bottom:
    4px solid #111111;

  border-radius:
    18px 18px 0 0;
}


.site-entry-title {
  margin:
    0;

  color:
    #111111;

  font-size:
    clamp(30px, 5vw, 50px);

  font-weight:
    1000;

  line-height:
    1;

  letter-spacing:
    0.02em;

  text-transform:
    uppercase;

  text-shadow:
    2px 2px 0 #ffffff;
}

.site-entry-warning-emoji {
  display:
    inline-block;

  filter:
    drop-shadow(1px 0 0 #000000)
    drop-shadow(-1px 0 0 #000000)
    drop-shadow(0 1px 0 #000000)
    drop-shadow(0 -1px 0 #000000)
    drop-shadow(1px 1px 0 #000000)
    drop-shadow(-1px 1px 0 #000000)
    drop-shadow(1px -1px 0 #000000)
    drop-shadow(-1px -1px 0 #000000);
}


.site-entry-subtitle {
  margin:
    10px 0 0;

  font-size:
    14px;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.site-entry-body {
  padding:
    26px 32px 32px;
}


.site-entry-section {
  margin:
    0 0 18px;

  padding:
    15px 17px;

  border:
    2px solid #222222;

  border-radius:
    12px;

  background:
    rgba(255, 255, 255, 0.82);

  font-size:
    16px;

  line-height:
    1.52;
}


.site-entry-section:nth-child(1) {
  border-left:
    8px solid #ffcc00;
}


.site-entry-section:nth-child(2) {
  border-left:
    8px solid #ff48b6;
}


.site-entry-section:nth-child(3) {
  border-left:
    8px solid #ff5959;
}


.site-entry-section:nth-child(4) {
  border-left:
    8px solid #37bfe9;
}


.site-entry-section strong {
  font-weight:
    900;
}


.site-entry-disclaimer-link {
  color:
    #005f9e;

  font-weight:
    800;

  text-decoration:
    underline;

  text-underline-offset:
    3px;
}


.site-entry-button {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  margin-top:
    24px;

  padding:
    16px 20px;

  border:
    4px solid #111111;

  border-radius:
    14px;

  background:
    linear-gradient(
      90deg,
      #ffdc32,
      #ff5ebc,
      #54dcff
    );

  color:
    #111111;

  cursor:
    pointer;

  box-shadow:
    0 7px 0 #111111;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}


.site-entry-button:hover {
  transform:
    translateY(2px);

  box-shadow:
    0 5px 0 #111111;
}


.site-entry-button:active {
  transform:
    translateY(6px);

  box-shadow:
    0 1px 0 #111111;
}


.site-entry-button-small {
  font-size:
    14px;

  font-weight:
    900;

  letter-spacing:
    0.14em;
}


.site-entry-button-large {
  margin-top:
    3px;

  font-size:
    clamp(20px, 3vw, 29px);

  font-weight:
    1000;

  line-height:
    1.05;

  text-align:
    center;

  text-transform:
    uppercase;
}


@media (max-width: 600px) {

  .site-entry-overlay {
    align-items:
      flex-start;

    padding:
      18px 12px;

    overflow-y:
      auto;
  }


  .site-entry-modal {
    max-height:
      none;

    margin:
      10px 0 24px;
  }


  .site-entry-header {
    padding:
      20px 16px 17px;
  }


  .site-entry-body {
    padding:
      20px 18px 24px;
  }


  .site-entry-section {
    font-size:
      15px;
  }

}