/* 虚拟人物 + 卷轴帮助（2026-11-03 晚，老板定）
 *
 * 老板原话：「界面右边是使用帮助……画个虚拟人物左侧导航条默认提示，
 * 也要有关闭不提示的功能，然后收入到虚拟人物里。点击虚拟人物，
 * 那种对联卷起来展开的方法，展开后每行一个帮助提示。」
 *
 * 布局：人物钉在左栏右边一点（不盖左栏）；卷轴从右侧往下展开。
 * 逻辑在 help.js，这里只管长相。 */

/* ---- 虚拟人物 ---- */
.help-guy {
  position: fixed;
  right: 16px;
  top: 58px;          /* 顶栏（sticky，约 46px 高）下面一点，不挡右上一排按钮 */
  width: 72px;
  height: 50px;
  z-index: 60;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
  filter: drop-shadow(0 6px 12px rgba(60, 45, 20, .18));
  animation: guy-in .4s ease-out;
  transition: transform .15s;
}
.help-guy:hover { transform: translateY(-2px); }
.help-guy:focus-visible { outline: 2px solid #e8710a; outline-offset: 3px; border-radius: 12px; }
.help-guy svg { width: 100%; height: 100%; display: block; }

@keyframes guy-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* 人物头上的默认提示（本机首月每次登录冒一次，见 help.js） */
.help-bubble {
  position: fixed;
  right: 16px;
  top: 116px;         /* 图标下面 */
  z-index: 61;
  max-width: 230px;
  background: #fff;
  border: 1px solid #e5e1d8;
  border-radius: 12px;
  padding: 9px 12px 8px;
  font-size: 13px;
  line-height: 1.7;
  color: #3a362e;
  box-shadow: 0 8px 24px rgba(60, 45, 20, .16);
  animation: guy-in .25s ease-out;
}
.help-bubble::after {
  content: "";
  position: absolute;
  right: 20px;
  top: -7px;          /* 箭头朝上，指向人物 */
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #e5e1d8;
  border-top: 1px solid #e5e1d8;
  transform: rotate(45deg);
}
.help-bubble button {
  display: block;
  margin: 4px 0 0 auto;
  border: 0;
  background: none;
  color: #8a8578;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}
.help-bubble button:hover { color: #e8710a; }

/* ---- 卷轴（对联式从上往下展开）---- */
.help-scroll {
  position: fixed;
  right: 16px;
  top: 124px;
  width: 336px;
  max-height: calc(100vh - 96px);
  z-index: 62;
  background: #fffdf6;
  border: 1px solid #e6dcc6;
  border-radius: 4px;
  box-shadow: 0 14px 40px rgba(60, 45, 20, .22);
  transform-origin: top center;
  animation: unroll .36s cubic-bezier(.2, .85, .25, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@keyframes unroll {
  from { transform: scaleY(.03); opacity: .15; }
  to { transform: scaleY(1); opacity: 1; }
}

/* 上下两根卷轴木杆 */
.help-scroll::before,
.help-scroll::after {
  content: "";
  display: block;
  height: 9px;
  flex: 0 0 auto;
  background: linear-gradient(#c98b4b, #a96f35);
  border-radius: 5px;
  margin: 0 -3px;
}
.help-scroll::after { border-radius: 5px; }

.help-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px dashed #e6dcc6;
}
.help-head b { font-size: 15px; color: #6b4b21; letter-spacing: .04em; }
.help-head .sp { flex: 1; }
.help-head button {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 12.5px;
  color: #9a8a70;
  padding: 3px 6px;
  border-radius: 6px;
}
.help-head button:hover { color: #c0392b; background: #faf3e6; }
.help-head .x { font-size: 16px; line-height: 1; }

.help-body {
  overflow-y: auto;
  padding: 8px 14px 14px;
  scrollbar-width: thin;
}

.help-sec { margin-top: 8px; }
.help-sec h4 {
  margin: 6px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #b07c34;
  letter-spacing: .08em;
}
.help-sec h4::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background: #e6dcc6;
  vertical-align: 3px;
  margin-left: 8px;
}

.help-row {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 13px;
  line-height: 1.7;
  color: #4a4235;
  cursor: default;
}
button.help-row { cursor: pointer; }
button.help-row:hover { background: #faf3e3; color: #7a4d12; }
.help-row .k {
  display: inline-block;
  min-width: 4.6em;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 5px;
  background: #f4ead6;
  color: #8a6428;
  font-size: 12px;
  text-align: center;
}
button.help-row:hover .k { background: #efdfc0; color: #6b4b21; }

.help-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e6dcc6;
  font-size: 12px;
  color: #9a8a70;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .help-guy { right: 8px; top: 50px; width: 60px; height: 42px; }
  .help-bubble { right: 8px; top: 100px; max-width: none; left: 8px; }
  .help-scroll { right: 8px; left: 8px; width: auto; top: 108px; }
}