/* tutorial.css — スポットライト式チュートリアル（S9-8c）
   追加専用。凍結スタイル（portal.css）は一切変更しない。既存要素の上に重ねるだけ。
   ブランド配色: 紺 #1F3A93 / 赤 #D21B1B（clockwork-design）。 */

#tut-ov { position: fixed; inset: 0; z-index: 100000; pointer-events: none; }
#tut-ov.on { pointer-events: auto; }
/* 閉じている間（.on なし）は、暗幕・切り抜き・カードごと隠す。
   これが無いと close() 後に #tut-card だけ画面に残り続ける（最後の画面が消えない不具合の修正）。 */
#tut-ov:not(.on) { display: none; }

/* ターゲットが無いステップ用の全面暗幕 */
#tut-dim { position: fixed; inset: 0; background: rgba(15, 23, 42, .58); opacity: 0; transition: opacity .18s ease; }
#tut-ov.on #tut-dim { opacity: 1; }
#tut-ov.hasHi #tut-dim { opacity: 0; } /* ハイライト時は切り抜きの box-shadow が暗幕になる */

/* ターゲットの切り抜き（周囲を box-shadow で暗くする＝穴あき効果） */
#tut-hi {
  position: fixed; border-radius: 12px; display: none; pointer-events: none;
  border: 3px solid #D21B1B; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .58);
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
#tut-ov.hasHi #tut-hi { display: block; }

/* 説明カード */
#tut-card {
  position: fixed; z-index: 100001; box-sizing: border-box;
  max-width: 340px; width: calc(100vw - 32px);
  background: #fff; color: #0f172a; border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .34); padding: 16px 16px 12px;
  font-family: 'Noto Sans JP', system-ui, sans-serif;
}
#tut-card .tut-t { font-weight: 900; font-size: 16px; color: #1F3A93; margin: 0 0 6px; }
#tut-card .tut-b { font-size: 14px; line-height: 1.65; margin: 0 0 12px; white-space: pre-line; }
#tut-card .tut-row { display: flex; align-items: center; gap: 8px; }
#tut-card .tut-dots { display: flex; gap: 5px; flex: 1; }
#tut-card .tut-dot { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
#tut-card .tut-dot.on { background: #1F3A93; }

.tut-btn { border: 0; border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }
.tut-btn.p { background: #1F3A93; color: #fff; }
.tut-btn.g { background: #eef2f7; color: #1F3A93; }
.tut-x { background: transparent; border: 0; color: #64748b; font-size: 13px; cursor: pointer; padding: 6px 4px; text-decoration: underline; font-family: inherit; }

/* 「？ ガイド」再生ボタン（右下・フローティング。ヘッダは改変しない） */
#tut-help {
  position: fixed; right: 14px; bottom: 14px; z-index: 99998;
  min-width: 46px; height: 46px; padding: 0 14px; border-radius: 23px;
  background: #1F3A93; color: #fff; border: 0; font-size: 15px; font-weight: 900;
  box-shadow: 0 6px 18px rgba(31, 58, 147, .40); cursor: pointer;
  font-family: 'Noto Sans JP', system-ui, sans-serif; display: inline-flex; align-items: center; gap: 6px;
}
#tut-help:active { transform: scale(.96); }

@media (max-width: 480px) { #tut-card { max-width: none; } }