/* Kink Test · styled to match kinkforlife.com (dark, moody, Manrope, Kink for Life purple/pink accents) */
:root {
  --bg: #0b0a0d;
  --surface: #15131a;
  --surface-2: #1d1a24;
  --line: #2c2834;
  --text: #f3f0f6;
  --muted: #a8a2b3;
  --accent: #8d78ea;        /* lifted from KFL accent-3 #503AA8 for contrast on dark */
  --accent-deep: #503aa8;   /* KFL accent-3 */
  --pink: #f6cff4;          /* KFL accent-2 */
  --yellow: #ffee58;        /* KFL accent-1 */
  --good: #6fd3a6;
  --warn: #ffb86b;
  --bad: #ff7a8a;
  --radius: 16px;
  --font: Manrope, "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.55; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; outline: none; }
a { color: var(--pink); }
a:hover { color: #fff; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); font-weight: 800; }
h2 { font-size: 1.35rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; z-index: 10; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(11,10,13,.92); backdrop-filter: blur(8px); z-index: 5; }
.brand { text-decoration: none; color: var(--text); display: flex; flex-direction: column; line-height: 1.1; }
.brand-mark { font-weight: 800; letter-spacing: .02em; }
.brand-sub { font-size: .78rem; color: var(--pink); text-transform: uppercase; letter-spacing: .14em; }
.nav { display: flex; gap: 14px; font-size: .92rem; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover, .nav a.active { color: var(--text); }

.wrap { max-width: 720px; margin: 0 auto; padding: 22px 18px 40px; }
.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; text-align: center; padding: 18px; }
.foot p { margin: 4px 0; }

.hero { position: relative; padding: 44px 0 18px; }
.hero::before { content: ""; position: absolute; inset: -40px -18px auto; height: 320px; z-index: -1;
  background: radial-gradient(60% 70% at 50% 20%, rgba(141,120,234,.28), transparent 70%), radial-gradient(40% 50% at 50% 30%, rgba(246,207,244,.10), transparent 70%); }
.kicker { color: var(--pink); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 700; margin-bottom: 10px; }
.lead { font-size: 1.1rem; color: #d9d4e0; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 14px 0; }
.card.soft { background: var(--surface-2); }
.grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: repeat(3, 1fr); } }
.feature h3 { margin-bottom: .25em; }
.feature p { color: var(--muted); margin: 0; font-size: .93rem; }

.btn { appearance: none; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 700; padding: 12px 18px; border-radius: 999px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent-deep); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--bad); border-color: rgba(255,122,138,.4); background: transparent; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.block { width: 100%; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }

label.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
label.check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--accent); }
input[type=text], input[type=email], textarea, select { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: inherit; }
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus, select:focus, .btn:focus-visible, .ans:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Question screen */
.qtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .88rem; color: var(--muted); margin-bottom: 8px; }
.progress { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-bottom: 26px; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--pink)); transition: width .25s ease; }
.chip { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: rgba(141,120,234,.15); color: var(--pink); border: 1px solid rgba(141,120,234,.35); }
.qprompt { color: var(--muted); margin: 16px 0 6px; font-size: .95rem; }
.qtext { font-size: clamp(1.3rem, 4.6vw, 1.7rem); font-weight: 700; margin: 0 0 22px; min-height: 3.2em; }
.answers { display: grid; gap: 10px; }
.ans { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); color: var(--text); border-radius: 14px; padding: 14px 16px; font: inherit; cursor: pointer; min-height: 58px; transition: border-color .12s, background .12s, transform .06s; }
.ans:hover { border-color: var(--accent); }
.ans:active { transform: scale(.99); }
.ans.selected { border-color: var(--pink); background: rgba(141,120,234,.18); }
.ans .dot { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--surface-2); color: var(--muted); }
.ans.selected .dot { background: var(--pink); color: #1a1020; }
.ans b { display: block; }
.ans span.h { color: var(--muted); font-size: .86rem; }
.ans[data-v="0"] .dot { border: 1px solid rgba(255,122,138,.5); }
.qnav { display: flex; justify-content: space-between; margin-top: 18px; }
.kbd { font-size: .8rem; color: var(--muted); }
@media (max-width: 520px) { .kbd { display: none; } }

/* Limits */
.limit-row { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.limit-row:last-child { border-bottom: 0; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.seg button { appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .86rem; font-weight: 700; padding: 8px 12px; cursor: pointer; min-height: 38px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on[data-s="0"] { background: rgba(111,211,166,.18); color: var(--good); }
.seg button.on[data-s="1"] { background: rgba(255,184,107,.18); color: var(--warn); }
.seg button.on[data-s="2"] { background: rgba(255,122,138,.18); color: var(--bad); }
.warnnote { font-size: .85rem; color: var(--warn); }

/* Results */
.top3 { display: grid; gap: 12px; }
@media (min-width: 640px) { .top3 { grid-template-columns: repeat(3, 1fr); } }
.trait { background: linear-gradient(160deg, rgba(80,58,168,.35), var(--surface) 70%); border: 1px solid rgba(141,120,234,.4); border-radius: var(--radius); padding: 16px; }
.trait .pct { font-size: 2rem; font-weight: 800; color: var(--pink); line-height: 1; }
.trait .nm { font-weight: 800; font-size: 1.1rem; margin: 6px 0 4px; }
.trait p { font-size: .9rem; color: #d6d0de; margin: 0; }

.area { border-bottom: 1px solid var(--line); padding: 14px 0; }
.area:last-child { border-bottom: 0; }
.area-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.area-head h3 { margin: 0; }
.verdict { font-size: .88rem; font-weight: 700; padding: 2px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.verdict.switch { color: var(--yellow); background: rgba(255,238,88,.1); }
.verdict.lean, .verdict.strong, .verdict.into { color: var(--pink); background: rgba(246,207,244,.1); }
.verdict.curious { color: var(--accent); background: rgba(141,120,234,.12); }
.verdict.limit { color: var(--bad); background: rgba(255,122,138,.1); }
.bars { display: grid; gap: 8px; margin-top: 10px; }
.bar { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: 10px; font-size: .9rem; }
@media (max-width: 420px) { .bar { grid-template-columns: 96px 1fr 40px; } }
.track { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; position: relative; }
.track > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }
.track.hi > i { background: linear-gradient(90deg, var(--accent), var(--pink)); }
.track.b > i { background: linear-gradient(90deg, #6c5a2a, var(--yellow)); }
.bar .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
details.explain { margin-top: 10px; }
details.explain summary { cursor: pointer; color: var(--accent); font-size: .9rem; font-weight: 700; }
details.explain .ex { margin-top: 8px; font-size: .92rem; }
details.explain .ex p { margin: 0 0 .5em; }
.tag { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin: 2px 4px 2px 0; }
.tag.hard { background: rgba(255,122,138,.14); color: var(--bad); }
.tag.talk { background: rgba(255,184,107,.14); color: var(--warn); }
.tag.ok { background: rgba(111,211,166,.12); color: var(--good); }
.legend { display: flex; gap: 14px; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }

.sharebox { display: flex; gap: 8px; }
.sharebox input { font-size: .85rem; }

.bigscore { font-size: 3rem; font-weight: 800; color: var(--pink); line-height: 1; }
.bucket h3 { display: flex; align-items: center; gap: 8px; }
.bucket ul { margin: 0; padding-left: 1.1em; }
.bucket li { margin: 6px 0; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cmp-table th, .cmp-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-table th { color: var(--muted); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.cmp-table td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }

.hist-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hist-item:last-child { border-bottom: 0; }
.hist-item input { width: 20px; height: 20px; accent-color: var(--accent); }
.hist-item .meta { flex: 1; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }

#toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(30px); opacity: 0; background: var(--pink); color: #1a1020; font-weight: 700; padding: 10px 16px; border-radius: 99px; transition: all .2s; pointer-events: none; z-index: 20; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media print { .topbar, .foot, .noprint { display: none !important; } body { background: #fff; color: #000; } .card { border-color: #ccc; background: #fff; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Tried vs fantasy badges */
.xprow { margin-top: 6px; }
.tag.exp1 { background: rgba(111,211,166,.12); color: var(--good); }
.tag.exp2 { background: rgba(141,120,234,.16); color: var(--accent); }
.tag.exp3 { background: rgba(255,238,88,.10); color: var(--yellow); }
.btn .small { font-weight: 500; opacity: .8; }

/* v1: archetype, radar, images, change over time, account, 18+ gate */
.arch-title { background: linear-gradient(90deg, #fff, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.radar-card { text-align: center; }
.radar { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }
.seg button.on:not([data-s]) { background: rgba(141,120,234,.22); color: var(--text); }
.imgprev { display: block; width: 100%; max-width: 320px; margin-top: 12px; border-radius: 12px; border: 1px solid var(--line); }
.imgprev.story { max-width: 220px; }
.imgprev.og { max-width: 420px; }
.saved-note { border-color: rgba(111,211,166,.35); }
.shifts { display: flex; flex-wrap: wrap; gap: 8px; }
.shift { font-size: .86rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.shift.up { background: rgba(111,211,166,.12); color: var(--good); }
.shift.down { background: rgba(255,122,138,.12); color: var(--bad); }
.trends { display: grid; gap: 4px; }
.trend { display: grid; grid-template-columns: 1fr 140px 64px; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.trend:last-child { border-bottom: 0; }
.trend .tl b, .trend .tl span { display: block; }
.trend .tv { text-align: right; font-variant-numeric: tabular-nums; }
.trend .tv b, .trend .tv span { display: block; }
.spark { display: block; }
@media (max-width: 420px) { .trend { grid-template-columns: 1fr 100px 52px; } .spark { width: 100px; } }
body.gated { overflow: hidden; }
.gate { position: fixed; inset: 0; z-index: 50; background: rgba(11,10,13,.97); display: grid; place-items: center; padding: 20px; }
.gate-box { max-width: 460px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.gate-box h1 { font-size: 2rem; }
.nav a { white-space: nowrap; }
@media (max-width: 480px) { .topbar { padding: 12px 14px; } .nav { gap: 10px; font-size: .82rem; } .brand-mark { font-size: .92rem; } .brand-sub { font-size: .68rem; } }
@media (max-width: 360px) { .nav a[href="#/about"] { display: none; } }

/* Mobile polish (tested at 320, 360, 390 px wide) */
.seg button { white-space: nowrap; }
.area.quiet h3 { color: var(--muted); }
.community-card { border-color: rgba(246,207,244,.35); background: linear-gradient(160deg, rgba(246,207,244,.08), var(--surface) 60%); }
.link-item { flex-wrap: wrap; }
.link-item .meta { flex: 1 1 100%; }
@media (max-width: 480px) {
  .wrap { padding: 16px 14px 32px; }
  .card { padding: 14px; border-radius: 14px; }
  .radar-card { padding: 8px 6px 12px; }
  .startbtn { width: 100%; flex-direction: column; gap: 0; line-height: 1.25; padding: 10px 16px; }
  .startbtn .small { font-size: .78rem; }
  .qtext { font-size: 1.22rem; min-height: 0; margin-bottom: 16px; }
  .progress { margin-bottom: 16px; }
  .qprompt { margin-top: 12px; }
  .answers { gap: 8px; }
  .ans { padding: 10px 12px; min-height: 52px; gap: 12px; }
  .ans span.h { font-size: .8rem; }
  .seg button { padding: 8px 10px; font-size: .82rem; }
  .bar { grid-template-columns: 92px 1fr 40px; font-size: .86rem; }
  .row .btn { flex: 1 1 auto; }
  .bigscore { font-size: 2.4rem; }
  .gate-box { padding: 20px; }
  .gate-box h1 { font-size: 1.7rem; }
}
main { overflow-x: clip; }