/* ---------- 初めて遊ぶ人へのパリィの教え方（js/tutorial.js） ----------
   盤の上に重ねるだけで、タップは下の盤にそのまま届く（pointer-events: none） */
.tut-banner {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  width: max-content;
  max-width: 92%;
  padding: 7px 14px;
  border-radius: 12px;
  border: 2px solid #ffe11a;
  background: rgba(14, 14, 18, .82);
  color: #fff;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  animation: tutIn .25s ease-out;
}
.tut-banner b { color: #ffe11a; }
.tut-banner.good { border-color: #4fc38a; }
.tut-banner.good b { color: #7ff0b4; }
.tut-banner.miss { border-color: #8fb3d9; }
.tut-banner.miss b { color: #b9d6f5; }
@keyframes tutIn { from { opacity: 0; transform: translate(-50%, -6px); } }

/* CPU が置いたばかりの石を指す輪と「今タップ！」 */
.tut-pointer {
  position: absolute;
  z-index: 6;
  width: 0;
  height: 0;
  pointer-events: none;
}
.tut-ring {
  position: absolute;
  left: calc(var(--s) / -2);
  top: calc(var(--s) / -2);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  border: 3px solid #ffe11a;
  box-shadow: 0 0 12px rgba(255, 225, 26, .8);
  animation: tutPulse .5s ease-in-out infinite alternate;
}
@keyframes tutPulse { from { transform: scale(.85); } to { transform: scale(1.15); } }
.tut-tag {
  position: absolute;
  left: 0;
  bottom: calc(var(--s) / 2 + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffe11a;
  color: #17150f;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
/* 上の端の段では、盤からはみ出さないように吹き出しを下に出す */
.tut-tag.below { bottom: auto; top: calc(var(--s) / 2 + 6px); }