/* ============================================================
   /assets/css/cribini_overlay.css
   CRIBINI Launch Overlay v2.0
   Matrix meets Crypto
   ============================================================ */

.cribiniOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  overflow:hidden;

  background:
    radial-gradient(circle at 50% 40%, rgba(255,215,106,.08), transparent 30%),
    radial-gradient(circle at 20% 70%, rgba(53,215,255,.06), transparent 45%),
    radial-gradient(circle at 80% 25%, rgba(120,255,140,.04), transparent 45%),
    linear-gradient(180deg,#030508,#060A11,#020305);
}


/* ======================================
   VAULT GLOW
====================================== */

.cribiniVaultGlow{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.cribiniVaultGlow::before,
.cribiniVaultGlow::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  animation:cribVaultPulse 8s ease-in-out infinite;
}

.cribiniVaultGlow::before{
  width:520px;
  height:520px;
  left:18%;
  top:22%;
  background:rgba(255,215,106,.08);
}

.cribiniVaultGlow::after{
  width:440px;
  height:440px;
  right:14%;
  bottom:18%;
  background:rgba(53,215,255,.05);
  animation-delay:2s;
}

@keyframes cribVaultPulse{
  0%{transform:scale(.92);}
  50%{transform:scale(1.08);}
  100%{transform:scale(.92);}
}


/* ======================================
   TOKEN RAIN
====================================== */

.cribiniTokenRain{
  position:absolute;
  inset:-100px;
  overflow:hidden;
  pointer-events:none;
  opacity:.95;
}

.cribiniTokenRain::before{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    radial-gradient(circle, rgba(255,215,106,.95) 0 2px, transparent 2px),
    radial-gradient(circle, rgba(255,215,106,.80) 0 2px, transparent 2px),
    radial-gradient(circle, rgba(255,240,160,.90) 0 1px, transparent 1px);

  background-size:
    90px 120px,
    130px 160px,
    70px 90px;

  animation:cribTokenRain 14s linear infinite;
  filter:
    drop-shadow(0 0 8px rgba(255,215,106,.25))
    drop-shadow(0 0 14px rgba(255,215,106,.12));
}

@keyframes cribTokenRain{
  from{
    transform:translateY(-120px);
  }
  to{
    transform:translateY(1200px);
  }
}


/* ======================================
   MATRIX RAIN
====================================== */

.cribiniCodeRain{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
}

.cribiniCodeRain::before{
  content:"0101010101 101001 11001 01100101";
  position:absolute;
  inset:-200px;

  color:#68ff8f;
  font-family:monospace;
  font-size:18px;
  line-height:32px;
  letter-spacing:10px;

  white-space:pre-wrap;
  word-break:break-all;

  animation:cribCodeRain 24s linear infinite;
}

@keyframes cribCodeRain{
  from{
    transform:translateY(-200px);
  }
  to{
    transform:translateY(600px);
  }
}


/* ======================================
   CARD
====================================== */

.cribiniOverlayCard{
  position:relative;
  z-index:10;

  width:min(760px,100%);

  border:1px solid rgba(255,215,106,.22);
  border-radius:26px;

  background:
    linear-gradient(180deg, rgba(255,215,106,.05), transparent 22%),
    linear-gradient(180deg, rgba(53,215,255,.04), transparent 70%),
    rgba(8,12,18,.92);

  backdrop-filter:blur(14px);

  padding:26px;

  box-shadow:
    0 25px 90px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.03);

  overflow:hidden;
}

.cribiniOverlayCard::after{
  content:"";
  position:absolute;
  inset:0;

  opacity:.04;
  pointer-events:none;

  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.12) 0,
      rgba(255,255,255,.12) 1px,
      transparent 1px,
      transparent 5px
    );
}


/* ======================================
   HEADERS
====================================== */

.cribiniOverlayHdr{
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:10px;
  font-weight:900;
  color:rgba(255,244,183,.82);
}

.cribiniOverlayTitle{
  margin:12px 0 0;
  line-height:1;
  font-size:24px;
  font-weight:900;
  color:rgba(162,255,158,.72);

  text-shadow:
    0 0 18px rgba(255,215,106,.18);
}

.cribiniOverlayTitle span{
  display:block;
  margin-top:8px;

  font-size:22px;
  color:rgba(255,244,183,.82);
}


/* ======================================
   JACKPOT
====================================== */

.cribiniOverlayJackpot{
  margin-top:18px;
}

.cribiniOverlayJackpotK{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
}

.cribiniOverlayJackpotV{
  margin-top:8px;
  font-size:28px;
  font-weight:900;
  color:#ffd76a;

  animation:cribJackpotPulse 2.5s ease-in-out infinite;
}

@keyframes cribJackpotPulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.03);}
  100%{transform:scale(1);}
}

.cribiniOverlayJackpotS{
  margin-top:6px;
  font-size:12px;
  color:rgba(255,255,255,.72);
}


/* ======================================
   STATS
====================================== */

.cribiniOverlayStats{
  margin-top:22px;

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.cribiniStat{
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;

  background:rgba(255,255,255,.02);

  padding:14px;
}

.cribiniStatK{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;

  color:rgba(255,255,255,.52);
}

.cribiniStatV{
  margin-top:8px;
  font-size:20px;
  font-weight:900;

  color:#fff;
}


/* ======================================
   WIN TICKER
====================================== */

.cribiniWinPanel{
  margin-top:22px;
}

.cribiniWinPanelK{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:#68ff8f;
}

.cribiniWinTicker{
  margin-top:10px;

  border-left:2px solid rgba(104,255,143,.45);

  padding-left:14px;

  color:rgba(255,255,255,.84);

  line-height:1.9;
  font-size:14px;
}


/* ======================================
   COPY
====================================== */

.cribiniOverlayCopy{
  margin-top:20px;

  line-height:1.7;
  font-size:15px;

  color:rgba(255,255,255,.74);
}

.cribiniOverlayCopy strong{
  color:#ffd76a;
}


/* ======================================
   BUTTONS
====================================== */

.cribiniOverlayActions{
  margin-top:24px;

  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.cribiniPrimaryBtn,
.cribiniSecondaryBtn{
  text-decoration:none;

  padding:14px 22px;

  border-radius:16px;

  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;

  transition:.2s ease;
}

.cribiniPrimaryBtn{
  background:rgba(255,215,106,.12);
  border:1px solid rgba(255,215,106,.32);

  color:#ffd76a;
}

.cribiniPrimaryBtn:hover{
  transform:translateY(-2px);
}

.cribiniSecondaryBtn{
  background:rgba(162,255,158,.08);
  border:1px solid rgba(162,255,158,.28);

  color:rgba(162,255,158,.72);
}

.cribiniSecondaryBtn:hover{
  transform:translateY(-2px);
}


/* ======================================
   FOOTER
====================================== */

.cribiniOverlayFounder{
  margin-top:22px;

  font-size:13px;

  color:#ffd76a;
}

.cribiniOverlayLinks{
  margin-top:16px;

  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.cribiniOverlayLinks button{
  border:none;
  background:none;

  color:rgba(255,215,106,.55);

  cursor:pointer;

  font-size:12px;

  transition:.2s;
}

.cribiniOverlayLinks button:hover{
  color:#ffd76a;
}


/* ======================================
   MOBILE
====================================== */

@media(max-width:760px){

  .cribiniOverlayTitle{
    font-size:34px;
  }

  .cribiniOverlayTitle span{
    font-size:22px;
  }

  .cribiniOverlayStats{
    grid-template-columns:1fr;
  }

}

.cribiniOverlay{
  align-items:flex-start;
  overflow:auto;
  padding:14px;
}

.cribiniOverlayCard{
  margin:18px auto;
  max-height:none;
  padding:20px;
  width:min(720px,100%);
}

.cribiniOverlayTitle{
  font-size:38px;
}

.cribiniOverlayTitle span{
  font-size:24px;
}

.cribiniOverlayJackpotV{
  font-size:28px;
}

.cribiniOverlayStats{
  margin-top:16px;
}

.cribiniWinPanel{
  margin-top:16px;
}

.cribiniOverlayCopy{
  margin-top:14px;
}

.cribiniOverlayActions{
  margin-top:18px;
}

.cribiniOverlayFounder{
  margin-top:14px;
}

.cribiniOverlayLinks{
  margin-top:10px;
}

.cribiniOverlayModal.hidden{
  display:none !important;
}

.cribiniOverlayModal{
  position:fixed;
  inset:0;
  z-index:10050;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:20px;
}

.cribiniOverlayModalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.cribiniOverlayModalCard{
  position:relative;
  z-index:2;
  width:min(720px, calc(100vw - 30px));
  max-height:calc(100vh - 40px);
  overflow:auto;
  border:1px solid rgba(255,215,106,.24);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,215,106,.07), transparent 42%),
    rgba(8,12,18,.97);
  box-shadow:0 30px 90px rgba(0,0,0,.68);
}

.cribiniOverlayModalHead{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,215,106,.14);
  background:rgba(8,12,18,.94);
  backdrop-filter:blur(10px);
}

.cribiniOverlayModalTitle{
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ffd76a;
}

.cribiniOverlayModalClose{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,215,106,.22);
  background:rgba(255,215,106,.08);
  color:#ffd76a;
  cursor:pointer;
  font-size:20px;
  font-weight:900;
}

.cribiniOverlayModalBody{
  padding:16px;
  color:#EAF7FF;
  font-size:14px;
  line-height:1.55;
}

.cribiniOverlayModalBody p{
  margin:0 0 12px;
}

.cribiniModalSection strong{
  color:#ffd76a;
}