/* ---- Quiz ---- */
#screen-quiz{display:none;}
.quiz-card{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
}
.quiz-question{
  background:var(--bg-2);
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding:1.9rem 1.9rem;
}
.quiz-number{
  flex:none;
  width:64px; height:64px;
  border-radius:50%;
  background:var(--panel-dark);
  color:var(--ink);
  font-family:'Baloo 2', system-ui, sans-serif;
  font-weight:700;
  font-size:1.7rem;
  display:flex; align-items:center; justify-content:center;
}
.quiz-question p{
  margin:0;
  font-family:'Baloo 2', system-ui, sans-serif;
  font-weight:600;
  font-size:1.2rem;
  line-height:1.3;
}
.quiz-answers{
  background:var(--panel-dark);
  padding:1.7rem 1.9rem 1.9rem;
}
.answers-label{
  font-size:.85rem;
  color:var(--ink-mute);
  margin:0 0 1rem;
}
.option{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  padding:.6rem 0;
  cursor:pointer;
}
.option input{
  appearance:none;
  -webkit-appearance:none;
  width:20px; height:20px; flex:none;
  margin-top:.15rem;
  border-radius:50%;
  border:2px solid var(--ink-mute);
  background:transparent;
  display:grid; place-items:center;
  cursor:pointer;
}
.option input::after{
  content:"";
  width:10px; height:10px;
  border-radius:50%;
  background:var(--teal-pop);
  transform:scale(0);
  transition:transform .12s ease;
}
.option input:checked{border-color:var(--teal-pop);}
.option input:checked::after{transform:scale(1);}
.option input:focus-visible{outline:3px solid var(--focus); outline-offset:2px;}
.option p{margin:0; font-size:1rem; color:var(--ink);}

.quiz-next{
  margin-top:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:'Baloo 2', system-ui, sans-serif;
  font-weight:700;
  font-size:1.05rem;
  color:var(--ink);
  background:var(--accent-orange);
  border:none;
  border-radius:11px;
  padding:.85rem 2.2rem;
  cursor:pointer;
  margin-left:auto;
  margin-right:auto;
  width:max-content;
  box-shadow:0 5px 0 var(--accent-orange-strong);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.quiz-next:disabled{opacity:.4; cursor:not-allowed;}
.quiz-next:not(:disabled):hover{transform:translateY(2px); box-shadow:0 3px 0 var(--accent-orange-strong);}
.quiz-next:focus-visible{outline:3px solid var(--focus); outline-offset:3px;}

.quiz-back{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin:1.1rem auto 0;
  width:max-content;
  padding:.5rem 1.1rem;
  background:none;
  border:1.5px solid var(--line);
  border-radius:999px;
  color:var(--ink-soft);
  font-family:'Mulish', sans-serif;
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.quiz-back span{font-size:1.2rem; line-height:1; transition:transform .2s ease;}
.quiz-back:not(:disabled):hover{color:var(--teal-pop); border-color:var(--teal-pop); background:rgba(31,201,191,.12); transform:translateY(-1px);}
.quiz-back:not(:disabled):hover span{transform:translateX(-3px);}
.quiz-back:focus-visible{outline:3px solid var(--focus); outline-offset:3px;}
.quiz-back:disabled{visibility:hidden;}

.dots{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin-top:1.5rem;
}
.dot{
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
}
.dot.done{background:var(--ink-soft);}
.dot.active{background:var(--teal-pop); transform:scale(1.25);}

/* ---- Results ---- */
#screen-results{display:none;}
.stack{display:flex; flex-direction:column; gap:1.4rem;}
.result-hero{
  background:var(--panel-dark-2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:2.1rem 1.9rem;
}
.result-eyebrow{
  font-size:.85rem;
  color:var(--teal-pop);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0 0 .5rem;
}
.result-title{
  font-size:clamp(1.5rem,4.5vw,1.9rem);
  margin:0 0 .3rem;
}
.result-title em{color:var(--teal-pop); font-style:normal;}
.result-name-row{
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin-bottom:1.5rem;
}
@media (max-width:480px){ .result-name-row{flex-direction:column; align-items:flex-start; gap:.8rem;} }
.result-icon{
  flex:none;
  width:76px; height:76px;
  border-radius:50%;
  background:var(--bg-2-deep);
  border:3px solid var(--teal-pop);
  display:flex; align-items:center; justify-content:center;
}
.result-tagline{
  font-family:'Baloo 2', system-ui, sans-serif;
  font-weight:600;
  font-size:1.05rem;
  color:var(--teal-pop);
  margin:0;
}
.result-desc{color:var(--ink-soft); margin:0 0 1.6rem;}
.result-desc p{margin:0 0 1rem;}
.result-desc p:last-child{margin-bottom:0;}
.result-tips-heading{
  font-family:'Baloo 2', system-ui, sans-serif;
  font-weight:700;
  font-size:1.05rem;
  margin:0 0 .9rem;
}
.tips-list li strong{color:var(--ink);}
.result-important{
  color:var(--ink-soft);
  margin:0 0 1.5rem;
}
.result-important p{margin:0 0 .8rem;}
.result-important p:last-child{margin-bottom:0;}
.result-strength{
  color:var(--ink-mute);
  font-size:.9rem;
  margin:0;
  padding-top:1.2rem;
  border-top:1px dashed var(--line);
}
.result-strength strong{color:var(--ink);}

.chart-card{
  background:var(--panel-dark-2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.8rem 1.9rem;
}
.chart-card h3{font-size:1.05rem; margin:0 0 1.15rem;}
.bar-row{margin-bottom:1.05rem; display:flex; align-items:center; gap:.8rem;}
.bar-row:last-child{margin-bottom:0;}
.bar-icon{
  width:34px; height:34px; flex:none;
  border-radius:50%;
  background:var(--bg-2-deep);
  display:flex; align-items:center; justify-content:center;
}
.bar-body{flex:1; min-width:0;}
.bar-label{
  display:flex; align-items:center;
  font-family:'Baloo 2', system-ui, sans-serif;
  font-weight:600;
  font-size:.9rem;
  margin-bottom:.3rem;
}
.bar-label .pct{
  margin-left:auto;
  font-family:'IBM Plex Mono', monospace;
  font-variant-numeric:tabular-nums;
  font-size:.85rem;
  color:var(--ink-mute);
}
.bar-track{
  height:11px;
  background:var(--panel-dark);
  border-radius:8px;
  overflow:hidden;
}
.bar-fill{
  height:100%;
  width:0%;
  border-radius:8px 4px 4px 8px;
  background:var(--teal-pop);
  transition:width .7s cubic-bezier(.2,.7,.3,1);
}
.bar-row.top .bar-fill{background:var(--accent-pink);}
.bar-row.top .bar-label{color:var(--accent-pink);}

.tips-list{margin:0 0 1.2rem; padding-left:1.2rem; color:var(--ink-soft);}
.tips-list li{margin-bottom:.55rem;}
.tips-list li:last-child{margin-bottom:0;}

.restart-row{display:flex; justify-content:center; margin-top:.2rem;}
button.ghost-restart{
  font-family:'Mulish', sans-serif;
  font-weight:700;
  font-size:.9rem;
  color:var(--ink-soft);
  background:none;
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:.7rem 1.3rem;
  cursor:pointer;
}
button.ghost-restart:hover{border-color:var(--accent-orange); color:var(--ink);}
button.ghost-restart:focus-visible{outline:3px solid var(--focus); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  .bar-fill, .quiz-next, button.cta, .quiz-back, .quiz-back span, .rc-logo{transition:none;}
}