/* P003 新手引导专属视觉：由 public/modules/tutorial.js 使用。 */

.device.tutorial-exclusive .hud{z-index:80;}
.device.tutorial-exclusive .hud .right{pointer-events:none;}
.device.tutorial-settings:not(.tutorial-settings-panel) .hud{display:flex!important;pointer-events:none!important;}
.device.tutorial-settings:not(.tutorial-settings-panel) .hud .left,
.device.tutorial-settings:not(.tutorial-settings-panel) .hud .sig,
.device.tutorial-settings:not(.tutorial-settings-panel) .hud .skin-entry{visibility:hidden!important;pointer-events:none!important;}
.device.tutorial-settings:not(.tutorial-settings-panel) .hud .right{pointer-events:auto!important;}
.device.tutorial-settings:not(.tutorial-settings-panel) #gearBtn{display:flex!important;visibility:visible!important;pointer-events:auto!important;}
.device.tutorial-settings:not(.tutorial-settings-panel) .scene{pointer-events:none!important;}
.device.tutorial-settings-panel .hud{display:none!important;pointer-events:none!important;}
.device.tutorial-settings #tutOverlay{z-index:70;pointer-events:none!important;}

/* 真实设置面板的教程锁：只有当前聚光控件可操作，蒙版本身不伪造点击。 */
#setPanel.sp-guided .sp-mask,
#setPanel.sp-guided .sp-chip,
#setPanel.sp-guided .sp-mod,
#setPanel.sp-guided .sp-vol{pointer-events:none!important;}
#setPanel.sp-guided .sp-guide-target{pointer-events:auto!important;}
#setPanel.sp-guided.sp-guide-pending .sp-guide-target{pointer-events:none!important;}
#setPanel.sp-guided .sp-foot{color:rgba(225,237,255,.86);font-weight:700;}

.tut-settings-hole{position:absolute;z-index:1;box-sizing:border-box;border-radius:22px;
  border:2px solid rgba(194,231,255,.8);box-shadow:0 0 0 9999px rgba(0,0,0,.70),0 0 24px rgba(126,205,255,.72);
  pointer-events:none;}
.tut-settings-cue{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;}
.tut-settings-cue img{position:absolute;display:block;object-fit:contain;pointer-events:none;}
.tut-settings-cue-run{animation:tut-settings-cue-window 2.8s linear forwards;}
.tut-settings-cue-run .tut-settings-glow{animation:tut-flash 1.4s ease-in-out 2;}
.tut-settings-cue-run .tut-settings-glow-small{animation-delay:.3s;}
.tut-settings-cue-run .tut-settings-hand{animation:tut-point 1.2s ease-in-out 2;}
.tut-settings-cue-swipe-down.tut-settings-cue-run{animation-duration:2s;}
.tut-settings-cue-swipe-down.tut-settings-cue-run .tut-settings-white-dot,
.tut-settings-cue-swipe-down.tut-settings-cue-run .tut-settings-hand{animation:tut-swipe 1s ease-in-out 2;}
.tut-settings-cue-swipe-up.tut-settings-cue-run .tut-settings-hand{animation:tut-swipe-up 1.2s ease-in-out 2;}

/* 引导角色、CTA 与 KidsHub 热区均由教程叠层绘制，日常元素不可穿透。 */
#device.tutorial-exclusive #scene-main .xiaoke-wrap,
#device.tutorial-exclusive #scene-main .xiaoke-shadow,
#device.tutorial-exclusive #scene-main .main-focus-btn,
#device.tutorial-exclusive #scene-peiban .pb-xk-wrap,
#device.tutorial-exclusive #scene-peiban .pb-shadow,
#device.tutorial-exclusive #scene-night .nr-xiaoke{visibility:hidden;}
#device.tutorial-exclusive #scene-main .main-focus-btn{pointer-events:none;}
#device.tutorial-exclusive #khubBtn{display:none!important;pointer-events:none;}

#openbox.tutorial-opening{transition:none;}
.device.tutorial-exclusive #sceneMic{z-index:80;}

@keyframes tut-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes tut-point{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes tut-flash{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes tut-breathe{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.045);filter:brightness(1.18)}}
@keyframes tut-spin{to{transform:rotate(360deg)}}
@keyframes tut-fade{from{opacity:0}to{opacity:1}}
@keyframes tut-night-hud-arrow{0%{opacity:0;transform:translateY(0)}6%{opacity:1;transform:translateY(0)}24%{opacity:1;transform:translateY(14px)}42%{opacity:1;transform:translateY(0)}60%{opacity:1;transform:translateY(14px)}78%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes tut-swipe{0%{transform:translateY(0);opacity:0}12%{opacity:1}80%{transform:translateY(180px);opacity:1}100%{transform:translateY(180px);opacity:0}}
@keyframes tut-swipe-up{0%{transform:translateY(80px);opacity:0}12%{opacity:1}80%{transform:translateY(-80px);opacity:1}100%{transform:translateY(-80px);opacity:0}}
@keyframes tut-settings-cue-window{0%,98%{opacity:1}100%{opacity:0}}
