:root{
  --bg:#0b0c16; --bg2:#070812; --card:#0e0f22; --border:#24255a;
  --text:#f5f5ff; --muted:#a2a2c7;
  --pink:#ec4899; --pink2:#ff3d9a; --purple:#a855f7;
  --you:#9ae6ff; --stranger:#ff8ad4; --server:#ffd27a;
}

*{box-sizing:border-box;font-family:Inter,system-ui,sans-serif}

body{
  margin:0;
  background:radial-gradient(circle at top,#151732,var(--bg2) 55%,var(--bg));
  color:var(--text);
  min-height:100vh;
}

header{padding:14px 20px;display:flex;justify-content:space-between}
.logo{font-weight:800;background:linear-gradient(135deg,var(--purple),var(--pink));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.counter{font-size:13px;color:var(--muted)}
.main{padding:12px}

.account-buttons{display:flex;gap:12px;justify-content:center;margin-bottom:14px}
.account-buttons button{padding:10px 22px;border-radius:999px;font-weight:700;cursor:pointer}
.login-btn{background:#fff;color:var(--pink2);border:2px solid var(--pink2)}
.login-btn:hover{background:var(--pink2);color:#fff}
.signup-btn{background:var(--pink);color:#fff;border:none}

.chat{display:grid;gap:14px}
.video-area{display:grid;gap:12px}

.video-box{position:relative;background:#000;border-radius:18px;overflow:hidden;
  border:1px solid var(--border);aspect-ratio:4/3}
video{width:100%;height:100%;object-fit:cover}

/* MORE EXPOSED CAMERA CTA */
.fake-cam{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(236,72,153,.22), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(168,85,247,.22), transparent 55%),
    linear-gradient(135deg,#1f1f3d,#090a1a);
}

.fake-cam::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 0 rgba(236,72,153,.35),
    0 0 0 0 rgba(168,85,247,.25);
  animation:camPulse 1.6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes camPulse{
  0%   { box-shadow:0 0 0 0 rgba(236,72,153,.28), 0 0 0 0 rgba(168,85,247,.18); opacity:.95; }
  60%  { box-shadow:0 0 0 18px rgba(236,72,153,0), 0 0 0 34px rgba(168,85,247,0); opacity:1; }
  100% { box-shadow:0 0 0 0 rgba(236,72,153,0), 0 0 0 0 rgba(168,85,247,0); opacity:.9; }
}

.fake-cam-inner{
  text-align:center;
  padding:18px 18px 16px;
  border-radius:16px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
  transform: translateZ(0);
}

.fake-cam-icon{
  font-size:34px;
  margin-bottom:8px;
  filter: drop-shadow(0 10px 26px rgba(236,72,153,.35));
}

.fake-cam-title{
  font-weight:800;
  letter-spacing:.2px;
  font-size:16px;
  background:linear-gradient(135deg,#ffffff, rgba(255,255,255,.75));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:6px;
}

.fake-cam-sub{
  font-size:12px;
  color:rgba(255,255,255,.72);
}

.fake-cam:hover .fake-cam-inner{
  border-color:rgba(255,255,255,.18);
  background:rgba(0,0,0,.42);
}

.fake-cam:active .fake-cam-inner{
  transform:scale(.98);
}

.label{position:absolute;bottom:10px;left:10px;padding:6px 12px;background:rgba(0,0,0,.6);
  border-radius:999px;font-size:13px}
.gender{position:absolute;top:10px;right:10px;font-size:18px}
.unmute-btn{position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:999px;
  background:rgba(0,0,0,.55);border:none;color:#fff;cursor:pointer}

.next-row{text-align:center}
.next-under-btn{background:var(--pink);color:#fff;border:none;padding:10px 22px;
  border-radius:999px;font-weight:700;cursor:pointer}

.reactions{display:grid;grid-template-columns:repeat(5,auto);grid-template-rows:repeat(2,auto);
  gap:10px;justify-content:center}
.reaction{position:relative;overflow:hidden;border-radius:999px;font-size:18px;color:#fff;
  background:linear-gradient(135deg,rgba(168,85,247,.2),rgba(236,72,153,.2));
  border:1px solid rgba(255,255,255,.06);padding:10px 14px;cursor:pointer}
.reaction:active{transform:scale(.94)}
.reaction.clicked{animation:reactPop .24s ease-out}
@keyframes reactPop{0%{transform:scale(.94)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.reaction .ripple{position:absolute;width:10px;height:10px;border-radius:999px;
  background:rgba(255,255,255,.35);transform:scale(0);animation:ripple .45s forwards}
@keyframes ripple{to{transform:scale(16);opacity:0}}

.chatpanel{background:var(--card);border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.04)}
.chatbox{padding:12px;max-height:240px;overflow:auto;font-size:13px}
.msg{margin-bottom:8px}
.msg-line{display:flex;gap:8px}
.prefix{min-width:72px;font-weight:700;font-size:12px}
.prefix.you{color:var(--you)} .prefix.stranger{color:var(--stranger)} .prefix.server{color:var(--server)}
.bubble{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06)}
.bubble.stranger{filter:blur(2.4px);opacity:.92}
.bubble.stranger.typingBubble{filter:none;opacity:1}

.bubble.server.alert{
  background:rgba(255,210,122,.12);
  border:1px solid rgba(255,210,122,.55);
  color:#ffe8a3;
  font-weight:700;
}

.chat-input{display:flex;gap:10px;padding:10px;border-top:1px solid rgba(255,255,255,.06)}
.chat-input input{flex:1;padding:10px;border-radius:12px;background:#0e0f22;
  border:1px solid rgba(255,255,255,.08);color:var(--text)}
.chat-input button{background:var(--pink);color:#fff;border:none;padding:10px 22px;border-radius:999px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center}
.modal-box{background:#12132b;padding:26px;border-radius:20px;text-align:center;
  border:1px solid var(--border);width:min(420px,92vw)}
.modal-logo{
  display:block;
  width:90%;
  max-width:360px;
  margin:0 auto 18px auto;
  filter:drop-shadow(0 10px 36px rgba(236,72,153,.45));
}

.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}
.modal-primary{background:linear-gradient(135deg,var(--purple),var(--pink));border:none;color:#fff;
  padding:12px 16px;border-radius:12px;cursor:pointer}
.modal-secondary{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  color:#fff;padding:12px 16px;border-radius:12px;cursor:pointer}

.black-flash{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;
  transition:opacity 150ms}
.black-flash.active{opacity:1}

.inline-loading{position:absolute;inset:0;background:rgba(0,0,0,.85);display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:14px}
.spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.2);
  border-top-color:var(--pink);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media(min-width:900px){
  .video-area{display:flex;gap:20px;width:80%;margin:auto}
  .video-box{flex:0 0 calc(50% - 10px)}
  .account-buttons{justify-content:flex-end;width:80%;margin:0 auto 14px}
}

/* STRANGER CAMERA OVERLAY */
.stranger-age-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.stranger-age-overlay.show{display:flex}

.overlay-card{
  width:min(82%, 360px);
  background:rgba(10,10,20,.78);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:16px 16px 14px;
  text-align:center;
  max-height:70%;
  overflow:auto;
  pointer-events:auto;
}

@media(max-width:520px){
  .overlay-card{max-height:78%;}
}

.overlay-top-logo{
  width:64%;
  max-width:180px;
  display:block;
  margin:0 auto 8px auto;
  filter:drop-shadow(0 8px 22px rgba(0,200,255,.35));
}

.overlay-title{
  font-weight:900;
  font-size:14px;
  color:#fff;
  margin-bottom:6px;
}

.overlay-text{
  font-size:12px;
  line-height:1.35;
  color:rgba(255,255,255,.82);
}

.overlay-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:10px;
}

.overlay-actions a{
  text-decoration:none;
  font-weight:800;
  font-size:12px;
  padding:10px 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.overlay-primary{
  background:linear-gradient(135deg,var(--purple),var(--pink));
  color:#fff;
  box-shadow:0 10px 26px rgba(168,85,247,.18), 0 10px 26px rgba(236,72,153,.16);
}
.overlay-primary:active{transform:scale(.98)}

.overlay-secondary{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.overlay-secondary:active{transform:scale(.98)}

/* HEADER LOGO */
.header-logo{
  height:42px;
  width:auto;
  display:block;
  position:relative;
  z-index:2;
}


/* HEADER LOGO GRADIENT GLOW */
.logo{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.logo-glow::before{
  content:"";
  position:absolute;
  inset:-7px -11px;
  border-radius:18px;
  background:linear-gradient(90deg,
    rgba(0,200,255,.85),
    rgba(0,255,255,.85) 40%,
    rgba(255,0,170,.9)
  );
  filter:blur(11px);
  opacity:.45;
  z-index:1;
  pointer-events:none;
}