*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --pk:#FF57BC;--vi:#6B3EFF;--yw:#FFE566;--gr:#39ff9c;
  --cd:#13131f;--mu:#1e1e2e;--lt:#252538;--wh:#f5f0ff;--gy:#6a6a8a;
  --pkd:#C53A8D;--vid:#4903AC;
}
html,body{width:100%;min-height:100vh;background:var(--cd);overflow-x:hidden;}
body{font-family:'Space Grotesk',sans-serif;position:relative;}
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.03) 3px,rgba(0,0,0,0.03) 4px);pointer-events:none;z-index:0;}

/* gradient accent top */
.top-bar{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--vi),var(--pk),var(--vi));z-index:100;}

/* ambient glows */
.glow-a{position:fixed;top:-100px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(255,87,188,0.08) 0%,transparent 70%);pointer-events:none;z-index:0;}
.glow-b{position:fixed;bottom:-100px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(107,62,255,0.08) 0%,transparent 70%);pointer-events:none;z-index:0;}

/* SCREEN */
.screen{display:none;min-height:100vh;position:relative;z-index:1;}
.screen.active{display:flex;}

/* ── LANDING ── */
#s-landing{flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center;}

.salt-emoji{font-size:56px;animation:bounceIn 0.8s cubic-bezier(0.36,0.07,0.19,0.97) both;margin-bottom:24px;display:block;}
@keyframes bounceIn{0%{transform:translateY(-60px) scale(0.8);opacity:0;}60%{transform:translateY(8px) scale(1.05);opacity:1;}80%{transform:translateY(-4px);}100%{transform:translateY(0);}}

.land-eyebrow{font-family:'Space Mono',monospace;font-size:10px;color:var(--pk);letter-spacing:3px;text-transform:uppercase;margin-bottom:16px;animation:fadeUp 0.6s ease 0.3s both;}
.land-h1{font-size:clamp(32px,6vw,52px);font-weight:900;color:var(--wh);letter-spacing:-1.5px;line-height:1.1;margin-bottom:16px;animation:fadeUp 0.6s ease 0.45s both;}
.land-h1 span{color:var(--pk);}
.land-sub{font-family:'Space Mono',monospace;font-size:13px;color:var(--gy);line-height:1.6;margin-bottom:40px;animation:fadeUp 0.6s ease 0.6s both;}
.land-sub strong{color:rgba(245,240,255,0.5);}

.cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:18px 40px;background:var(--pk);
  border-radius:100px;border:none;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:800;
  color:#1a0012;letter-spacing:-0.3px;
  animation:fadeUp 0.6s ease 0.75s both;
  transition:transform 0.15s,box-shadow 0.15s;
  box-shadow:0 0 40px rgba(255,87,188,0.3);
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 0 60px rgba(255,87,188,0.5);}
.cta-btn:active{transform:translateY(0);}

.land-trust{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:28px;animation:fadeUp 0.6s ease 0.9s both;}
.trust-item{font-family:'Space Mono',monospace;font-size:10px;color:var(--gy);letter-spacing:1px;}
.trust-dot{width:4px;height:4px;border-radius:50%;background:rgba(106,106,138,0.4);}

/* decorative floating cards */
.deco-cards{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.deco-card{position:absolute;background:var(--mu);border:1px solid rgba(255,87,188,0.1);border-radius:16px;padding:16px 20px;font-family:'Space Mono',monospace;font-size:11px;color:rgba(245,240,255,0.15);white-space:nowrap;animation:float linear infinite;}
@keyframes float{0%{transform:translateY(0) rotate(var(--rot));opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{transform:translateY(-110vh) rotate(var(--rot));opacity:0;}}

@keyframes fadeUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* ── FORM ── */
#s-form{flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;}
.form-wrap{width:100%;max-width:420px;}
.form-eyebrow{font-family:'Space Mono',monospace;font-size:9px;color:var(--pk);letter-spacing:3px;margin-bottom:12px;}
.form-h2{font-size:28px;font-weight:900;color:var(--wh);letter-spacing:-0.8px;margin-bottom:6px;}
.form-sub{font-size:13px;color:var(--gy);margin-bottom:32px;line-height:1.5;}

.field{margin-bottom:18px;}
.field label{display:block;font-family:'Space Mono',monospace;font-size:9px;color:var(--pk);letter-spacing:2px;margin-bottom:7px;}
.field input{
  width:100%;background:#0d0d1a;
  border:1.5px solid rgba(255,255,255,0.08);
  border-radius:12px;padding:13px 16px;
  font-family:'Space Grotesk',sans-serif;font-size:15px;
  color:var(--wh);outline:none;transition:border-color 0.15s;
}
.field input:focus{border-color:var(--pk);}
.field input::placeholder{color:var(--gy);}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.checkbox-wrap{display:flex;align-items:flex-start;gap:12px;padding:14px;background:#0d0d1a;border:1.5px solid rgba(255,255,255,0.06);border-radius:12px;cursor:pointer;margin-bottom:24px;}
.checkbox-wrap input[type=checkbox]{display:none;}
.cb-box{width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(255,87,188,0.4);background:transparent;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:all 0.15s;cursor:pointer;}
.cb-box.checked{background:var(--pk);border-color:var(--pk);}
.cb-check{color:#1a0012;font-size:12px;font-weight:900;display:none;}
.cb-box.checked .cb-check{display:block;}
.cb-txt{font-size:13px;color:rgba(245,240,255,0.75);line-height:1.5;}
.cb-legal{font-family:'Space Mono',monospace;font-size:10px;color:var(--gy);text-align:center;margin-bottom:20px;}

.submit-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--pkd),var(--vid));border-radius:14px;border:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:800;color:var(--wh);transition:opacity 0.15s,transform 0.15s;}
.submit-btn:hover{transform:translateY(-1px);}
.submit-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;}

/* ── QUIZ ── */
#s-quiz{flex-direction:column;padding:0;}
.quiz-top{padding:20px 24px 0;flex-shrink:0;}
.quiz-counter{font-family:'Space Mono',monospace;font-size:10px;color:var(--pk);letter-spacing:2px;margin-bottom:8px;}
.progress-track{height:4px;background:rgba(255,255,255,0.07);border-radius:100px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--vi),var(--pk));border-radius:100px;transition:width 0.4s ease;}

.quiz-card{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 24px 24px;animation:slideUp 0.35s ease both;}
@keyframes slideUp{from{transform:translateY(30px);opacity:0;}to{transform:translateY(0);opacity:1;}}

.q-text{font-size:clamp(20px,4vw,26px);font-weight:800;color:var(--wh);line-height:1.3;letter-spacing:-0.5px;margin-bottom:32px;}

.opts{display:flex;flex-direction:column;gap:10px;}
.opt{
  padding:16px 18px;background:#0d0d1a;
  border:1.5px solid rgba(255,255,255,0.08);
  border-radius:16px;cursor:pointer;
  font-size:14px;color:rgba(245,240,255,0.8);
  line-height:1.4;transition:all 0.15s;
  display:flex;align-items:center;gap:14px;
}
.opt:hover{border-color:rgba(255,87,188,0.3);background:rgba(255,87,188,0.04);}
.opt.selected{border-color:var(--pk);background:rgba(255,87,188,0.1);color:var(--wh);}
.opt-letter{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--gy);flex-shrink:0;transition:all 0.15s;}
.opt.selected .opt-letter{background:var(--pk);color:#1a0012;}

/* ── LOADING ── */
#s-loading{flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;}
.load-salt{font-size:64px;animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
.load-text{font-family:'Space Mono',monospace;font-size:13px;color:var(--gy);margin-top:24px;min-height:24px;letter-spacing:1px;}
.load-bar-wrap{position:fixed;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,0.05);}
.load-bar{height:100%;background:linear-gradient(90deg,var(--vi),var(--pk));width:0%;transition:width 0.1s linear;}

/* ── RESULT ── */
#s-result{flex-direction:column;align-items:center;padding:32px 24px 60px;overflow-y:auto;}
.result-card{
  width:100%;max-width:400px;
  background:#0d0d1a;border-radius:24px;
  padding:28px 24px 24px;margin-bottom:24px;
  border:1px solid rgba(255,87,188,0.2);
  position:relative;overflow:hidden;
}
.rc-line{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--vi),var(--pk));}
.rc-glow{position:absolute;top:-40px;right:-30px;width:160px;height:160px;background:radial-gradient(circle,rgba(255,87,188,0.15) 0%,transparent 70%);pointer-events:none;}
.rc-logo{font-family:'Space Mono',monospace;font-size:10px;color:var(--gy);letter-spacing:2px;margin-bottom:20px;}
.rc-type{font-size:clamp(28px,6vw,36px);font-weight:900;color:var(--wh);letter-spacing:-1px;line-height:1.1;margin-bottom:12px;}
.rc-divider{height:2px;background:linear-gradient(90deg,var(--pk),transparent);margin-bottom:16px;width:60px;}
.rc-analysis{font-size:14px;color:rgba(245,240,255,0.8);line-height:1.65;margin-bottom:20px;}
.rc-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(255,87,188,0.12);border:1px solid rgba(255,87,188,0.3);border-radius:100px;font-family:'Space Mono',monospace;font-size:10px;color:var(--pk);letter-spacing:1.5px;margin-bottom:16px;}
.rc-compat{margin-bottom:0;}
.rc-compat-lbl{font-family:'Space Mono',monospace;font-size:9px;color:var(--gy);letter-spacing:2px;margin-bottom:6px;}
.rc-compat-bar{height:4px;background:rgba(255,255,255,0.07);border-radius:100px;overflow:hidden;margin-bottom:4px;}
.rc-compat-fill{height:100%;background:linear-gradient(90deg,var(--vi),var(--pk));border-radius:100px;}
.rc-compat-score{font-family:'Space Mono',monospace;font-size:11px;color:var(--pk);}
.rc-footer{font-family:'Space Mono',monospace;font-size:9px;color:var(--gy);margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.05);letter-spacing:1px;}
.rc-footer span{color:var(--pk);}

/* action buttons */
.result-actions{width:100%;max-width:400px;display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
.act-btn{padding:14px;border-radius:14px;border:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:8px;}
.act-btn.primary{background:linear-gradient(135deg,var(--pkd),var(--vid));color:var(--wh);}
.act-btn.secondary{background:rgba(255,87,188,0.1);border:1.5px solid rgba(255,87,188,0.3);color:var(--pk);}
.act-btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,0.08);color:var(--gy);}
.act-btn:hover{transform:translateY(-1px);}

.share-row{width:100%;max-width:400px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:28px;}
.share-btn{padding:12px 8px;background:#0d0d1a;border:1.5px solid rgba(255,255,255,0.07);border-radius:12px;cursor:pointer;font-family:'Space Mono',monospace;font-size:9px;color:var(--gy);letter-spacing:1px;text-align:center;transition:all 0.15s;display:flex;flex-direction:column;align-items:center;gap:5px;}
.share-btn .share-ico{font-size:18px;}
.share-btn:hover{border-color:rgba(255,87,188,0.3);color:var(--pk);}

.match-section{width:100%;max-width:400px;}
.match-divider{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.match-divider::before,.match-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.07);}
.match-divider span{font-family:'Space Mono',monospace;font-size:10px;color:var(--gy);letter-spacing:1px;white-space:nowrap;}

/* ── MATCHES HUB ── */
#s-hub{flex-direction:column;padding:24px 24px 60px;overflow-y:auto;}
.hub-header{margin-bottom:28px;}
.hub-title{font-size:24px;font-weight:900;color:var(--wh);letter-spacing:-0.5px;margin-bottom:4px;}
.hub-sub{font-family:'Space Mono',monospace;font-size:10px;color:var(--gy);letter-spacing:1px;}

.my-card-mini{background:#0d0d1a;border:1px solid rgba(255,87,188,0.2);border-radius:18px;padding:18px;margin-bottom:20px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;}
.my-card-mini::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--vi),var(--pk));}
.mcm-icon{font-size:28px;}
.mcm-body{flex:1;}
.mcm-type{font-size:15px;font-weight:800;color:var(--wh);letter-spacing:-0.3px;}
.mcm-badge{font-family:'Space Mono',monospace;font-size:9px;color:var(--pk);letter-spacing:1.5px;margin-top:3px;}

.matches-list{display:flex;flex-direction:column;gap:10px;}
.match-row{background:var(--mu);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:16px;cursor:pointer;transition:border-color 0.15s;}
.match-row:hover{border-color:rgba(255,87,188,0.2);}
.match-row.expanded{border-color:rgba(255,87,188,0.25);}
.mr-top{display:flex;align-items:center;gap:12px;}
.mr-av{width:40px;height:40px;border-radius:50%;background:rgba(107,62,255,0.15);border:1.5px solid rgba(107,62,255,0.3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.mr-body{flex:1;}
.mr-name{font-weight:700;font-size:14px;color:var(--wh);margin-bottom:2px;}
.mr-type{font-family:'Space Mono',monospace;font-size:9px;color:var(--gy);letter-spacing:1px;}
.mr-right{text-align:right;}
.mr-score{font-size:22px;font-weight:900;color:var(--pk);letter-spacing:-1px;}
.mr-score-lbl{font-family:'Space Mono',monospace;font-size:8px;color:var(--gy);letter-spacing:1px;}
.mr-oneliner{font-size:12px;color:var(--gy);margin-top:10px;font-style:italic;padding-top:10px;border-top:1px solid rgba(255,255,255,0.05);display:none;}
.match-row.expanded .mr-oneliner{display:block;}
.mr-extended{font-size:13px;color:rgba(245,240,255,0.7);margin-top:10px;line-height:1.6;display:none;}
.match-row.expanded .mr-extended{display:block;}
.mr-actions{display:flex;gap:8px;margin-top:12px;display:none;}
.match-row.expanded .mr-actions{display:flex;}
.mr-act{flex:1;padding:10px;border-radius:10px;border:none;cursor:pointer;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1px;transition:all 0.15s;}
.mr-act.dl{background:rgba(255,87,188,0.1);color:var(--pk);border:1px solid rgba(255,87,188,0.2);}
.mr-act.cta{background:linear-gradient(135deg,var(--pkd),var(--vid));color:var(--wh);}

/* ── FRIEND LANDING ── */
#s-friend{flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center;}
.friend-from{font-family:'Space Mono',monospace;font-size:10px;color:var(--pk);letter-spacing:3px;margin-bottom:16px;}
.friend-card{background:#0d0d1a;border:1px solid rgba(107,62,255,0.3);border-radius:20px;padding:20px;margin-bottom:28px;width:100%;max-width:340px;align-items:center;gap:14px;text-align:center;position:relative;overflow:hidden;}
.friend-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--vi),var(--pk));}
.fc-av{margin: 0 auto 10px auto;width:48px;height:48px;border-radius:50%;background:rgba(107,62,255,0.15);border:1.5px solid rgba(107,62,255,0.4);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.fc-body{}
.fc-name{font-weight:800;font-size:20px;color:var(--wh);}
.fc-type{font-family:'Space Mono',monospace;font-size:24px;color:rgba(157,127,255,0.8);letter-spacing:1.5px;margin-top:3px;}
.fc-blurred{background:rgba(107,62,255,0.08);border-radius:8px;padding:6px 12px;font-family:'Space Mono',monospace;font-size:10px;color:rgba(157,127,255,0.5);letter-spacing:2px;margin-top:6px;filter:blur(4px);}
.friend-h2{font-size:clamp(24px,5vw,32px);font-weight:900;color:var(--wh);letter-spacing:-0.8px;margin-bottom:12px;line-height:1.2;}
.friend-sub{font-family:'Space Mono',monospace;font-size:11px;color:var(--gy);margin-bottom:32px;line-height:1.6;letter-spacing:0.5px;}

/* util */
.back-btn{position:fixed;top:10px;left:90px;z-index:50;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:100px;padding:8px 16px;font-family:'Space Mono',monospace;font-size:10px;color:var(--gy);cursor:pointer;letter-spacing:1px;transition:all 0.15s;}
.back-btn:hover{color:var(--wh);border-color:rgba(255,255,255,0.15);}

/* match notification */
.match-notif{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--mu);border:1px solid rgba(57,255,156,0.3);border-radius:100px;padding:12px 24px;font-family:'Space Mono',monospace;font-size:11px;color:var(--gr);letter-spacing:1px;z-index:200;animation:slideUp 0.4s ease,fadeOut 0.4s ease 2.5s forwards;white-space:nowrap;}
@keyframes fadeOut{to{opacity:0;transform:translateX(-50%) translateY(20px);}}

.fc-nav-logo {
  display: block;
  margin: 0 auto 20px auto;
}

.rc-logo {
  font-family: 'DotGothic16', monospace;
  font-size: 22px;
  letter-spacing: 3px;
  color: #fc37ae;
  text-decoration: none;
  text-shadow: 0 0 20px rgba(255,87,188,0.5);
  display: flex;
  justify-content: fc37ae;
  align-items: center;
}

.rc-logo img {
  width: 48px;
  margin-right: 15px;
}

.rc-logo span {
  display: block;
  font-size: 10px;
}

/* Friend-comparison block — only visible when the user came in via #friend_card_id */
.friend-compare {
  margin: 24px 0;
  padding: 20px 18px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  color: white;
}
.fcmp-header {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  opacity: 0.7;
  margin-bottom: 14px;
}
.fcmp-header span { font-weight: 700; opacity: 1; }
.fcmp-bar {
  height: 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin: 8px 0 10px;
}
.fcmp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b9d, #c069ff);
  border-radius: 6px;
  transition: width 0.9s ease-out;
}
.fcmp-score {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  margin: 6px 0 4px;
}
.fcmp-verdict {
  font-size: 13px;
  opacity: 0.78;
  margin-bottom: 18px;
  font-style: italic;
}
.fcmp-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.fcmp-side {
  flex: 1;
  max-width: 130px;
}
.fcmp-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 6px;
}
.fcmp-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  opacity: 0.6;
  margin-bottom: 4px;
}
.fcmp-sub {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.fcmp-x {
  font-size: 18px;
  opacity: 0.4;
  font-weight: 300;
}

/* FOOTER */
footer { background: var(--card); padding: 40px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,87,188,0.1); }
.footer-logo { font-family: 'DotGothic16', monospace; font-size: 22px; letter-spacing: 3px; color: var(--pink); text-shadow: 0 0 20px rgba(255,87,188,0.4); }
.footer-copy { font-size: 12px; color: var(--gray-mid); font-family: 'Space Mono', monospace; text-align: right;}
.footer-copy a,
.footer-copy a:visited,
.footer-copy a:active,
.footer-copy a:link {
  color: white;
}

.footer-copy a:hover, .cookie-settings-link:hover {
  color: #ddd;
}
.cookie-settings-link {
  color: white !important;
}