/* UbayBian v0.5.13 — Quiz Mission Final Polish */

/* Keep the quiz compact and closer to the locked Home proportions. */
.quiz-card.adventure-quiz,
.result-panel.adventure-result{
  min-height:clamp(500px,61vh,620px);
}

.quiz-card.adventure-quiz{
  padding:20px 24px 22px;
}

/* Sidebar profile now uses the same character universe as Profile Select. */
.side-profile .profile-avatar.profile-avatar-upgraded{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(224,247,255,.96),rgba(255,248,216,.88));
  border:1px solid rgba(181,224,244,.9);
  box-shadow:0 7px 16px rgba(18,92,141,.12),inset 0 1px 0 rgba(255,255,255,.95);
}
.side-profile .profile-avatar.profile-avatar-upgraded img{
  width:47px;
  height:47px;
  object-fit:contain;
  filter:drop-shadow(0 4px 5px rgba(22,75,113,.14));
}
body[data-profile="bian"] .side-profile .profile-avatar.profile-avatar-upgraded{
  background:linear-gradient(145deg,#fff6d9,#fff0bc);
  border-color:#f2d889;
}

/* Mission header + progress breathe better. */
.adventure-quiz .quiz-header{
  max-width:930px;
  margin-bottom:9px;
}
.adventure-quiz .progress-wrapper{
  max-width:930px;
  margin-bottom:18px;
}
.adventure-quiz .progress-label-row{
  margin-bottom:6px;
}
.adventure-quiz .progress-bar{
  height:10px;
}

/* Coach sits below/right of the trail instead of fighting for the same line. */
.mission-coach{
  top:112px;
  right:22px;
  gap:6px;
}
.mission-coach img{
  width:42px;
  height:42px;
}
.mission-coach span{
  padding:6px 9px;
  font-size:9.5px;
  background:rgba(255,255,255,.94);
}

/* Better question hierarchy. */
.adventure-quiz .question-text{
  max-width:860px;
  margin:0 auto 16px;
  padding:18px 22px 16px;
  font-size:clamp(22px,1.75vw,27px);
  line-height:1.26;
  font-weight:850;
  letter-spacing:-.018em;
}
.adventure-quiz.question-long .question-text{
  max-width:900px;
  font-size:clamp(20px,1.55vw,23px);
  line-height:1.32;
  font-weight:820;
}
.adventure-quiz.question-very-long .question-text{
  max-width:930px;
  font-size:clamp(18px,1.4vw,21px);
  line-height:1.36;
  font-weight:800;
}

/* Choice cards stay game-like, but slightly more compact. */
.adventure-quiz .options{
  gap:12px;
}
.adventure-quiz .option-btn{
  min-height:78px;
  padding:13px 16px;
  border-radius:19px;
  box-shadow:0 6px 15px rgba(16,91,139,.075),inset 0 1px 0 #fff;
}
.adventure-quiz .option-btn:hover:not(:disabled){
  box-shadow:0 10px 20px rgba(12,113,173,.12);
}
.adventure-quiz .option-text{
  font-size:16px;
  color:#203f54;
  font-weight:850;
}

/* Text-answer becomes a clean locked state once submitted. */
.adventure-quiz .text-answer{
  min-height:56px;
}
.adventure-quiz[data-answer-state="correct"] .text-answer,
.adventure-quiz[data-answer-state="wrong"] .text-answer{
  border-color:#c8dde8;
  background:rgba(243,249,252,.92);
  color:#68869a;
  box-shadow:none;
}
.adventure-quiz[data-answer-state="correct"] .check-btn,
.adventure-quiz[data-answer-state="wrong"] .check-btn{
  display:none;
}

/* Feedback is a coach card, not a plain alert. */
.adventure-quiz .feedback:not(:empty){
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
}
.adventure-quiz .feedback .feedback-title{
  flex:0 0 auto;
  font-weight:950;
  font-size:13px;
  white-space:nowrap;
}
.adventure-quiz .feedback .feedback-copy{
  font-size:12.5px;
  line-height:1.48;
  font-weight:700;
}
.adventure-quiz .feedback.correct .feedback-title{color:#0d7b46}
.adventure-quiz .feedback.wrong .feedback-title{color:#b73947}
.adventure-quiz .answer-rewards{
  padding-left:2px;
}
.adventure-quiz .reward-chip.coin{
  border-color:#ffe0a0;
}

/* Action dock: answer feedback should naturally lead to Next. */
.adventure-quiz .feedback-row{
  margin-top:14px;
}
.adventure-quiz .bottom-actions{
  min-width:205px;
}
.adventure-quiz .next-btn:not(:disabled){
  transform:translateY(0);
}
.adventure-quiz .next-btn:not(:disabled):hover{
  transform:translateY(-1px);
}

/* Result: reduce empty space and make the state feel celebratory/supportive. */
.result-panel.adventure-result{
  padding:22px 24px 24px;
  background:
    radial-gradient(circle at 50% 31%,rgba(255,230,126,.30),transparent 24%),
    radial-gradient(circle at 12% 88%,rgba(47,188,246,.16),transparent 21%),
    linear-gradient(145deg,rgba(247,253,255,.99),rgba(228,246,255,.97));
}
.result-panel.adventure-result.result-perfect{
  background:
    radial-gradient(circle at 50% 30%,rgba(255,211,68,.34),transparent 25%),
    radial-gradient(circle at 86% 22%,rgba(255,239,177,.42),transparent 20%),
    linear-gradient(145deg,#f7fdff,#fff8df 52%,#e7f7ff);
}
.result-panel.adventure-result.result-encourage{
  background:
    radial-gradient(circle at 50% 30%,rgba(122,226,178,.22),transparent 24%),
    radial-gradient(circle at 88% 18%,rgba(82,197,246,.20),transparent 20%),
    linear-gradient(145deg,#f6fdff,#ebfbf4 56%,#e7f6ff);
}
.adventure-result .result-emoji{
  font-size:38px;
  margin-bottom:2px;
}
.adventure-result .eyebrow{
  margin-bottom:9px;
}
.adventure-result .result-score{
  width:164px;
  height:164px;
  border-width:11px;
  margin-bottom:13px;
}
.adventure-result .result-score strong{
  font-size:60px;
}
.adventure-result h2{
  font-size:25px;
  margin-bottom:4px;
}
.adventure-result .result-message{
  max-width:560px;
  margin-bottom:14px;
  font-size:12px;
}
.adventure-result .result-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(120px,1fr));
  gap:9px;
  width:min(560px,100%);
  margin-bottom:9px;
}
.adventure-result .result-stats span{
  min-width:0;
  padding:11px 12px;
  border-radius:15px;
  text-align:center;
}
.adventure-result .result-rewards{
  margin-bottom:2px;
}
.result-review-note{
  margin-top:7px;
}
.adventure-result .result-actions{
  margin-top:14px;
}

/* Character companion gives results personality without taking over the screen. */
.result-companion{
  position:absolute;
  right:7%;
  top:50%;
  transform:translateY(-42%);
  width:126px;
  height:126px;
  object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(21,86,128,.16));
  opacity:.96;
  animation:resultFloat 2.8s ease-in-out infinite;
}
.result-companion-bubble{
  position:absolute;
  right:5.5%;
  top:30%;
  max-width:150px;
  padding:8px 11px;
  border-radius:14px;
  background:rgba(255,255,255,.93);
  border:1px solid #d7ebf5;
  box-shadow:0 7px 18px rgba(16,87,132,.08);
  color:#496d84;
  font-size:10px;
  font-weight:900;
  text-align:center;
}
.result-perfect .result-companion-bubble{
  color:#9a6700;
  border-color:#f5d581;
  background:#fffaf0;
}
@keyframes resultFloat{
  0%,100%{transform:translateY(-42%) translateY(0)}
  50%{transform:translateY(-42%) translateY(-7px)}
}

/* Perfect gets restrained celebratory sparkles. */
.result-perfect:after{
  content:"✦  ✧   ★   ✦    ✧   ★   ✦";
  position:absolute;
  left:50%;
  top:80px;
  transform:translateX(-50%);
  color:#ffc52f;
  font-size:16px;
  letter-spacing:10px;
  opacity:.65;
  pointer-events:none;
  white-space:nowrap;
}

@media (max-width:1180px){
  .result-companion,.result-companion-bubble{display:none}
  .mission-coach{right:14px}
}

@media (max-width:980px){
  .quiz-card.adventure-quiz,.result-panel.adventure-result{min-height:0}
  .adventure-quiz .question-text,
  .adventure-quiz.question-long .question-text,
  .adventure-quiz.question-very-long .question-text{
    font-size:clamp(19px,3vw,24px);
  }
  .adventure-result .result-stats{grid-template-columns:1fr}
}

@media (max-width:640px){
  .quiz-card.adventure-quiz{padding:14px}
  .adventure-quiz .option-btn{min-height:68px}
  .adventure-result .result-score{width:140px;height:140px}
  .adventure-result .result-score strong{font-size:51px}
}