/* Shared lightweight mascot + speech bubble on every tutorial surface. */
.tutorial-is-active { overflow: hidden !important; overscroll-behavior: none; }
.tutorial-is-active.tutorial-scroll-gutter { scrollbar-gutter: stable; }
.tutorial-is-active:not(.tutorial-launcher-visible) .xianggui-launcher-shell,
.tutorial-is-active .creator-xianggui-shell,
.tutorial-is-active #creator-xianggui-panel { visibility: hidden !important; pointer-events: none !important; }
.tutorial-target-layer { z-index: 99990 !important; }
.tutorial-click-target { animation: tutorial-click-cue 1.5s ease-in-out infinite !important; }
/* Individual scale leaves existing transforms (map positioning, arrows, etc.) intact. */
@keyframes tutorial-click-cue { 0%,100% { scale: 1; } 50% { scale: 1.045; } }
@media (prefers-reduced-motion: reduce) { .tutorial-click-target { animation: none !important; } }
.xiangyu-tutorial {
  position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; color: #173f38; overflow: visible;
  pointer-events: none; z-index: 100000;
  font-family: inherit;
}
.xiangyu-tutorial::backdrop { background: transparent; pointer-events: none; }
.xiangyu-tutorial[hidden] { display: none !important; }
.tutorial-shade { position: absolute; background: rgb(15 40 35 / .38); pointer-events: auto; }
.tutorial-highlight { position: absolute; border: 3px solid #dcaa44; border-radius: 16px;
  box-sizing: border-box; box-shadow: 0 0 0 3px rgb(255 255 255 / .8); pointer-events: none; }
.tutorial-card { position: absolute; box-sizing: border-box; width: min(320px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); display: flex; align-items: flex-start;
  background: transparent; border: 0; box-shadow: none; pointer-events: none; text-align: left; }
.tutorial-mascot { position: absolute; display: block; width: 108px; height: 126px;
  margin: 0; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 5px rgb(0 0 0 / .12)); }
.tutorial-dialogue { position: relative; flex: 1; min-width: 0; max-height: inherit; display: flex; flex-direction: column; }
.tutorial-dialogue::before { content: ''; position: absolute; z-index: 2;
  left: calc(var(--tutorial-tail-x, 0px) - 7px); top: calc(var(--tutorial-tail-y, 36px) - 7px);
  width: 14px; height: 14px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: rotate(var(--tutorial-tail-angle, 180deg)); pointer-events: none; }
.tutorial-mascot[hidden] { display: none; }
.tutorial-body { position: relative; background: #fff; border: 1px solid #d6e3dc; border-radius: 18px;
  padding: 13px 15px; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 4px 16px rgb(8 37 30 / .12); pointer-events: auto; }
.tutorial-card .tutorial-title { margin: 0; font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1.4; }
.tutorial-progress { margin: 0 0 4px; font-size: 11px; color: #73877e; }
.tutorial-card .tutorial-text { margin: 7px 0 0; font-size: 14px; line-height: 1.6; text-align: left; }
.tutorial-card .tutorial-status { margin: 6px 0 0; font-size: 12px; color: #956317; line-height: 1.5; }
.tutorial-status:empty { display: none; }
.tutorial-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px;
  flex-shrink: 0; padding: 8px 0 0; pointer-events: auto; }
.xiangyu-tutorial .tutorial-card .tutorial-actions > button { min-height: 32px; min-width: 0; height: auto; width: auto; margin: 0; padding: 6px 10px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box;
  border: 1px solid #d9e5df; border-radius: 9px; font: 600 12px/1.4 system-ui, 'Microsoft YaHei', sans-serif;
  letter-spacing: normal; white-space: nowrap; text-align: center; box-shadow: none; appearance: none;
  color: #176f63; background: #fff; cursor: pointer; }
.xiangyu-tutorial .tutorial-card .tutorial-actions > button.is-primary { color: #fff; background: #176f63; border-color: #176f63; }
.xiangyu-tutorial .tutorial-card .tutorial-actions > button:disabled { opacity: .6; cursor: default; }
.tutorial-card button:focus-visible { outline: 3px solid #dcaa44; outline-offset: 2px; }
@media (max-width: 600px) {
  .tutorial-mascot { width: 72px; height: 90px; }
  .tutorial-body { padding: 11px 12px; }
  .tutorial-card .tutorial-title { font-size: 14px; }
  .tutorial-card .tutorial-text { margin-top: 6px; font-size: 13px; line-height: 1.5; }
  .tutorial-actions { gap: 6px; }
}
/* Short phone viewports need room for the target plus the vertical guide pair. */
@media (max-width: 600px) and (max-height: 600px) {
  .tutorial-mascot { width: 40px; height: 50px; }
}