/* Tutorial de menus do primeiro acesso, no visual do arquivo shinobi. */

#nrmt-tutorial {
  position: fixed;
  z-index: 1000200;
  inset: 0;
  pointer-events: none;
  font-family: "Segoe UI", Arial, sans-serif;
}

#nrmt-tutorial[hidden] { display: none; }

/* O escurecimento é a sombra do próprio recorte: uma caixa com box-shadow
   gigante deixa só o alvo iluminado, sem máscara SVG nem quatro painéis. */
.nrmt-tut-spot {
  position: absolute;
  border-radius: 3px;
  box-shadow: 0 0 0 9999px rgba(3, 5, 6, .8), 0 0 0 1px rgba(226, 179, 64, .75), 0 0 22px rgba(226, 179, 64, .35);
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease;
  animation: nrmtTutPulse 1.8s ease-in-out infinite;
}

.nrmt-tut-spot[hidden] {
  display: block;
  left: 50%; top: 50%; width: 0; height: 0;
  animation: none;
  box-shadow: 0 0 0 9999px rgba(3, 5, 6, .82);
}

@keyframes nrmtTutPulse {
  50% { box-shadow: 0 0 0 9999px rgba(3, 5, 6, .8), 0 0 0 2px rgba(240, 202, 122, .9), 0 0 30px rgba(226, 179, 64, .5); }
}

.nrmt-tut-card {
  position: absolute;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 20px));
  padding: 16px 18px 14px;
  border: 1px solid #9d712a;
  background: linear-gradient(155deg, rgba(27, 34, 36, .99), rgba(8, 13, 15, .99));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .85), inset 0 0 44px rgba(185, 125, 33, .05);
  color: #ddd8ca;
  pointer-events: auto;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: left .22s ease, top .22s ease;
}

.nrmt-tut-card > small { display: block; color: #8b9593; font-size: 9.5px; font-weight: 900; letter-spacing: .2em; }
.nrmt-tut-card > h2 { margin: 5px 0 8px; color: #e7b63e; font: 21px NinjaTitle, Georgia, serif; letter-spacing: .05em; }
.nrmt-tut-card > p { margin: 0; color: #a3adaa; font-size: 12px; line-height: 1.6; }

.nrmt-tut-dots { display: flex; flex-wrap: wrap; gap: 4px; margin: 13px 0 12px; }
.nrmt-tut-dots i { width: 14px; height: 3px; background: #333d3f; transition: background .2s ease; }
.nrmt-tut-dots i.is-done { background: #6b5220; }
.nrmt-tut-dots i.is-active { background: #e7b63e; box-shadow: 0 0 8px rgba(226, 179, 64, .6); }

.nrmt-tut-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nrmt-tut-card footer > div { display: flex; gap: 6px; }

.nrmt-tut-card button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-image-source: var(--nrmt-archive-button-frame);
  border-image-slice: 56 188;
  border-image-width: 8px 16px;
  border-image-repeat: stretch;
  border-radius: 2px;
  background: linear-gradient(180deg, #11181b, #080c0e);
  color: #a7b1af;
  font: 900 10px NinjaUI, Arial, sans-serif;
  letter-spacing: .08em;
  text-shadow: 0 1px 1px #000;
  cursor: pointer;
}

.nrmt-tut-card button.is-primary { background: linear-gradient(180deg, #6d4c14, #35240a); color: #ffe6a8; }
.nrmt-tut-card button:disabled { opacity: .35; cursor: not-allowed; }
.nrmt-tut-card button:hover:not(:disabled) { filter: brightness(1.15); }

/* Enquanto o tutorial roda o jogo não recebe clique: o foco de luz perde o
   sentido se o jogador puder abrir outra janela por baixo. */
body.nrmt-tutorial-open #root,
body.nrmt-tutorial-open canvas { pointer-events: none !important; }

@media (max-width: 620px) {
  .nrmt-tut-card { width: calc(100vw - 16px); padding: 14px 15px 12px; }
  .nrmt-tut-card > h2 { font-size: 19px; }
  .nrmt-tut-card > p { font-size: 11.5px; }
  .nrmt-tut-card footer { flex-wrap: wrap; }
  .nrmt-tut-card footer > div { flex: 1; }
  .nrmt-tut-card footer button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nrmt-tut-spot { animation: none; transition: none; }
  .nrmt-tut-card { transition: none; }
}