/* 入社前事件簿 — 遊び方デモの見た目（2026-10-06 新規）。tutorial-a.js と組で使う */
.tut-layer{--tut-ink:#1b2d63;--tut-red:#d93d22;--tut-sun:#ffd23f;color:var(--tut-ink);font-family:var(--round,sans-serif)}
.tut-layer *{box-sizing:border-box}
/* デモ中は体験版を直接さわれないようにする（スキップはいつでも押せる） */
.tut-block{position:absolute;inset:0;z-index:20;cursor:default;background:transparent}

/* 手のアイコン（画面に固定し、目標を追いかける） */
.tut-hand{position:fixed;left:0;top:0;width:54px;z-index:9002;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
.tut-hand.is-shown{opacity:1}
.tut-hand svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 6px rgba(16,27,64,.3));transform-origin:44% 6%}
.tut-hand.is-tap svg{animation:tut-press .26s ease-out}
.tut-ripple{position:absolute;left:8px;top:-14px;width:34px;height:34px;border-radius:50%;border:4px solid var(--tut-sun);opacity:0;pointer-events:none}
.tut-hand.is-tap .tut-ripple{animation:tut-ripple .55s ease-out}
@keyframes tut-press{50%{transform:scale(.86) translateY(3px)}}
@keyframes tut-ripple{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}

/* 字幕のカード（画面の下に固定） */
.tut-card{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9001;width:min(700px,calc(100vw - 24px));display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:10px 14px;padding:12px 14px 12px 12px;border-radius:14px;background:#fffdf7;border:2px solid var(--tut-ink);border-top:4px solid var(--tut-red);box-shadow:0 6px 0 rgba(27,45,99,.18),0 18px 40px rgba(16,27,64,.22)}
.tut-face{margin:0;width:58px;height:58px;border-radius:50%;overflow:hidden;background:#e3f1ff;border:2px solid var(--tut-ink)}
.tut-face img{width:100%;height:100%;object-fit:cover;display:block}
.tut-text{min-width:0}
.tut-step{display:flex;align-items:center;gap:8px;margin:0 0 2px;font-size:13px;font-weight:900;color:var(--tut-red);letter-spacing:.04em;line-height:1.4}
.tut-dots{display:inline-flex;gap:4px}
.tut-dots i{width:9px;height:9px;border-radius:50%;background:#dde3f0}
.tut-dots i.on{background:var(--tut-red)}
.tut-cap{margin:0;font-size:16px;font-weight:700;line-height:1.6}
.tut-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tut-btn{min-height:44px;padding:8px 16px;border-radius:999px;font:inherit;font-size:15px;font-weight:900;line-height:1.2;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tut-next{background:var(--tut-red);color:#fff;border:0;box-shadow:0 3px 0 #8f2814}
.tut-skip{background:#fff;color:var(--tut-ink);border:2px solid var(--tut-ink)}
.tut-skip small{font-size:12px;font-weight:700;padding:0 6px;border-radius:6px;background:#eef1f7;color:#4b5679;font-family:var(--type,monospace)}
.tut-btn[hidden]{display:none}
.tut-next:disabled{opacity:.45;cursor:default}
/* 出るときは少し遅らせて、体験版の位置合わせ（スクロール）が終わってから重ねる */
.tut-layer.is-on .tut-card{animation:tut-in .35s ease .45s both}
@keyframes tut-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translateX(-50%)}}
/* デモ中は体験版の通知を出さない（字幕で説明しているため。デモの後は体験版を最初に戻す） */
.is-a6-demo .toast{visibility:hidden}
.tut-btn:focus-visible{outline:3px solid #2f7de1;outline-offset:3px}
.tut-layer:not(.is-static):not(.is-end) .tut-next{display:none}
.tut-layer.is-end .tut-card{border-top-color:#0f9d7a}
.tut-layer.is-end .tut-step{color:#0c7d63}
.tut-layer.is-end .tut-next{background:#0c7d63;box-shadow:0 3px 0 #075744}
@media (max-width:600px){
 .tut-card{grid-template-columns:44px minmax(0,1fr);gap:8px 10px;padding:10px;bottom:max(10px,env(safe-area-inset-bottom))}
 .tut-face{width:44px;height:44px}
 .tut-cap{font-size:14px;line-height:1.55}
 .tut-btns{grid-column:1/-1;justify-content:flex-end}
 .tut-btn{min-height:42px;font-size:14px}
 .tut-hand{width:46px}
}
@media (prefers-reduced-motion:reduce){.tut-hand,.tut-hand svg,.tut-ripple{transition:none!important;animation:none!important}}

/* 体験版の通知（狭い画面で右に寄せたとき） */
.toast.is-a6-side{border-radius:14px;text-align:left;font-size:13px;line-height:1.55;padding:8px 12px}

/* タイトル画面の「遊び方を見る」 */
.art-v2 .title-card .a6-howto{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:14px}

/* 次に押す所が光る案内（ヒーローで手がかりを見つけてから入った人の、本編の最初だけ。tutorial-a.js が .a6-guide を付ける） */
#stage-ui .a6-guide{outline:4px solid #f5a400;outline-offset:3px;animation:a6-guide 1.3s ease-in-out infinite}
@keyframes a6-guide{0%,100%{outline-color:#f5a400;outline-offset:3px}50%{outline-color:rgba(245,164,0,.6);outline-offset:7px}}