/* Check-valve leak diagnosis game · page styles (en/zh share this file) */
[hidden] { display: none !important; }

.game-stage {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.game-stage svg { display: block; width: 100%; height: auto; }

.hud {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}
.hud b { color: #2563eb; font-weight: 800; }
.hud .err b { color: #be123c; }
#hintBtn {
  border: 2px solid #cbe0ff;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  font-family: inherit;
  transition: all 0.2s;
}
#hintBtn:hover { background: #dbeafe; }
#hintBtn:disabled { opacity: 0.45; cursor: default; }

/* ---- case symptom prompt (text lives in the HTML) ---- */
.diag-prompt {
  margin-top: 14px;
  padding: 14px 18px;
  background: #eff6ff;
  border: 1px solid #cbe0ff;
  border-left: 3px solid #2563eb;
  border-radius: 10px;
  color: #1e293b;
  font-size: 14px;
  line-height: 1.6;
}
.diag-prompt .prompt-label { font-weight: 800; color: #1e40af; margin-right: 6px; }
.case-text { display: none; margin: 0; }
.case-text.is-active { display: block; }

.status-bar {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  min-height: 22px;
}
.status-bar .hl { color: #2563eb; font-weight: 800; }
.status-bar .ok { color: #047857; font-weight: 800; }
.status-bar .no { color: #be123c; font-weight: 800; }

.controls {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.game-frame .btn {
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 24px;
  font-family: inherit;
  transition: all 0.2s;
}
.game-frame .btn.primary { background: #2563eb; color: #ffffff; }
.game-frame .btn.ghost { background: #f1f5f9; color: #475569; }
.game-frame .btn:hover { opacity: 0.88; transform: translateY(-1px); }
.game-frame .btn:active { transform: translateY(0); }

.result {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  margin-top: 14px;
  padding: 26px 20px;
  text-align: center;
}
.result h2 { font-size: 20px; color: #1e293b; margin-bottom: 10px; }
.result-line { font-size: 15px; color: #475569; margin-bottom: 16px; line-height: 1.7; }
.result-line strong { color: #2563eb; font-size: 18px; font-weight: 800; }

/* ---------------- clickable diagnosis parts ---------------- */
.part { cursor: pointer; transition: filter 0.2s ease; }
.part:hover { filter: drop-shadow(0 0 7px rgba(37, 99, 235, 0.45)); }
.part .defect { opacity: 0; transition: opacity 0.35s ease; }
.part.is-fault { filter: drop-shadow(0 0 10px rgba(190, 18, 60, 0.55)); }
.part.is-fault .defect { opacity: 1; }
.part.is-fault:hover { filter: drop-shadow(0 0 12px rgba(190, 18, 60, 0.7)); }
.part.correct { filter: drop-shadow(0 0 12px rgba(4, 120, 87, 0.7)); }
.part.correct .defect { opacity: 1; }
.part.wrong { animation: diagShake 0.4s ease; }
@keyframes diagShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
.part.hint { animation: diagPulse 1.3s ease-in-out 2; }
@keyframes diagPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.4)); }
  50%      { filter: drop-shadow(0 0 16px rgba(37, 99, 235, 0.95)); }
}

/* ---------------- idle flow animation ---------------- */
.flow { stroke-dasharray: 9 13; animation: dvFlow 1s linear infinite; }
@keyframes dvFlow { to { stroke-dashoffset: -22; } }

@media (max-width: 480px) {
  .hud { font-size: 13px; gap: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .part, .part .defect { transition: none; }
  .part.wrong, .part.hint { animation: none; }
  .game-frame .btn, #hintBtn { transition: none; }
  .flow { animation: none; }
}