/* Прогноз до разгадки (box_forecast, блок 4 урока 2). Подключается рядом с css/media.css там, где
   рисуются шаги ученика (index.html). Картинки идут через гейт stepKit.image (.img-box в media.css),
   рамки фиксированной пропорции: перерисовка на каждый ack не прыгает по высоте. */
.fc-step .btn-big:disabled { opacity: .45; cursor: default; }
.fc-saved { margin: 12px 4px 0; font-weight: 700; color: #27ae60; }
.fc-q { font-size: 21px; }
.fc-pic { width: min(100%, 340px); margin: 14px auto 0; border-radius: 16px; border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(28,35,64,.1); }
.fc-predict { flex-direction: row; }
.fc-predict .opt-btn { flex: 1 1 0; text-align: center; font-weight: 700; }
.fc-predict .opt-btn:disabled { cursor: default; }

.fc-reveal { background: #fff; border-radius: 18px; padding: 16px; margin-top: 16px; text-align: center;
  border: 4px solid #dfe5f5; box-shadow: 0 4px 16px rgba(28,35,64,.06); }
.fc-reveal.hit { border-color: #27ae60; }
.fc-reveal.miss { border-color: #f5a623; }
.fc-reveal .fc-pic { box-shadow: none; }
.fc-answer { margin-top: 12px; font-size: 24px; font-weight: 800; color: #3450d2; line-height: 1.3; }
.fc-verdict { margin-top: 8px; font-size: 22px; font-weight: 800; }
.fc-reveal.hit .fc-verdict { color: #27ae60; }
.fc-reveal.miss .fc-verdict { color: #b86e00; }
.fc-next { margin-top: 16px; }
.fc-done { margin-top: 20px; line-height: 1.35; }
.fc-wait { font-size: 16px; }

/* сделанные прогнозы: четыре миниатюры в ряд с ответом коробки и отметкой */
.fc-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.fc-cell { position: relative; background: #fff; border-radius: 12px; padding: 4px; border: 3px solid #dfe5f5;
  text-align: center; }
.fc-cell.hit { border-color: #27ae60; }
.fc-cell.miss { border-color: #f5a623; }
.fc-thumb { border-radius: 8px; }
.fc-thumb .img-retry-text, .fc-thumb .img-retry small { display: none; }
.fc-cell-label { margin-top: 4px; font-size: 13px; font-weight: 700; color: #3a4160; line-height: 1.2; }
.fc-mark { position: absolute; top: -8px; right: -6px; font-size: 16px; line-height: 1; }
.fc-cell-you { margin-top: 4px; font-size: 13px; font-weight: 800; color: #1c2340; line-height: 1.2; }
.fc-cell-you + .fc-cell-label { margin-top: 2px; font-weight: 600; color: #7a839f; }
.fc-mark-inline { font-size: 13px; }

.fc-box-loading { font-size: 15px; }
.fc-box-error { margin-top: 16px; background: #fff4f0; color: #c0392b; border-radius: 14px; padding: 14px;
  font-weight: 700; text-align: center; }
.fc-box-error .btn-big { margin-top: 10px; }

@media (max-width: 480px) {
  .fc-pic { width: 100%; }
  .fc-q { font-size: 19px; }
  .fc-answer { font-size: 21px; }
  .fc-cell-label, .fc-cell-you { font-size: 12px; }
}