.nalTutorialRoot{
  position:fixed;
  inset:0;
  z-index:2147483647;
  pointer-events:none;
}

.nalTutorialShade{
  position:fixed;
  inset:0;
  z-index:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
}

.nalTutorialTarget{
  scroll-margin:18px;
}

.nalTutorialTarget.nalTutorialTargetStatic{ position:relative !important; }

.nalTutorialSpotlightLayer{
  position:fixed;
  inset:0;
  z-index:20;
  overflow:hidden;
  pointer-events:none;
}

.nalTutorialSpotlight{
  position:fixed;
  box-sizing:border-box;
  border:3px solid #f5cf69;
  border-radius:10px;
  filter:drop-shadow(0 0 10px rgba(245,207,105,.95));
  animation:nalTutorialPulse 1.4s ease-in-out infinite;
}

@keyframes nalTutorialPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(245,207,105,.7); }
  50%{ box-shadow:0 0 0 9px rgba(245,207,105,0); }
}

.nalTutorialCard{
  position:fixed;
  z-index:30;
  top:14px;
  left:14px;
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  width:min(520px,calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  min-height:150px;
  overflow:auto;
  color:#f8edcf;
  border:1px solid #b88b39;
  border-radius:13px;
  background:
    linear-gradient(135deg,rgba(73,43,20,.96),rgba(14,17,23,.98) 48%,rgba(37,25,16,.98)),
    #17130e;
  box-shadow:0 18px 60px rgba(0,0,0,.72),inset 0 0 0 2px rgba(255,220,138,.08);
  pointer-events:auto;
  font-family:Georgia,"Times New Roman",serif;
}

.nalTutorialPortrait{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:12px 8px 0;
  border-right:1px solid rgba(213,164,76,.42);
  background:radial-gradient(circle at 50% 30%,rgba(222,177,91,.25),transparent 58%);
}

.nalTutorialPortrait img{ width:72px; max-height:122px; object-fit:contain; filter:drop-shadow(0 5px 8px #000); }
.nalTutorialBody{ padding:16px 18px 14px; }
.nalTutorialMeta{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:5px; }
.nalTutorialGuide{ color:#e9bc5e; font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.nalTutorialProgress{ color:#bfb49d; font:700 12px/1.2 system-ui,sans-serif; }
.nalTutorialCard h2{ margin:0 0 7px; color:#fff3d1; font-size:21px; line-height:1.15; }
.nalTutorialCard p{ margin:0; color:#ded4be; font:500 14px/1.45 system-ui,sans-serif; }
.nalTutorialHint{ display:block; margin-top:7px; color:#f2c86f; font:700 12px/1.35 system-ui,sans-serif; }
.nalTutorialActions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:13px; }
.nalTutorialActions button,.tutorialRestartBtn{
  min-height:38px;
  padding:8px 14px;
  border:1px solid #b88b39;
  border-radius:7px;
  color:#fff1c9;
  background:linear-gradient(#6f491f,#3d2814);
  box-shadow:inset 0 1px rgba(255,255,255,.12);
  font:800 13px/1 system-ui,sans-serif;
  cursor:pointer;
}
.nalTutorialActions button:hover,.tutorialRestartBtn:hover{ filter:brightness(1.16); }
.nalTutorialActions .nalTutorialSkip{ border-color:#63594a; color:#cfc5b3; background:#25231f; }
.nalTutorialActions button:disabled{ opacity:.52; cursor:wait; }

.nalTutorialConfirm{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.72);
  pointer-events:auto;
}
.nalTutorialConfirmBox{ width:min(430px,100%); padding:23px; color:#eee2c7; border:1px solid #b88b39; border-radius:12px; background:#18140f; box-shadow:0 20px 70px #000; text-align:center; }
.nalTutorialConfirmBox h2{ margin:0 0 9px; color:#f5cf69; font:800 22px Georgia,serif; }
.nalTutorialConfirmBox p{ margin:0; font:500 14px/1.5 system-ui,sans-serif; }
.nalTutorialConfirmBox .nalTutorialActions{ justify-content:center; }

.tutorialRestartBtn{ width:100%; margin-top:8px; }

@media (max-width:680px){
  .nalTutorialCard{
    grid-template-columns:62px minmax(0,1fr);
    width:calc(100vw - 16px);
    min-height:126px;
    border-radius:10px;
  }
  .nalTutorialPortrait{ padding:9px 4px 0; }
  .nalTutorialPortrait img{ width:56px; max-height:98px; }
  .nalTutorialBody{ padding:12px 12px 11px; }
  .nalTutorialCard h2{ font-size:18px; }
  .nalTutorialCard p{ font-size:13px; line-height:1.38; }
  .nalTutorialActions{ margin-top:9px; }
  .nalTutorialActions button{ min-height:36px; padding:7px 11px; font-size:12px; }
  .nalTutorialSpotlight{ border-width:2px; }
}

@media (prefers-reduced-motion:reduce){ .nalTutorialSpotlight{ animation:none; } }