/* =========================================================
   Play mode, results, reviews, image viewer
   ========================================================= */

.play-bar{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:var(--s-4);
  margin-bottom:var(--s-4);
}
.play-bar-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-2);
  font-size:var(--fs-sm);
  font-weight:500;
  text-align:center;
}
.play-bar-meta{ display:flex; align-items:center; gap:var(--s-3); }

.play-timer{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  color:var(--text);
  font-size:var(--fs-xs);
  transition:color var(--dur-2), border-color var(--dur-2), background-color var(--dur-2);
}
.play-timer.low{
  border-color:var(--bad-line);
  background:var(--bad-wash);
  color:var(--bad);
  animation:pulse 1s var(--ease-in-out) infinite;
}

.review-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  margin-bottom:var(--s-3);
}
.review-top .back-link{ margin-bottom:0; }

/* ---------- Question sheet ---------- */

.question-sheet{
  display:grid;
  gap:var(--s-5);
  margin-top:var(--s-6);
  padding:var(--s-8);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
}
.question-sheet-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
}
.question-text{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:500;
  line-height:1.45;
  letter-spacing:-.01em;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.question-image{
  position:relative;
  justify-self:center;
  max-width:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--paper);
  cursor:zoom-in;
}
.question-image img{ max-height:380px; object-fit:contain; }
.question-image-zoom{
  position:absolute;
  right:var(--s-2);
  bottom:var(--s-2);
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:var(--r-sm);
  background:var(--scrim);
  color:#fff;
  opacity:0;
  transition:opacity var(--dur-2);
}
.question-image:hover .question-image-zoom{ opacity:1; }

/* ---------- Answers ---------- */

.play-answers{ display:grid; gap:var(--s-2); }

.play-answer{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  width:100%;
  min-height:56px;
  padding:var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-sunken);
  color:var(--text);
  font-size:var(--fs-base);
  text-align:left;
  transition:border-color var(--dur-2), background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.play-answer:hover:not(:disabled){ border-color:var(--line-strong); background:var(--hover); }
.play-answer:active:not(:disabled){ transform:scale(.995); }
.play-answer:disabled{ cursor:default; }
.play-answer .answer-letter{ font-size:1.6rem; }
.play-answer:hover:not(:disabled):not(.is-picked) .answer-letter{ --lt-top:#F4F1EA; --lt-bottom:#8E9AA3; }
.play-answer-text{ flex:1; min-width:0; overflow-wrap:anywhere; }
.play-answer-mark{ display:inline-flex; flex:none; }
.play-answer-mark .i{ width:20px; height:20px; stroke-width:2.2; }

.play-answer.is-picked{ border-color:var(--accent-line); background:var(--accent-wash); }

.play-answer.is-correct{
  border-color:var(--good-line);
  background:var(--good-wash);
  animation:answer-pop var(--dur-3) var(--ease-spring);
}
.play-answer.is-correct .play-answer-mark{ color:var(--good); }

.play-answer.is-wrong{
  border-color:var(--bad-line);
  background:var(--bad-wash);
  animation:answer-shake 360ms var(--ease-out);
}
.play-answer.is-wrong .play-answer-mark{ color:var(--bad); }
.play-answer:disabled:not(.is-correct):not(.is-wrong){ opacity:.55; }

@keyframes answer-pop{ 40%{ transform:scale(1.012); } }
@keyframes answer-shake{
  20%{ transform:translateX(-4px); }
  40%{ transform:translateX(4px); }
  60%{ transform:translateX(-2px); }
  80%{ transform:translateX(2px); }
}

/* ---------- Explanation ---------- */

.explain{
  display:grid;
  gap:var(--s-3);
  padding-top:var(--s-5);
  border-top:1px solid var(--line-soft);
  animation:fade-up var(--dur-3) var(--ease-out) both;
}
.explain-answers{ display:grid; gap:var(--s-2); }
.explain-answer{
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-sm);
  background:var(--surface-sunken);
}
.explain-answer-head{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  margin-bottom:4px;
  color:var(--text-2);
  font-size:var(--fs-sm);
  font-weight:500;
}
.explain-answer-head .mono{ color:var(--text-3); font-size:var(--fs-xs); }
.explain-answer-icon{ display:inline-flex; color:var(--text-3); }
.explain-answer-icon .i{ width:15px; height:15px; stroke-width:2.2; }
.explain-answer-text{ color:var(--text-2); font-size:var(--fs-sm); line-height:1.6; }
.explain-answer.is-correct{ box-shadow:inset 3px 0 0 var(--good); }
.explain-answer.is-correct .explain-answer-head{ color:var(--text); }
.explain-answer.is-correct .explain-answer-icon{ color:var(--good); }
.explain-answer.is-wrong{ box-shadow:inset 3px 0 0 var(--bad); }
.explain-answer.is-wrong .explain-answer-icon{ color:var(--bad); }

/* ---------- Step navigation ---------- */

.step-nav{
  position:sticky;
  bottom:0;
  z-index:5;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:var(--s-4);
  margin-top:var(--s-5);
  padding:var(--s-4) 0 var(--s-5);
  background:linear-gradient(to top, var(--paper) 70%, transparent);
}
.step-nav-hint{ color:var(--text-3); font-size:var(--fs-xs); text-align:center; }

/* ---------- Results ---------- */

.result-hero{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:var(--s-10);
  padding:var(--s-8);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
}
.result-ring{ position:relative; width:168px; height:168px; }
.score-ring{ width:100%; height:100%; transform:rotate(-90deg); }
.score-ring circle{ fill:none; stroke-width:8; }
.score-ring-track{ stroke:var(--line); }
.score-ring-value{
  stroke:var(--accent);
  stroke-linecap:round;
  stroke-dashoffset:var(--ring-offset);
  animation:ring-fill 1.1s var(--ease-out) both;
}
.score-ring.is-good .score-ring-value{ stroke:var(--good); }
.score-ring.is-warn .score-ring-value{ stroke:var(--warn); }
.score-ring.is-bad .score-ring-value{ stroke:var(--bad); }
@keyframes ring-fill{ from{ stroke-dashoffset:var(--ring-full); } }
.result-ring-label{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  text-align:center;
}
.result-ring-value{ font-size:var(--fs-3xl); font-weight:500; line-height:1; letter-spacing:-.04em; }
.result-ring-value small{ color:var(--text-3); font-size:var(--fs-md); }
.result-ring-sub{ margin-top:6px; color:var(--text-3); font-size:var(--fs-xs); }

.result-copy{ display:grid; gap:var(--s-3); min-width:0; }
.result-stats{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-1); }
.stat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  color:var(--text-2);
  font-size:var(--fs-xs);
}
.stat .i{ width:14px; height:14px; stroke-width:2; color:var(--text-3); }
.stat strong{ color:var(--text); font-weight:500; }
.stat.is-good .i{ color:var(--good); }
.stat.is-bad .i{ color:var(--bad); }
.result-actions{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-3); }

.panel{
  margin-top:var(--s-6);
  padding:var(--s-6) var(--s-8) var(--s-8);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
}
.panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-4);
  margin-bottom:var(--s-5);
}
.panel-head > div:first-child{ display:grid; gap:6px; }
.rating{ display:flex; align-items:baseline; gap:4px; }
.rating strong{ font-size:var(--fs-2xl); font-weight:500; letter-spacing:-.03em; }
.rating span{ color:var(--text-3); }

.review-loading{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-5);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  color:var(--accent-text);
}
.review-loading div{ display:grid; gap:2px; }
.review-loading strong{ color:var(--text); font-size:var(--fs-sm); }
.review-loading span{ color:var(--text-3); font-size:var(--fs-xs); }

.insight-summary{ margin-bottom:var(--s-5); color:var(--text); font-size:var(--fs-md); line-height:1.6; animation:fade-in var(--dur-3); }
.insight-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-3); }
.insight{
  --tone:var(--accent-text);
  padding:var(--s-4) var(--s-5);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-sunken);
  animation:fade-up var(--dur-3) var(--ease-out) both;
}
.insight:nth-child(2){ animation-delay:60ms; }
.insight:nth-child(3){ animation-delay:120ms; }
.insight.is-good{ --tone:var(--good); }
.insight.is-warn{ --tone:var(--warn); }
.insight-wide{ grid-column:1 / -1; }
.insight-label{
  margin-bottom:var(--s-3);
  color:var(--tone);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}
.insight-list{ display:grid; gap:var(--s-2); list-style:none; }
.insight-list li{ display:flex; gap:var(--s-2); color:var(--text-2); font-size:var(--fs-sm); line-height:1.55; }
.insight-list .i{ width:15px; height:15px; margin-top:3px; color:var(--tone); stroke-width:2; }
.insight-steps{ display:grid; gap:var(--s-2); padding:0; list-style:none; counter-reset:step; }
.insight-steps li{
  display:flex;
  gap:var(--s-3);
  color:var(--text-2);
  font-size:var(--fs-sm);
  line-height:1.55;
  counter-increment:step;
}
.insight-steps li::before{
  content:counter(step, decimal-leading-zero);
  flex:none;
  color:var(--tone);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  padding-top:2px;
}

/* review list */
.review-index{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:var(--s-2);
}
.review-index-dot{
  display:grid;
  place-items:center;
  min-width:30px;
  height:30px;
  padding:0 6px;
  border:1px solid var(--line);
  border-radius:var(--r-xs);
  color:var(--text-2);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  transition:transform var(--dur-1), background-color var(--dur-1);
}
.review-index-dot:hover{ transform:translateY(-1px); }
.review-index-dot.is-good{ border-color:var(--good-line); background:var(--good-wash); color:var(--good); }
.review-index-dot.is-bad{ border-color:var(--bad-line); background:var(--bad-wash); color:var(--bad); }

.review-list .question-sheet{ scroll-margin-top:var(--s-6); }

.answer-review-list{ display:grid; gap:var(--s-2); }
.answer-review{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  padding:var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.answer-review-copy{ display:grid; flex:1; gap:4px; min-width:0; }
.answer-review-text{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); font-weight:500; overflow-wrap:anywhere; }
.answer-review-tag{
  padding:1px 7px;
  border-radius:var(--r-xs);
  background:var(--hover);
  color:var(--text-2);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.answer-review-explain{ color:var(--text-2); font-size:var(--fs-sm); line-height:1.6; }
.answer-review-mark{ display:inline-flex; margin-top:4px; }
.answer-review-mark .i{ width:18px; height:18px; stroke-width:2.2; }
.answer-review.is-correct{ border-color:var(--good-line); background:var(--good-wash); }
.answer-review.is-correct .answer-review-mark{ color:var(--good); }
.answer-review.is-wrong{ border-color:var(--bad-line); background:var(--bad-wash); }
.answer-review.is-wrong .answer-review-mark{ color:var(--bad); }

/* ---------- Image viewer ---------- */

.image-viewer{
  position:fixed;
  inset:0;
  z-index:400;
  display:flex;
  flex-direction:column;
  background:rgba(6, 6, 8, .9);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity var(--dur-2) var(--ease-out);
}
.image-viewer.open{ opacity:1; }
.image-viewer-bar{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  height:56px;
  padding:0 var(--s-4);
  color:#d4d4d8;
}
.image-viewer-zoom{ font-size:var(--fs-xs); }
.image-viewer-hint{ flex:1; color:#71717a; font-size:var(--fs-xs); }
.image-viewer-close{ color:#e4e4e7; }
.image-viewer-close:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
.image-viewer-stage{
  display:grid;
  flex:1;
  place-items:center;
  min-height:0;
  overflow:hidden;
  padding:var(--s-4) var(--s-4) var(--s-10);
  cursor:zoom-out;
}
.image-viewer-stage.dragging{ cursor:grabbing; }
.image-viewer-stage img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:var(--r-sm);
  transition:transform var(--dur-2) var(--ease-out);
  user-select:none;
  -webkit-user-drag:none;
  animation:scale-in var(--dur-3) var(--ease-out);
}
.image-viewer-stage.dragging img{ transition:none; }

/* ---------- Responsive ---------- */

@media (max-width: 860px){
  .question-sheet{ padding:var(--s-5); border-radius:var(--r-md); }
  .question-text{ font-size:var(--fs-md); }
  .play-bar{ grid-template-columns:auto 1fr; }
  .play-bar-title{ display:none; }
  .play-bar-meta{ justify-content:flex-end; }
  .result-hero{ grid-template-columns:1fr; justify-items:center; gap:var(--s-5); padding:var(--s-6); text-align:center; }
  .result-stats,
  .result-actions{ justify-content:center; }
  .result-copy{ justify-items:center; }
  .panel{ padding:var(--s-5); }
  .insight-grid{ grid-template-columns:1fr; }
  .step-nav{ grid-template-columns:1fr 1fr; }
  .step-nav-hint{ display:none; }
  .step-nav .btn{ width:100%; }
}