/* ============================================================
   🎓 ONBOARDING DAS MECÂNICAS — cartão de «primeira vez»
   Aparece uma vez por mecânica, com o nível em pausa por trás.
   ============================================================ */

.mech-intro-ov{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(6,10,20,.72); backdrop-filter:blur(3px);
  animation:miOvIn .22s ease;
}
@keyframes miOvIn{ from{opacity:0} to{opacity:1} }

.mech-intro{
  width:100%; max-width:330px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:linear-gradient(170deg,#1a2b47,#101a2e);
  border:2px solid rgba(255,214,90,.55); border-radius:22px;
  padding:22px 20px 20px; box-shadow:0 18px 44px rgba(0,0,0,.5);
  color:#eaf1ff;
  animation:miIn .34s cubic-bezier(.2,1.3,.35,1);
}
@keyframes miIn{ from{opacity:0; transform:translateY(14px) scale(.94)} to{opacity:1; transform:none} }

.mech-intro .mi-ic{
  font-size:3rem; line-height:1;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));
  animation:miPop .5s .1s both cubic-bezier(.2,1.5,.4,1);
}
@keyframes miPop{ from{transform:scale(0) rotate(-12deg)} to{transform:none} }

/* contador quando o nível tem várias mecânicas novas (1/2, 2/2…) */
.mech-intro .mi-step{
  position:absolute; top:12px; right:14px;
  font-size:.72rem; font-weight:800; opacity:.6; letter-spacing:.04em;
}
.mech-intro{ position:relative }
.mech-intro .mi-t{ margin:0; font-size:1.35rem; font-weight:900; color:#ffd666 }
.mech-intro .mi-b{ margin:0; font-size:.92rem; line-height:1.45; opacity:.94 }
.mech-intro .btn{ margin-top:4px; min-width:160px }

@media (prefers-reduced-motion:reduce){
  .mech-intro-ov,.mech-intro,.mech-intro .mi-ic{ animation:none }
}