/* The Hand Reader (js/theory/handreader.js): #handreader-screen / #hr-root.
   The Chord Bridge's column (gauntlet.css lends its bar, buttons, cards and
   setup fold): control bar, the question and its four answers, the strip
   with the hand on it, the why-line, the key hint. */
#hr-root { width: min(1100px, 97vw); display: flex; flex-direction: column; gap: 8px; }
.hr-bar {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  color: #9aa3b8; font-size: 12px;
}
.hr-bar label { display: inline-flex; align-items: center; gap: 5px; }
.hr-bar select {
  background: #1a1f2b; color: #e8ecf6; border: 1px solid #2a3145;
  border-radius: 7px; padding: 4px 7px; font: inherit;
}
.hr-title { font-weight: 700; color: #f3ecd8; font-size: 15px; }
.hr-main { display: flex; flex-direction: column; gap: 8px; }
.hr-ask { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 2px 4px; }
.hr-q { font: 700 22px/1.2 -apple-system, "Segoe UI", Roboto, sans-serif; color: #f3ecd8; }
.hr-sub { color: #9aa3b8; font-size: 13px; }
.hr-count { margin-left: auto; color: #e7b54a; font-weight: 700; font-variant-numeric: tabular-nums; }
.hr-clock { height: 5px; border-radius: 3px; background: #232a3b; overflow: hidden; }
.hr-clock i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #35b06a, #e7b54a); }
.hr-clock.hot i { background: linear-gradient(90deg, #d9534f, #e7b54a); }
.hr-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hr-choice {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: #1f2432; color: #e8ecf6; border: 1.5px solid #3a4360; border-radius: 10px;
  padding: 10px 14px; font: 600 17px/1.2 -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer;
  min-height: 48px;
}
.hr-choice:hover { border-color: #e7b54a; }
.hr-choice b { color: #5d6780; font-weight: 700; font-size: 13px; min-width: 14px; }
.hr-choice:disabled { cursor: default; }
.hr-choice.right { border-color: #35b06a; background: rgba(53, 176, 106, .22); }
.hr-choice.wrong { border-color: #d9534f; background: rgba(217, 83, 79, .2); }
.hr-choice.dim { opacity: .5; }
/* a duel: a wrong tap strikes that name out for the rest of the round */
.hr-choice.dead { opacity: .45; text-decoration: line-through; }
.hr-stagewrap { position: relative; }
#hr-stage {
  display: block; width: 100%; border-radius: 12px;
  border: 1px solid #2a3145; background: #0d1016;
}
.hr-why { min-height: 22px; color: #c6cddd; font-size: 14px; line-height: 1.4; padding: 0 4px; }
.hr-why.bad { color: #ff9aa5; }
.hr-why.good { color: #6fd39a; }
.hr-rstats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 8px 0 4px; color: #c6cddd; font-size: 14px; }
.hr-rstats b { color: #e7b54a; }
.hr-rank { color: #9aa3b8; font-size: 13px; margin-top: 4px; }
.hr-lit { color: #7f8aa5; font-size: 12px; font-style: normal; }
@media (max-width: 700px) {
  .hr-q { font-size: 18px; }
  .hr-choice { font-size: 15px; padding: 8px 10px; }
  .hr-bar .gb-stats { margin-left: 0; width: 100%; font-size: 11.5px; }
}