/* ---------- 教程遮罩 ---------- */
.tut {
  position: absolute;
  inset: 0;
  z-index: var(--z-tutorial);
  pointer-events: none;
}

.tut.is-center {
  background: var(--scrim);
}

.tut__spot {
  position: absolute;
  display: none;
  border: calc(var(--u) * 0.8) solid var(--sun);
  border-radius: var(--r-s);
  box-shadow: 0 0 0 200vmax var(--scrim);
  animation: spot-breathe 1.2s ease-in-out infinite;
  transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s;
}

@keyframes spot-breathe {
  50% {
    transform: scale(1.04);
  }
}

.tut__card {
  position: absolute;
  left: var(--gap-l);
  right: var(--gap-l);
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  padding: var(--gap-m) var(--gap-l);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-m);
  background: var(--white);
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.tut.is-center .tut__card {
  top: 50%;
  transform: translateY(-50%);
}

.tut__text {
  margin: 0;
  font-size: var(--fs-m);
  line-height: 1.5;
}

.tut__card .btn {
  align-self: stretch;
}

.tut__skip {
  position: absolute;
  top: var(--safe-top);
  right: var(--gap-m);
  min-height: var(--touch);
  padding: var(--gap-xs) var(--gap-l);
  font-size: var(--fs-s);
  pointer-events: auto;
}

/* 教程期间给右上角的「跳过」留出一条位置，不压住顶部栏 */
.stage.is-tut .screen {
  padding-top: calc(var(--safe-top) + var(--touch) + var(--gap-m));
}