:root{
  --bg:#0b0b12;
  --card:rgba(255,255,255,.055);
  --stroke:rgba(255,255,255,.12);
  --text:#f2f2f7;
  --muted:#a0a0b8;
  --accent:#ff4fd8;
  --accent2:#7c5cff;
  --ok:#5ff2a5;
  --radius:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Space Grotesk",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  position:relative;
}
.blob{position:fixed;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;z-index:0;animation:float 14s ease-in-out infinite}
.b1{width:420px;height:420px;background:#ff4fd8;top:-120px;left:-100px}
.b2{width:380px;height:380px;background:#5b8cff;bottom:-140px;right:-90px;animation-delay:-5s}
.b3{width:300px;height:300px;background:#3ce8b0;top:45%;left:55%;animation-delay:-9s;opacity:.35}
@keyframes float{50%{transform:translate3d(30px,-40px,0) scale(1.1)}}

#app{position:relative;z-index:1;width:100%;max-width:760px}
.screen{display:none}
.screen.active{display:block;animation:in .45s cubic-bezier(.2,.9,.3,1)}
@keyframes in{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:38px 34px;
  backdrop-filter:blur(14px);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.badge{
  display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:#0b0b12;background:linear-gradient(90deg,var(--accent),var(--accent2));
  padding:6px 14px;border-radius:99px;font-weight:700;margin-bottom:18px;
}
h1{
  font-family:"Unbounded",sans-serif;font-size:clamp(30px,5.4vw,48px);
  line-height:1.12;letter-spacing:-.02em;margin-bottom:16px;
}
.grad{background:linear-gradient(90deg,#ff4fd8,#7c5cff,#3ce8b0);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:17px;line-height:1.6;max-width:56ch}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 26px}
.chip{
  font-size:13px;padding:7px 13px;border-radius:99px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);display:flex;align-items:center;gap:7px;
  transition:.25s;cursor:default;
}
.chip:hover{transform:translateY(-3px);border-color:var(--c);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--c);display:inline-block}
.note{color:#7d7d99;font-size:13px;margin-top:16px;line-height:1.5}

.btn{
  font-family:inherit;font-size:16px;font-weight:700;border:none;cursor:pointer;
  padding:14px 26px;border-radius:99px;transition:.22s;
}
.btn.primary{
  color:#0b0b12;background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:0 12px 30px rgba(255,79,216,.32);
}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(255,79,216,.45)}
.btn.big{padding:17px 40px;font-size:18px}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--stroke)}
.btn.ghost:hover{border-color:var(--accent);color:#fff}

/* quiz */
.hud{margin-bottom:16px}
.hud-top{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:9px;letter-spacing:.06em}
.hud-tag{color:var(--accent)}
.track{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2),#3ce8b0);transition:width .5s cubic-bezier(.2,.9,.3,1)}
.q-num{font-size:11px;letter-spacing:.3em;color:#7d7d99;margin-bottom:14px}
.q-text{font-family:"Unbounded",sans-serif;font-size:clamp(20px,3.4vw,28px);line-height:1.35;margin-bottom:26px}
.options{display:grid;gap:12px}
.opt{
  text-align:left;font-family:inherit;font-size:16px;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid var(--stroke);
  border-radius:18px;padding:16px 18px;cursor:pointer;transition:.2s;
  display:flex;gap:14px;align-items:center;position:relative;overflow:hidden;
}
.opt .k{
  flex:0 0 28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.09);font-size:13px;font-weight:700;color:var(--muted);transition:.2s;
}
.opt:hover{border-color:var(--accent);transform:translateX(6px);background:rgba(255,255,255,.09)}
.opt:hover .k{background:var(--accent);color:#0b0b12}
.opt.picked{border-color:var(--ok);background:rgba(95,242,165,.14);transform:translateX(6px)}
.opt.picked .k{background:var(--ok);color:#062}
.opt.dim{opacity:.4;pointer-events:none}
.hint{margin-top:20px;font-size:13px;color:#7d7d99}
.hint b{color:var(--muted)}

/* result */
.result-card{text-align:center;padding-top:44px}
.res-emoji{font-size:76px;line-height:1;animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.res-label{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:#7d7d99;margin-top:14px}
.res-name{
  font-family:"Unbounded",sans-serif;font-size:clamp(34px,7vw,64px);margin-top:6px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:in .7s .15s both;
}
.res-desc{color:var(--muted);font-size:16.5px;line-height:1.65;max-width:58ch;margin:16px auto 0}
.traits{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:22px 0 6px}
.trait{font-size:13px;padding:7px 14px;border-radius:99px;border:1px dashed rgba(255,255,255,.25);color:#d8d8ea}
.runner{margin-top:28px;text-align:left}
.runner-title{font-size:11px;letter-spacing:.3em;color:#7d7d99;text-transform:uppercase;margin-bottom:12px;text-align:center}
.scoreboard{display:grid;gap:8px}
.row{display:grid;grid-template-columns:110px 1fr 34px;align-items:center;gap:10px;font-size:13.5px}
.row .nm{display:flex;align-items:center;gap:7px;color:var(--muted)}
.row .nm i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:0 0 auto}
.row .bt{height:10px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.row .bf{height:100%;width:0;border-radius:99px;background:var(--c);transition:width .9s cubic-bezier(.2,.9,.3,1)}
.row.top .nm{color:#fff;font-weight:700}
.row .vl{text-align:right;color:#7d7d99;font-variant-numeric:tabular-nums}
.res-actions{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}

/* language switcher */
.lang-switch{position:fixed;top:14px;right:14px;z-index:30;display:flex;gap:4px;padding:4px;border-radius:99px;background:rgba(16,16,26,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.lang-btn{border:0;background:transparent;color:#9a9ab8;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;padding:8px 13px;border-radius:99px;cursor:pointer;transition:background .18s,color .18s,transform .18s}
.lang-btn:hover{color:#fff;transform:translateY(-1px)}
.lang-btn.on{background:var(--accent,#ff4fd8);color:#0b0b14}
@media(max-width:560px){.lang-switch{top:10px;right:10px}.lang-btn{padding:7px 11px;font-size:11px}}

@media(max-width:560px){
  .card{padding:28px 20px}
  .row{grid-template-columns:96px 1fr 30px;font-size:12.5px}
}