/* =========================================================
   Veil & Vice V3 Additions (18+ Gate + Micro Luxury Tweaks)
   ========================================================= */

#age-gate {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: vvFadeIn 0.3s ease;
}
#age-gate .gate-box {
  background: #0e0e16;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 32px;
  max-width: 420px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
#age-gate button {
  margin-top: 20px;
  padding: 10px 26px;
  background: #c9a46a;
  border: none;
  cursor: pointer;
  letter-spacing: 1px;
}
#age-gate button:hover { filter: brightness(1.05); transform: translateY(-1px); }

a, .card { transition: all 0.25s ease; }
.card:hover { transform: translateY(-3px); }
body { animation: vvFadeIn 0.4s ease; }
@keyframes vvFadeIn { from {opacity:0} to {opacity:1} }


/* --- V3.1 Story + Scarcity --- */
.vv-what-is { padding: 42px 0; }
.vv-what-is-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
}
.vv-what-is-inner h2 { margin: 0 0 12px 0; letter-spacing: 0.5px; }
.vv-what-is-inner p { margin: 10px 0; opacity: 0.92; }
.vv-scarcity-sub { display: inline-block; margin-top: 6px; opacity: 0.8; font-size: 0.95em; }



/* --- V4 Unveiled Story --- */
.vv-story-btn{
  margin-left: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: inherit;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.vv-story-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }

.vv-modal{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
}
.vv-modal.vv-open{ display: block; }
.vv-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(5,5,10,0.86);
}
.vv-modal-panel{
  position: relative;
  max-width: 900px;
  margin: 6vh auto;
  background: #0e0e16;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 20px 60px rgba(0,0,0,0.65);
  padding: 18px 20px 24px;
}
.vv-modal-close{
  position: absolute;
  right: 12px;
  top: 10px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 26px;
  cursor: pointer;
  opacity: 0.8;
}
.vv-modal-close:hover{ opacity: 1; }
.vv-modal-heading{
  font-size: 18px;
  letter-spacing: 1px;
  margin: 6px 0 14px;
  opacity: 0.9;
}
.vv-modal-body{
  max-height: 70vh;
  overflow: auto;
  padding-right: 6px;
  line-height: 1.6;
}
.vv-story-title{
  font-size: 20px;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}
.vv-story-body p{
  margin: 12px 0;
  opacity: 0.92;
}



/* --- V4.3 Unveiled Story Readability (Word-style spacing) --- */
.vv-modal-body{
  line-height: 1.7;
}
.vv-story-body p{
  margin: 0 0 18px 0;
}
.vv-story-body p:last-child{
  margin-bottom: 0;
}


/* --- V4.5 Unveiled Story Button Pop --- */
.vv-story-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-left: 0;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(201,164,106,0.55);
  background: linear-gradient(180deg, rgba(201,164,106,0.18), rgba(201,164,106,0.06));
  box-shadow: 0 10px 26px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset;
  letter-spacing: 0.9px;
  font-weight: 600;
  text-transform: uppercase;
}
.vv-story-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 14px 34px rgba(0,0,0,0.6), 0 0 22px rgba(201,164,106,0.22);
}
.vv-story-btn:active{
  transform: translateY(0px);
  filter: brightness(1.02);
}


/* --- V4.6 After Hours Image Zoom --- */
.after-hours .card img,
.after-hours .girl-card img{
  transform: scale(1.14);
  transition: transform 0.4s ease;
}
.after-hours .card:hover img,
.after-hours .girl-card:hover img{
  transform: scale(1.16);
}


/* --- V4.6 Modal Close Hitbox --- */
.vv-modal-close{
  z-index: 5;
  padding: 10px 12px;
  line-height: 1;
  border-radius: 10px;
  pointer-events: auto;
}
.vv-modal-close:hover{
  background: rgba(255,255,255,0.06);
}


/* =========================
   V6.1 Modal Luxury Pass
   ========================= */
.vv-modal-panel{
  max-width: 980px;
  width: min(980px, 92vw);
}
@media (max-width: 720px){
  .vv-modal-panel{ width: min(980px, 94vw); margin: 4.5vh auto; padding: 18px 18px 22px; }
  .vv-modal-body{ max-height: 72vh; }
}
.vv-modal-body{
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.1px;
  padding-right: 10px;
}
.vv-story-body p{
  margin: 0 0 20px 0;
}


/* =========================
   V6.1 Age Gate Refinement
   ========================= */
#age-gate .gate-box{
  border-radius: 14px;
  background: radial-gradient(900px 450px at 20% 0%, rgba(201,164,106,0.12), rgba(14,14,22,0) 60%),
              #0e0e16;
}
#age-gate .gate-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}
#age-gate .gate-actions button{
  margin-top: 0;
  padding: 10px 18px;
  border-radius: 999px;
  letter-spacing: 1px;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
#age-gate .gate-actions .gate-enter{
  background: #c9a46a;
}
#age-gate .gate-actions .gate-exit{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
}
#age-gate .gate-actions .gate-exit:hover{
  background: rgba(255,255,255,0.10);
}