/* 新手气泡：黑色小胶囊 + 一支箭头，缓慢上下浮动。
   五处共用（画布点卡片 / 画布可拖动的手掌 / 骰子 / L2 进入体验 / 日记里的短语），
   要改样子只改这一个文件。谁什么时候消失见 js/state/hints.js。 */

.hint {
  position: absolute;
  z-index: 3;
  width: max-content;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  background: #0C0C0E;
  color: #fff;                  /* 纯白，不用侧栏那档偏灰的 --ink */
  box-shadow: 0 5px 18px rgba(17, 17, 17, .2);
  font-size: var(--t-xs);
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;         /* 只是提示，别挡住底下能点的东西 */
  animation: hint-float 2600ms var(--ease) infinite;
}
.hint[hidden] { display: none; }

/* 浮动只碰 transform，所以下面所有定位都不许用 transform 居中，
   一律靠 inset + margin:auto，否则两者会互相抹掉。 */
@keyframes hint-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hint, .hint--hand { animation: none; }
}

.hint::after {                  /* 指向宿主的小三角 */
  content: "";
  position: absolute;
  border: 6px solid transparent;
}

/* ── 挂在按钮或短语下方 ───────────────────────────────── */
.hint--under,
.hint--under-center { top: calc(100% + 11px); }
.hint--under { left: 0; }
/* 箭头对准宿主中线：靠 inset + margin 居中，不用 transform */
.hint--under-center { left: 0; right: 0; width: fit-content; margin-inline: auto; }
.hint--under::after,
.hint--under-center::after { top: -12px; border-bottom-color: #0C0C0E; }
.hint--under::after { left: 15px; }
.hint--under-center::after { left: 50%; margin-left: -6px; }

/* ── 日记里第一个短语的上方 ───────────────────────────── */
/* left / top 由 day.js 按短语的首个行框算出来写成内联样式，
   这里只负责箭头朝下。 */
.hint--over::after { bottom: -12px; left: 15px; border-top-color: #0C0C0E; }

/* 骰子在侧栏标题栏里时不弹气泡：那时侧栏是展开的，画布上还有别的提示，
   几个气泡一起冒出来太吵。只有收起成悬浮按钮时才提示。 */
.sidebar__actions .hint { display: none; }
/* 没有可体验 APP 的作品，按钮是禁用的，别提示「自己试试」 */
.panel__experience:disabled + .hint { display: none; }

/* ── 画布上的两处 ─────────────────────────────────────── */
/* --card 是卡片边长、--gap 是卡片间距，由 viewport.measure() 发布在 .stage 上。
   焦点卡被放大到 110%（render.js 的 --k），所以半径按 0.55 算而不是 0.5。 */
.canvas-hints {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity var(--d-fast) var(--ease);
}
/* 画布在动的时候把提示收起来：焦点还在一张张卡片之间掠过，
   这时候指着某张卡说「点它看详情」是错的。停稳了再出现。 */
.stage.is-moving .canvas-hints { opacity: 0; }

.hint--card-top {
  left: 0; right: 0;
  bottom: calc(50% + var(--card, 160px) * .55 + 13px);
  width: fit-content;
  margin-inline: auto;
}
.hint--card-top::after {
  bottom: -12px;
  left: 50%;
  margin-left: -6px;
  border-top-color: #0C0C0E;
}

/* 「可以拖动画布」：手掌图标 + 一句话，落在焦点卡右边那张卡**上方的空隙**里。
   跟其余气泡同一套外观，只是**不带引出线**，就一个上下浮动的泡泡。 */
.hint-at {                      /* 零尺寸锚点：把气泡按自身中心钉在一个坐标上 */
  position: absolute;
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* relative：既留在 flex 流里被居中，又能给四边那些小三角当定位上下文 */
.hint-at .hint { position: relative; }
/* 落点：焦点卡**下面那张卡再下面**的那道空隙，与焦点卡同一列。
   竖直方向 = 焦点卡下沿(card/2) + 一道间距 + 一整张卡 + 半道间距。 */
.hint-at--below {
  left: 0;
  right: 0;
  width: auto;                   /* 盖掉 .hint-at 的 width: 0，才好横向居中 */
  top: calc(50% + var(--card, 160px) * 1.5 + var(--gap, 18px) * 1.5);
}
.hint--drag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hint--drag::after { content: none; }      /* 不指向某一处，改用下面四边的三角 */
.hint--drag svg { flex: none; }        /* 手掌也用纯白，不压暗 */

/* 四边各一个小三角：这个气泡不是指向某个按钮，而是在说「四面八方都能拖」。 */
.hint__tip { position: absolute; border: 5px solid transparent; }
.hint__tip.is-up    { top: -10px;    left: 50%; margin-left: -5px; border-bottom-color: #0C0C0E; }
.hint__tip.is-down  { bottom: -10px; left: 50%; margin-left: -5px; border-top-color: #0C0C0E; }
.hint__tip.is-left  { left: -10px;   top: 50%;  margin-top: -5px;  border-right-color: #0C0C0E; }
.hint__tip.is-right { right: -10px;  top: 50%;  margin-top: -5px;  border-left-color: #0C0C0E; }

/* 窄屏卡片小、边距紧，提示离卡片近一点，别顶到屏幕边缘 */
@media (max-width: 560px) {
  .hint--card-top { bottom: calc(50% + var(--card, 160px) * .55 + 10px); }
}