/* ==== 新手教程 ==== */
.tutorial-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 3, 1, 0.8);
  z-index: 120;
}
.tutorial-panel {
  width: 680px;
  max-width: 94vw;
  border-radius: 18px;
  padding: 26px 34px 22px;
  background:
    linear-gradient(rgba(32,20,8,0.96), rgba(22,13,5,0.97)),
    url('../assets/board/leather.jpg');
  background-size: 480px;
  border: 3px solid #6d4c1e;
  box-shadow: 0 0 0 2px #241708, 0 18px 50px rgba(0,0,0,0.85), inset 0 0 40px rgba(0,0,0,0.5);
}
.tutorial-panel h2 {
  color: #ffd76e;
  font-size: 26px;
  letter-spacing: 4px;
  text-align: center;
  text-shadow: 0 2px 4px #000;
  margin-bottom: 6px;
}
.tutorial-step-label {
  text-align: center;
  color: #8a7a58;
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.tutorial-body {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 230px;
}
.tutorial-demo {
  flex-shrink: 0;
  width: 230px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.tutorial-demo .demo-note {
  color: #8a7a58;
  font-size: 12px;
  text-align: center;
  margin-top: 8px;
}
.tutorial-text {
  color: #e8d5a3;
  font-size: 15.5px;
  line-height: 2.05;
}
.tutorial-text b { color: #ffd76e; }
.tutorial-text .kw { color: #90caf9; font-weight: bold; }

.tutorial-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.tutorial-dots { display: flex; gap: 8px; }
.tutorial-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a3113;
  border: 1px solid #6d4c1e;
}
.tutorial-dots i.on { background: #ffd76e; box-shadow: 0 0 6px rgba(255,215,110,0.9); }

.t-btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
  padding: 8px 24px;
  border-radius: 9px;
  border: 2px solid #6d4c1e;
  background: #d8b054;
  color: #3a2404;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.t-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.t-btn.ghost {
  background: transparent;
  color: #b09c72;
  border-color: #4a3113;
}
.t-btn:disabled { opacity: 0.35; cursor: default; filter: none; transform: none; }

/* 对局内帮助按钮 */
.help-btn {
  position: absolute;
  left: 1.2%;
  bottom: 4%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  z-index: 25;
  border: 2.5px solid #6d4c1e;
  background:
    linear-gradient(rgba(255,236,170,0.2), rgba(120,70,10,0.25)),
    url('../assets/board/metal.jpg');
  background-size: 140px;
  background-color: #d8b054;
  color: #3a2404;
  font-size: 24px;
  font-weight: bold;
  font-family: Georgia, serif;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
  transition: transform 0.15s, box-shadow 0.15s;
}
.help-btn:hover { transform: scale(1.1); box-shadow: 0 0 14px rgba(255,214,110,0.75); }

/* 开场界面按钮 */
.start-screen .howto-btn { margin-top: -4px; }

/* 教程演示元素微缩 */
.tutorial-demo .minion { cursor: default; }
.tutorial-demo .minion:hover { transform: none; }
.tutorial-demo .demo-arrow {
  font-size: 34px;
  color: #ff5a3c;
  text-shadow: 0 0 10px rgba(255,90,60,0.8);
}
.tutorial-demo .crystal-row { display: flex; gap: 4px; }
.tutorial-demo .crystal-row img { width: 26px; height: 28px; }
.tutorial-demo .end-turn-demo {
  width: 120px;
  height: 46px;
  border-radius: 10px;
  border: 3px solid #6d4c1e;
  background: #d8b054;
  color: #3a2404;
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}