:root{
  --bg: #0d0b12;
  --bg-alt: #16121e;
  --card: #1c1626;
  --line: #2c2438;
  --accent: #ff3d7a;
  --accent-2: #7c4dff;
  --live: #2ee6a6;
  --off: #6b6478;
  --text: #f3eef8;
  --text-dim: #a89cba;
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height:1.5;
}

/* ---------- Age gate ---------- */
#age-gate{
  position:fixed; inset:0; z-index:999;
  background: radial-gradient(circle at 50% 30%, #241a30 0%, #0d0b12 70%);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:1.2rem; text-align:center; padding:2rem;
}
#age-gate h1{
  font-family: var(--font-display);
  letter-spacing:2px;
  font-size: clamp(1.8rem, 6vw, 3rem);
  color:var(--accent);
}
#age-gate p{ color:var(--text-dim); max-width:420px; }
.age-btns{ display:flex; gap:1rem; margin-top:1rem; flex-wrap:wrap; justify-content:center;}
.age-btns button{
  padding:.9rem 2rem; border-radius:999px; border:none; cursor:pointer;
  font-weight:700; font-size:.95rem; letter-spacing:.5px;
}
#age-yes{ background: linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; }
#age-no{ background:transparent; border:1px solid var(--line); color:var(--text-dim); }
body.gated{ overflow:hidden; }
body.gated #site{ display:none; }

/* ---------- Header ---------- */
header{
  padding: 3.5rem 1.5rem 2rem;
  text-align:center;
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
header .eyebrow{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:.75rem;
  font-weight:700;
}
header h1{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 4rem);
  letter-spacing:1px;
  margin:.3rem 0 .6rem;
  background: linear-gradient(135deg, var(--text) 40%, var(--accent) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
header p{ color:var(--text-dim); max-width:520px; margin:0 auto; }
.badge-18{
  display:inline-block; margin-top:1rem; padding:.25rem .7rem;
  border:1px solid var(--accent); color:var(--accent);
  border-radius:6px; font-size:.75rem; font-weight:700; letter-spacing:1px;
}

/* ---------- Social links ---------- */
.social-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 1rem;
  margin-bottom: 2.25rem;
  flex-wrap: wrap;
}
.social-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem 1.1rem;
  border-radius: 999px;
  border:1px solid var(--line);
  background: var(--card);
  color: var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:.85rem;
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.social-btn svg{ flex-shrink:0; }
.social-btn:hover{
  transform: translateY(-2px);
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(255,61,122,.12), rgba(124,77,255,.12));
}

/* ---------- Grid ---------- */
main{ max-width:1200px; margin:0 auto; padding: 2.5rem 1.5rem 4rem; }
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.75rem;
}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 16px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 30px -12px rgba(255,61,122,.35);
}

/* --- media area: 2 photos side by side, video on toggle --- */
.media{ position:relative; aspect-ratio: 4/5; overflow:hidden; background:var(--bg-alt); }
.media .photos{
  display:grid; grid-template-columns: 1fr 1fr; width:100%; height:100%;
}
.media .photos img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .4s ease;
}
.card:hover .media .photos img{ transform: scale(1.05); }

.media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:none; background:#000;
}
.media.show-video .photos{ display:none; }
.media.show-video video{ display:block; }

.media-toggle{
  position:absolute; bottom:.6rem; right:.6rem;
  padding:.35rem .7rem; border-radius:999px; border:none;
  background: rgba(13,11,18,.65); color:var(--text);
  font-size:.72rem; font-weight:700; cursor:pointer;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.media-toggle:hover{ background: rgba(13,11,18,.85); }

.status{
  position:absolute; top:.75rem; left:.75rem;
  display:flex; align-items:center; gap:.4rem;
  padding:.3rem .65rem;
  border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.status.live{ background: rgba(46,230,166,.15); color: var(--live); border:1px solid rgba(46,230,166,.4);}
.status.offline{ background: rgba(107,100,120,.25); color: var(--off); border:1px solid rgba(107,100,120,.4);}
.status.checking{ background: rgba(168,156,186,.15); color: var(--text-dim); border:1px solid rgba(168,156,186,.3);}
.status.checking .dot{ opacity:.5; }
.status .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.status.live .dot{ animation: pulse 1.4s infinite ease-in-out; }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(46,230,166,.6); }
  50%{ box-shadow:0 0 0 6px rgba(46,230,166,0); }
}

.info{ padding: 1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; flex:1;}
.info h3{ font-size:1.15rem; font-weight:700; }
.info p{ color:var(--text-dim); font-size:.88rem; flex:1; }

.visit-btn{
  margin-top:.4rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.7rem 1rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700; font-size:.9rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  transition: filter .2s ease, transform .15s ease;
}
.visit-btn:hover{ filter:brightness(1.1); transform: translateY(-1px); }

footer{
  text-align:center; padding: 2rem 1.5rem 3rem;
  color: var(--text-dim); font-size:.8rem; border-top:1px solid var(--line);
}
footer a{ color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  .card, .media .photos img, .visit-btn { transition:none; }
  .status .dot{ animation:none; }
}