/* 病种-症状像素机制动画：Canvas 负责场景，DOM 只承担轻量控制与字幕。 */
.mechanism-animation-panel {
  position: fixed;
  inset: 18px 18px auto auto;
  z-index: 10020;
  width: min(780px, calc(100vw - 42px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  color: #4d3d34;
}

.mechanism-animation-panel[hidden] {
  display: none;
}

.mechanism-animation {
  overflow: hidden;
  border: 1px solid rgba(161, 122, 91, 0.2);
  border-radius: 22px;
  background: #fffaf3;
  box-shadow: 0 24px 64px rgba(91, 62, 42, 0.2);
}

.mechanism-animation-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px 10px;
}

.mechanism-animation h2 {
  margin: 0;
  color: #49372e;
  font-size: 20px;
  line-height: 1.35;
}

.mechanism-segment-notice {
  margin: 0 20px 8px;
  color: #8a5a4b;
  font-size: 13px;
  line-height: 1.55;
}

.mechanism-animation-close {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(239, 215, 190, 0.55);
  color: #8d664f;
  cursor: pointer;
  font-size: 23px;
  line-height: 1;
}

.mechanism-animation-close:hover {
  background: #f1d7bf;
}

.mechanism-game-stage {
  position: relative;
  margin: 0 12px;
  overflow: hidden;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  background: transparent;
}

.mechanism-game-canvas {
  display: block;
  width: min(720px, 100%);
  flex: 0 0 auto;
  height: auto;
  cursor: pointer;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
}

.mechanism-animation--linked-world .mechanism-game-hint {
  display: none;
}

.mechanism-animation[data-template="myocardial_ischemia_referred_pain"] .mechanism-game-stage {
  display: flex;
  justify-content: center;
  background: transparent;
}

.mechanism-animation[data-template="myocardial_ischemia_referred_pain"] .mechanism-game-canvas {
  width: min(720px, 100%);
  flex: 0 0 auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.mechanism-animation[data-template="myocardial_ischemia_referred_pain"] .mechanism-game-hint {
  right: 20px;
  bottom: 8px;
  opacity: 0.56;
}

.mechanism-game-canvas:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(222, 107, 83, 0.42);
}

.mechanism-game-hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  margin: 0;
  color: rgba(104, 78, 61, 0.68);
  font-size: 12px;
  pointer-events: none;
}

.mechanism-caption-zone {
  min-height: 92px;
  padding: 14px 24px 8px;
  text-align: center;
}

.mechanism-scene-caption,
.mechanism-probe {
  margin: 0 auto;
  color: #594238;
  font-size: 17px;
  line-height: 1.75;
}

.mechanism-scene-caption {
  max-width: 680px;
  padding: 12px 18px;
  border: 1px solid rgba(208, 151, 111, 0.22);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(250, 237, 221, 0.72));
  box-shadow: 0 8px 22px rgba(121, 88, 68, 0.07);
  font-weight: 650;
  letter-spacing: 0.015em;
  animation: mechanismCaptionIn 360ms ease both;
}

.mechanism-probe {
  margin-top: 8px;
  color: #a65e49;
  font-size: 15px;
  font-weight: 600;
}

.mechanism-progress {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 4px 24px 14px;
}

.mechanism-progress::before,
.mechanism-progress::after {
  width: 54px;
  height: 1px;
  background: rgba(173, 123, 86, 0.24);
  content: '';
}

.mechanism-progress button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #e7d7ca;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.mechanism-progress button.is-complete {
  background: #d8aa7a;
}

.mechanism-progress button.is-active {
  transform: scale(1.45);
  background: #df6b53;
  box-shadow: 0 0 0 4px rgba(223, 107, 83, 0.13);
}

.mechanism-animation-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0 18px 17px;
}

.mechanism-animation-controls button {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
}

.mechanism-control-primary {
  background: #d96e56;
  color: #fffaf5;
  box-shadow: 0 8px 16px rgba(187, 84, 61, 0.2);
}

.mechanism-control-primary:hover {
  background: #c95e49;
}

.mechanism-control-quiet {
  background: #f5e6d8;
  color: #78584a;
}

.mechanism-control-quiet:hover {
  background: #eed7c3;
}

.mechanism-animation-unavailable-copy {
  margin: 0;
  padding: 0 20px 22px;
  color: #7d6254;
  line-height: 1.7;
}

@keyframes mechanismCaptionIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 940px) {
  .mechanism-animation-panel {
    inset: 10px;
    width: auto;
  }
}