/* Hint Coach — shared look for hints across the K&K Quest games.
 * amber = look here · green = correct · thin red outline = the option that was tried. No shakes. */
.hc-cue {
  animation: hcCue 1.1s ease-in-out 2;
  border-radius: 14px;
}
@keyframes hcCue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 160, 25, 0); }
  50% { box-shadow: 0 0 0 7px rgba(240, 160, 25, .55); }
}
.hc-wrong {
  opacity: .42 !important;
  outline: 2px solid #d64c58 !important;
  outline-offset: 2px;
  cursor: default !important;
}
.hc-correct {
  outline: 4px solid #1f9f85 !important;
  outline-offset: 2px;
}
.hc-slot { display: grid; justify-items: center; gap: 10px; min-height: 0; margin: 10px 0; }
.hc-slot:empty { margin: 0; }
.hc-hint {
  position: relative;
  max-width: 620px;
  margin: 6px auto;
  padding: 12px 18px;
  border-radius: 18px;
  color: #6b4500;
  background: #fff2cf;
  border: 3px solid #f0c160;
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  animation: hcPop .25s ease-out;
}
.hc-hint::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 18px;
  height: 18px;
  background: inherit;
  border-left: 3px solid #f0c160;
  border-top: 3px solid #f0c160;
  transform: translateX(-50%) rotate(45deg);
}
.hc-hint-beat { min-width: 90px; color: #a0a8ba; background: #f4f6fb; border-color: #e1e6f0; letter-spacing: .2em; }
.hc-hint-beat::before { border-color: #e1e6f0; }
.hc-hint-show { color: #273248; background: #eef1fb; border-color: #c8d0ff; }
.hc-hint-show::before { border-color: #c8d0ff; }
.hc-hint-found { color: #125a4e; background: #dcf7ef; border-color: #9fe3cf; }
.hc-hint-found::before { border-color: #9fe3cf; }
.hc-twin, .hc-help, .hc-diag {
  min-height: 58px;
  padding: 8px 22px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: #8a4fd6;
  box-shadow: 0 5px 0 #6531a8;
  font: inherit;
  font-size: 20px;
  font-weight: 1000;
  cursor: pointer;
}
.hc-help { min-height: 48px; background: #eef1fb; color: #394cae; box-shadow: 0 4px 0 #c8d0ff; font-size: 17px; }
.hc-diag { background: #5368d8; box-shadow: 0 5px 0 #394cae; font-size: 18px; }
.hc-twin:active, .hc-help:active, .hc-diag:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.hc-diagnose { display: grid; gap: 10px; justify-items: center; padding: 12px 14px; border-radius: 18px; background: #eef1fb; border: 3px solid #c8d0ff; }
.hc-diagnose b { color: #394cae; font-size: 19px; }
.hc-diagnose div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hc-done {
  display: inline-block;
  margin: 6px auto;
  padding: 8px 18px;
  border-radius: 999px;
  color: #125a4e;
  background: #dcf7ef;
  font-size: 19px;
  font-weight: 1000;
  animation: hcPop .3s ease-out;
}
.hc-lesson { display: block; margin-top: 2px; color: #a0661a; font-size: .82em; font-weight: 900; }
.hc-comeback { color: #536078; font-size: 16px; font-weight: 900; }
@keyframes hcPop {
  0% { transform: scale(.88); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hc-cue, .hc-hint, .hc-done { animation: none !important; }
}
.hc-done-shown { color: #394cae; background: #eef1fb; }
.hc-probe { display: grid; justify-items: center; gap: 10px; }
.hc-probe-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hc-probe-btn {
  min-width: 120px;
  min-height: 60px;
  padding: 8px 18px;
  border: 3px solid #c8d0ff;
  border-radius: 18px;
  color: #273248;
  background: #fff;
  box-shadow: 0 5px 0 #c8d0ff;
  font: inherit;
  font-size: 21px;
  font-weight: 1000;
  cursor: pointer;
}
.hc-probe-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #c8d0ff; }
.hc-probe-btn.hc-correct { color: #fff; background: #1f9f85; border-color: #1f9f85; box-shadow: 0 5px 0 #176e60; opacity: 1; }
/* Visual hints (pictures): area models, bars, number lines, steps, fraction bars, clocks */
.hc-viz { box-sizing: border-box; width: 100%; max-width: 560px; margin: 4px auto; padding: 10px 12px 8px; border-radius: 18px; background: #fff; border: 3px solid #e3e7f0; animation: hcPop .25s ease-out; }
.hc-viz svg { display: block; width: 100%; height: auto; font-family: inherit; }
.hc-viz figcaption { margin-top: 6px; color: #394cae; font-size: clamp(15px, 2.2vw, 18px); font-weight: 900; line-height: 1.3; text-align: center; }
.hc-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.hc-step { padding: 8px 12px; border-radius: 12px; background: #eef1fb; color: #273248; font-size: 18px; font-weight: 900; }
.hc-step-right { background: #dcf7ef; color: #125a4e; }
.hc-step-mine { background: #fde4e6; color: #8f1f2b; text-decoration: line-through; text-decoration-thickness: 2px; }
.hc-step-arrow { color: #8a93a8; font-size: 20px; font-weight: 900; }
.hc-clocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.hc-clock { display: grid; justify-items: center; gap: 4px; font-weight: 900; }
.hc-clock-mine span { color: #d64c58; }
.hc-clock-right span { color: #1f9f85; }
.hc-viz .hc-clock svg { width: 120px; height: 120px; }