/* ── Tutorial overlay ── */
.tut-wrap {
  position: fixed; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 40;
  pointer-events: none;
  background: transparent;
  transition: background 0.35s;
}
.tut-wrap.active {
  pointer-events: all;
  background: rgba(20, 16, 8, 0.35);
}

.tut-card {
  width: 100%; max-width: 390px;
  background: var(--bg);
  border-radius: 28px 28px 0 0;
  padding: 20px 20px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.34, 1.26, 0.64, 1);
}
.tut-wrap.active .tut-card { transform: translateY(0); }

/* Badr */
.tut-badr svg { display: block; }
.tut-badr.sm svg { width: 44px; height: auto; }
.tut-badr.lg svg { width: 68px; height: auto; }

/* Tile row */
.tut-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  margin: 4px 0;
}
.tut-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex-shrink: 0;
}
.tut-arrow-line { font-size: 22px; color: #B4B2A9; line-height: 1; }
.tut-arrow-label { font-size: 12px; font-weight: 700; color: #888780; text-align: center; white-space: nowrap; }

/* Demo hex */
.tut-hex-outer {
  width: 80px; flex-shrink: 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.tut-hex-shadow {
  position: absolute;
  width: 80px; height: calc(80px * 1.103);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  top: calc(80px * 0.064); left: 0;
  z-index: 0; pointer-events: none;
}
.tut-hex {
  width: 80px; height: calc(80px * 1.103);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; z-index: 1; gap: 2px;
}
.tut-hex .lock-icon { opacity: 0.4; pointer-events: none; color: #888780; }
.tut-hex-arabic { font-family: 'Amiri', serif; font-size: 20px; font-weight: 700; direction: rtl; text-align: center; line-height: 1.1; pointer-events: none; }
.tut-hex-ayahs { font-size: 11px; font-weight: 600; pointer-events: none; opacity: 0.75; }

.tut-hex.completed .tut-hex-arabic, .tut-hex.completed .tut-hex-ayahs { color: #E1F5EE; }
.tut-hex.inprogress .tut-hex-arabic, .tut-hex.inprogress .tut-hex-ayahs { color: #2a5a7a; }
.tut-hex.needs-rev .tut-hex-arabic, .tut-hex.needs-rev .tut-hex-ayahs { color: #6a4010; }
.tut-hex.in-revision .tut-hex-arabic, .tut-hex.in-revision .tut-hex-ayahs { color: #3a3870; }
.tut-hex.unlocked .tut-hex-arabic, .tut-hex.unlocked .tut-hex-ayahs { color: #085041; }
.tut-hex.locked .tut-hex-arabic, .tut-hex.locked .tut-hex-ayahs { color: #888780; }

.tut-hex.completed { background: var(--green); } .tut-hex-shadow.completed { background: var(--green-dark); }
.tut-hex.inprogress { background: #c8dff0; } .tut-hex-shadow.inprogress { background: #a0c4de; }
.tut-hex.needs-rev { background: #f5d9a0; } .tut-hex-shadow.needs-rev { background: #d4b070; }
.tut-hex.in-revision { background: #d8d6f0; } .tut-hex-shadow.in-revision { background: #b8b4e0; }
.tut-hex.unlocked { background: #c8ede0; } .tut-hex-shadow.unlocked { background: #a0d4c0; }
.tut-hex.locked { background: #EDEAE4; } .tut-hex-shadow.locked { background: #D3D1C7; }

/* Text */
.tut-title { font-size: 18px; font-weight: 800; color: #2C2C2A; text-align: center; line-height: 1.3; }
.tut-msg { font-size: 15px; font-weight: 500; color: #555450; text-align: center; line-height: 1.6; max-width: 300px; }

/* Progress dots */
.tut-dots { display: flex; gap: 6px; align-items: center; margin: 2px 0; }
.tut-dot { width: 7px; height: 7px; border-radius: 50%; background: #E0DDD6; transition: background 0.25s, transform 0.25s; }
.tut-dot.active { background: var(--green); transform: scale(1.35); }

/* Buttons */
.tut-btns { display: flex; gap: 10px; width: 100%; margin-top: 2px; }
.tut-btn-back { flex: 1; background: #F0EDE6; color: #555450; border: none; border-radius: 14px; padding: 12px; font-size: 15px; font-weight: 700; cursor: pointer; }
.tut-btn-next { flex: 2; background: var(--green); color: #fff; border: none; border-radius: 14px; padding: 12px; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 var(--green-dark); transition: transform 0.1s, box-shadow 0.1s; }
.tut-btn-next:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--green-dark); }
.tut-btn-full { width: 100%; background: var(--green); color: #fff; border: none; border-radius: 16px; padding: 14px; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 5px 0 var(--green-dark); transition: transform 0.1s, box-shadow 0.1s; margin-top: 2px; }
.tut-btn-full:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--green-dark); }